Тестирование доступности

accessible-web

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

Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает нормы, следуя которым можно создать веб-среду, удобную большинству пользователей независимо от их физических возможностей.

Пройдемся по списку рекомендаций к контенту стандарта WCAG.


Воспринимаемость

Информация и элементы пользовательского интерфейса должны легко восприниматься.

  • Все нетекстовые элементы должны сопровождаться текстовым описанием, например для элемента input
  • Контент должен быть адаптивным и изменяться без потери информации или структуры.
  • Коэффициент контрастности цветов должен быть не менее 4.5 : 1.
  • Размер текста может быть изменен без вспомогательных технологий до 200% без потери содержимого или функциональности.
  • Межстрочный интервал (line-height) должен как минимум в 1,5 раза превышать размер шрифта.
  • Интервал между абзацами должен как минимум в 2 раза превышать размер шрифта.
  • Расстояние между буквами (letter-spacing) должно как минимум в 0,12 раза превышать размер шрифта.
  • Интервал между словами (word-spacing) должен как минимум в 0,16 раза превышать размер шрифта.

При помощи DevTools -> Elements вы можете выбрать любой элемент на странице и изучить секцию Styles, содержащую CSS стили. При наведении на элемент обратите внимание на секцию ACCESSIBILITY во всплывающем окошке, в поле Contrast отображается текущее значение контрастности элемента и предупреждение в случае недостаточного уровня контрастности.


Определите уровень контрастности кнопки «Отправить» при помощи DevTools

Операбельность

Пользовательский интерфейс должен быть легким в использовании.

  1. Вся функциональность должна быть доступна для взаимодействия с клавиатуры.
  2. Пользователю должно быть предоставлено достаточное количество времени для чтения и взаимодействия с контентом.
  3. Контент не должен воздействовать на физическое состояние пользователя.
  4. Пользователь должен быть обеспечен удобными способами навигации и поиска контента.

Понятность

Информация и функциональность пользовательского интерфейса должны быть понятными.

  1. Контент должен быть понятным.
  2. Контент должен отображаться и работать предсказуемо.
  3. Помогайте пользователям избегать ошибок при заполнении форм, предоставляя информативные сообщения.

Надежность

Контент должен поддерживать широкий спектр пользовательских устройств и вспомогательных технологий:

  • экранные чтецы и лупы
  • управление при помощи клавиатуры
  • управление голосом
  • альтернативные устройств ввода, такие как трекболы, геймпады и другое

Инструменты для тестирования доступности


Как в виде расширения для Chrome, так и онлайн в браузере, доступен инструмент для проверки качества доступности контента WAVE.

WAVE следует стандарту WCAG и позволяет автоматизировать ряд проверок. Как бонус, WAVE имеет встроенную функциональность для подбора контрастности цветов.

wave-tool

В виде расширения можно попробовать axe DevTools, также опирающийся на стандарт WCAG. Чтобы воспользоваться им после установки:

  1. Откройте DevTools
  2. Нажмите >> и выберите из выпадающего списка axe DevTools
  3. Нажмите Scan ALL of my page
axe-devtools