В этой статье мы рассмотрим некоторые полезные инструменты, требования и рекомендации, которые уместно иметь в виду в работе с универсальным дизайном контента в Интернете.
В этой статье мы рассмотрим следующие области:
- Коэффициент контрастности
- Расстояние между ними и расстояние между ними
- Введите слова
- Альтернативный текст на нетекстовых изображениях и элементах
- Ле́къ м. ле́къ м. ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ
- Запустить анализ доступности с Axe
- Попробуйте инструмент для чтения текста - для более глубокого понимания
- Избегайте ошибок и пропусков в коде с проверкой
Коэффициент контрастности
Когда дело доходит до дизайна, легко нарисовать новые, которые, по вашему мнению, выглядят аккуратно и чисто. Но мы часто забываем, что есть люди, у которых проблемы с низкими контрастами. Людям с плохим зрением и людям с трудностями чтения и письма может быть трудно правильно читать и воспринимать контент, если контрастность слишком низкая. Обычно это относится к таким элементам, как заголовки, абзацы и кнопки. Поэтому важно убедиться, что фон и цвет переднего плана имеют правильное соотношение контрастности относительно друг друга. Я знаю. 2.0, требуется, чтобы соотношение контрастности между фоном и передним планом было на 4,5:1Шкала
Пример контрастности в работе с заголовками и абзацами.
Показать все Скриншоты из игры
Используйте встроенные инструменты Google Chrome для разработчиков, чтобы увидеть контраст между фоном и цветом переднего плана. Открыть в Windows CTRL + Shift + C (переход + C) или на с CMD + Опция + C или выберите деталь которую вы хотите проверить дальше.
Проверьте контрастность с Stark для Adobe XD
Stark — это расширение для Adobe XD, которое позволяет проверять контрасты и проводить анализ цветовой слепоты. Лт.Скачать Download
Расстояние между ними и расстояние между ними
Для людей, которые борются с нарушениями зрения и дислексией, текст на сайте может создать проблемы. Важно убедиться, что у нас есть хороший заголовок и абзац. По данным WCAG 2.1Рекомендуется иметь по крайней мере:
- 1,5
- Расстояние до точки 2
- Расстояние в блоках текста должно быть не менее 0,12 displaystyle
- Промежуток между словами должен быть не менее 0,16 displaystyle
Введите слова
Люди с нарушениями зрения и люди с трудностями чтения и письма могут использовать инструменты чтения текста, чтобы слышать и ориентироваться в контенте. Особенно, если речь идет о формах. Поэтому важно, чтобы формы использовали метки на полях ввода, чтобы инструмент чтения текста правильно воспринимал поля.
В работе с формами мы можем использовать метки (label). Этикетки помогают гарантировать, что входные поля (входы) правильно воспринимаются инструментом и что поле идентифицируется и имеет смысл.
В форме можно использовать HTML-тег <label>, чтобы инструмент правильно распознал поле. Альтернативный текст для изображений и нетекстовых элементов
Для того, чтобы инструмент чтения воспринимал изображения, формы, иллюстрации и другие элементы нетекстового контента, требуется альтернативное описание элемента.
Изображения должны иметь альтернативный заголовок, описывающий контент. Это касается всех элементов, кроме картинок или фигур, которые имеют декоративное назначение, тогда альтернативный текст должен быть пустым.
Пример изображения с альтернативным текстом и декоративное изображение без альтернативного текста.
Ле́къ м. ле́къ м. ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ, ле́къ
Рекомендуется, чтобы ссылка была описательной в соответствии с содержанием целевой страницы ссылки. Например: мы подготовили Список рассылкиЭто дает вам более глубокое понимание маркетинга. Ссылка также должна восприниматься как ссылка по отношению к контексту вокруг них, чтобы не создавать путаницу в отношении существования ссылки или, например, текста. Чтобы было понятно, можно использовать линию ниже ссылки. В документе CSS можно добавить text-decoration:underline; к тегу якоря.
Запустить анализ доступности с Axe
Axe позволяет выполнять анализ доступности веб-страниц и помогает обнаруживать ошибки проектирования. Скачать Axe для Google Chrome
Попробуйте инструмент для чтения текста - для более глубокого понимания
Инструмент для чтения текста может дать более глубокое понимание того, как на самом деле чувствует себя сайт для людей, которые страдают от слепоты, снижения зрения, дислексии и других когнитивных проблем.
Скачать Chrome Vox для Google Chrome Read more about Доступность для Mac OS
Избегайте ошибок и пропусков в коде с проверкой
Код, содержащий ошибки на сайте, может привести к тому, что инструменты доступности и пользователи со специальными инструментами не смогут перемещаться или правильно воспринимать страницу. Поэтому важно проверить код на веб-сайте и убедиться, что мы исправляем потенциальные ошибки, которые находит инструмент проверки.
Перейти к W3C Validator для HTML Перейти к W3C Validator для CSS
Р: Что такое регулировка? Директорат по государственному управлению и ИКТ Г Г Г 2.0-Стандарт Директорат по управлению и ИКТ Предложение по веб-решениям - Директорат по управлению и ИКТ Веб-директива и WCAG 2.1 Директорат по государственному управлению и ИКТ Руководство по доступности веб-контента (WCAG)