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

Accessibility Testing

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

Стандарт 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

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

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

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

Понятность

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

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

Надежность

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

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

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

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

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

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

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

Задача