Как веб-разработчик очень легко предположить, что если веб-страница или функция, которые мы разработали, хорошо работают для нас, то они будут работать и для других. Однако это может быть неправдой.

Согласно отчету ВОЗ, слепотой, нарушением зрения страдают не менее 2,2 млрд человек во всем мире. Мы несем ответственность за то, чтобы каждый мог использовать нашу веб-страницу с такой же легкостью и удобством.

В этой статье я поделюсь своими знаниями о том, как сделать нашу веб-страницу доступной для всех.

Что такое доступность?

Определение доступности в Википедии выглядит следующим образом

Доступность относится к дизайну продуктов, устройств, услуг или сред таким образом, чтобы их могли использовать люди с ограниченными возможностями. Концепция доступного дизайна и практика доступного развития обеспечивает как прямой доступ (т.е. без посторонней помощи), так и непрямой доступ, что означает совместимость с вспомогательными технологиями человека (например, компьютерными программами чтения с экрана).

Что такое вспомогательные технологии?

Вспомогательная технология - это вспомогательное устройство, программное обеспечение, которое помогает людям с ограниченными возможностями в их повседневной деятельности.

Например, Программа чтения с экрана - это вспомогательная технология, которая считывает содержимое веб-сайта. Некоторые примеры программ чтения с экрана: VoiceOver (mac), рассказчик (победа), JAWS (победа), NVDA (победа).

Как работает программа чтения с экрана?

Допустим, мы создаем пользовательский интерфейс только для программы чтения с экрана. В этом случае нам не понадобится информация для создания визуального интерфейса. Браузер создает дерево специальных возможностей из дерева DOM, содержащее всю информацию, необходимую для программ чтения с экрана, пропуская ненужную информацию. Программы чтения с экрана используют это дерево специальных возможностей для чтения содержимого.

Человек с нарушением зрения обычно использует клавиатуру для взаимодействия с веб-страницей. Каждый раз, когда он нажимает клавишу табуляции, фокус перемещается к следующему фокусируемому элементу в DOM. Затем программа чтения с экрана считывает содержимое выбранного элемента.

Как создать доступную веб-страницу?

W3C (Консорциум всемирной паутины) - это международное сообщество, которое разрабатывает стандарты для роста сети. Он выпустил спецификацию доступности для Интернет-приложений под названием WAI-ARIA (Инициатива по обеспечению доступности Интернета - Доступные полнофункциональные Интернет-приложения). Мы должны обеспечить соблюдение этой спецификации при разработке веб-страницы. Теперь давайте посмотрим, о чем нам следует помнить при проектировании и разработке, чтобы сделать веб-страницу доступной.

  1. Правильная структура и семантика веб-страницы
  • Используйте семантические теги. Например. Если на веб-странице есть заголовок, обязательно используйте тег заголовка. Если мы это сделаем, программа чтения с экрана будет знать все заголовки на нашей веб-странице и позволит пользователям проверять все заголовки на веб-странице. Точно так же, если мы используем кнопку, используйте тег кнопки вместо div (или создайте div с ролью = "button"). Это позволит программам чтения с экрана узнать, что фокус находится на кнопке, а программа чтения с экрана добавит дополнительную информацию при чтении текста кнопки. Он будет выглядеть примерно так: «метка-кнопка, кнопка, нажмите клавишу ВВОД, чтобы активировать». Все, что находится после кнопки-метки, будет добавлено программой чтения с экрана.

  • Определите регионы. Определите регионы на веб-странице, добавив соответствующие роли или используя семантические теги. Регион должен содержать связанные действия.
    Например. Область, содержащая компоненты формы. Программа чтения с экрана предоставит способ проверить все области на странице и позволит пользователю напрямую перейти к первому элементу, на который можно сфокусироваться, в регионе, сохранив вкладки клавиатуры, чтобы добраться туда.
  • Правильное оформление веб-страницы. Поскольку пользователь будет использовать вкладки клавиатуры для доступа к контенту, убедитесь, что порядок вкладок актуален и для выполнения действия требуется минимум вкладок.

2. Добавьте ярлыки для часто используемых действий

  • Предоставление ярлыка поможет пользователям избежать использования нескольких вкладок клавиатуры.
  • Например. Предположим, у нас есть форма и кнопка отправки вверху. Пользователь находится в середине формы и теперь хочет ее сохранить. Если мы предоставим для этого ярлык, ему не нужно будет переходить к кнопке отправки, чтобы отправить форму.
  • Избегайте переопределения ярлыков браузера до тех пор, пока в этом нет необходимости.

3. Атрибуты арии

  • Добавьте необходимые атрибуты aria к компонентам
  • Лучший способ сделать это - обратиться к спецификации W3C ARIA. Например. Если мы создаем поле со списком, найдите в спецификации пример поля со списком, откройте инструменты разработчика и проверьте добавленные атрибуты.

  • Добавление правильных атрибутов гарантирует, что программа чтения с экрана правильно понимает и читает содержимое ваших компонентов. Например. Если у нас есть список и фокус находится на 1-м элементе списка, программа чтения с экрана должна прочитать «метка-элемента-списка, 1 из n». Дополнительная информация. то есть «1 из n» будет добавлено тогда и только тогда, когда мы добавили правильные атрибуты в наш список и элементы списка.
  • Если использование семантических тегов невозможно, добавьте к элементу соответствующие роли. Например. Если вы хотите рассматривать div как кнопку, добавьте в него role = "button".

4. Предоставлять пользователю обновления в реальном времени

  • Если на странице происходят какие-либо обновления, убедитесь, что программы чтения с экрана прочитали это. Например. Допустим, действие не выполнено, программы чтения с экрана должны это прочитать, а пользователи должны знать, что действие не удалось.
  • Вы можете добавить атрибут role = »alert» или aria-live к элементу, для которого дается обратная связь. Например. После нажатия кнопки, если метка кнопки изменится, вы можете сделать так, чтобы программа чтения с экрана прочитала это, добавив атрибут aria-live на кнопку, который гарантирует, что программы чтения с экрана будут считывать обновления, происходящие на этой кнопке.

5. Фокус клавиатуры

  • Когда страница загружается, убедитесь, что фокус находится на каком-то релевантном фокусируемом элементе. Например. Если у вас есть форма, при загрузке формы фокус должен быть на одном из элементов формы.
  • Фокус никогда не должен теряться. Например. Допустим, после нажатия кнопки открывается диалоговое окно. Когда это диалоговое окно закрывается, фокус должен вернуться к кнопке

6. Состав доступных компонентов должен быть доступен.

  • Часто мы используем библиотеку для определенных компонентов. Эти компоненты библиотеки могут соответствовать спецификации ARIA.
  • Но состав этих компонентов также должен соответствовать спецификации. Например. Допустим, вы используете поле ввода и список для создания поля со списком. Поле ввода в поле со списком потребует определенных дополнительных атрибутов арии, чем при использовании отдельно.

7. Цветовой контраст

  • Между текстом и фоном должен быть достаточный контраст. Это гарантирует, что людям с ослабленным зрением будет удобно читать текст.

  • Вы можете использовать такие инструменты, как Accessibility Insights, webaim.org, чтобы проверить, соответствует ли коэффициент контрастности минимальным требованиям или нет.

8. Доступные изображения и инклюзивные видео

  • Если у вас есть изображение, предоставляющее важную информацию пользователю, обязательно добавьте замещающий текст.
  • Во время воспроизведения видео постарайтесь добавить субтитры, чтобы помочь людям с нарушениями слуха понять его.

Как мы можем проверить доступность нашей веб-страницы?

Теперь, когда мы увидели, что нужно делать, чтобы сделать веб-страницу доступной, в этом разделе давайте посмотрим, как мы можем ее протестировать.

  • Протестируйте веб-страницу в часто используемых программах чтения с экрана, таких как voiceOver, рассказчик, JAWS, NVDA и т. Д. Проверьте, можем ли мы использовать ее, не видя экрана
  • Мы можем использовать анализ доступности, инструмент с открытым исходным кодом, предоставляемый Microsoft, для проверки доступности вашей веб-страницы. Для этого есть хромированное расширение.

  • Когда вы находитесь на странице, которую хотите протестировать, запустите FastPass, который начнет поиск проблем с доступностью на веб-странице. После завершения теста вам будет предоставлен отчет. В отчет будут включены отсутствующие атрибуты, проблемы с цветовым контрастом и т. Д.
  • Это также дает возможность провести детальную оценку вашей веб-страницы.

В заключение хочу сказать, что сделать нашу веб-страницу доступной совсем не сложно. Но не забудьте рассмотреть вопрос о доступности в самом начале проектирования и разработки.

Надеюсь, вы узнали что-то из этой статьи. Спасибо :)