Я хочу подробно рассказать о руководстве по доступности (WCAG 2.1) в некоторых постах с некоторыми примерами.
Все эти принципы вы можете прочитать на сайте W3c
Что такое WCAG 2.1??
Руководство по доступности веб-контента (WCAG) 2.1 определяет, как сделать веб-контент более доступным для людей с ограниченными возможностями. Доступность включает в себя широкий спектр нарушений, включая зрительные, слуховые, физические, речевые, когнитивные, языковые, обучающие и неврологические нарушения. Хотя эти рекомендации охватывают широкий круг вопросов, они не способны удовлетворить потребности людей со всеми типами, степенями и комбинациями инвалидности. Эти рекомендации также делают веб-контент более удобным для использования пожилыми людьми с изменяющимися способностями в связи со старением и часто улучшают удобство использования для пользователей в целом. ("ссылка")
Что такое POUR и почему это важно??
POUR расшифровывается как (Воспринимаемый, Работающий, Понимаемый, Надежный) и включает 13 важных принципов. Следуя этим принципам, можно создавать более доступный контент. Стоит отметить, что эти принципы не зависят от технологии (это означает, что они не зависят от конкретной технологии и не ограничиваются ею, вместо этого их можно использовать в разных местах).
Сначала я начинаю с Perceivable и освещаю важные моменты.
1: воспринимаемый
Информация и компоненты пользовательского интерфейса должны быть представлены пользователям так, как они могут их воспринять (ссылка).
наш контент должен быть удобочитаемым для любых пользователей. Позволь мне привести пример. Представьте, что вы собираетесь купить мобильный телефон. Вы открываете Amazon.com и проверяете там все доступные телефоны. Вы видите и проверяете некоторые фотографии своего мобильного телефона, верно?? Но как насчет слепого??
Слепой человек не может видеть изображение. Как он должен воспринимать этот контент??
1.1: Текстовые альтернативы
Предоставляйте текстовые альтернативы любому нетекстовому контенту, чтобы его можно было преобразовать в другие формы, необходимые людям, такие как крупный шрифт, шрифт Брайля, речь, символы или более простой язык (ссылка).
Как фронтенд-программист или человек, знакомый с HTML, вы видите «атрибут alt». Он в основном используется для нетекстового контента, такого как изображение.
‹img src="something.png" alt=" ” /›
Этот атрибут фактически описывает фотографию и предоставляет конкретную информацию о ней. Замещающий текст может быть воспринят и прочитан программами чтения с экрана. Когда человек фокусируется на фотографии, программа чтения с экрана читает ему/ей замещающий текст, и он/она понимает, что изображено на этой фотографии.
Давайте легко проверим это с помощью расширения для чтения с экрана. готовы?
Ниже я привожу 2 картинки , на одной из них есть альтернативный текст , а на другой нет . Вы можете сфокусировать их обоих с помощью программы чтения с экрана и понять разницу между доступным контентом и недоступным контентом.
перед этим нам нужно иметь программу чтения с экрана, я рекомендую ChromeVox. Это расширение для Google Chrome. Оно простое, мощное и удобное в использовании. Вы можете загрузить и установить это расширение в браузере Chrome, нажав здесь.
Вы можете использовать программу чтения с экрана Medium, и вам не нужно устанавливать chromeVox
4 шага для запуска chromeVox:
1: Нажмите на вкладку расширения на панели навигации браузера.
2: Нажмите на управление расширением.
3: Найдите расширение chromeVox и нажмите кнопку для запуска.
4: Готов к использованию! вы можете перемещаться с помощью сочетаний клавиш, перемещения мыши или сенсорной панели. Он будет читать сфокусированный контент для вас.
На изображении ниже есть замещающий текст . Сфокусируйтесь на нем, чтобы услышать, что говорит программа чтения с экрана.
На изображении ниже нет замещающего текста , сосредоточьтесь на нем, чтобы услышать, что говорит программа чтения с экрана.
Должен ли я всегда использовать замещающий текст для всего нетекстового контента???
НЕТ!!! Вам не нужно всегда использовать замещающий текст, в некоторых случаях вам нужно избегать этого! некоторые изображения являются декоративными и не имеют никакого значения, поэтому они не должны иметь альтернативный текст, иногда это еще больше запутает людей!
подсказка: не используйте замещающий текст для декоративных картинок!
Вы должны оставить альтернативный текст пустым, что-то вроде этого:
alt=""
Имейте в виду, что мы не будем удалять альтернативный текст! мы просто оставляем его как пустой атрибут, он должен быть в вашем коде как атрибут. Если он пуст, программа чтения с экрана легко его пропустит.
Это была первая часть моей статьи о WCAG 2.1, я буду публиковать больше статей о WCAG, пока не расскажу обо всех его принципах.
Если этот пост был вам полезен, поделитесь им с другими, пожалуйста
