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

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 accessibility

В DevTools -> Elements выберите любой элемент на странице. В секции Styles описаны CSS стили элемента: шрифт, цвет и др.

При наведении на элемент обратите внимание на секцию ACCESSIBILITY во всплывающем окошке. В поле Contrast отображается текущее значение контрастности элемента и предупреждение в случае недостаточного уровня контрастности.

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

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

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

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

Клавиши для навигации с клавиатуры

Попробуйте пройтись по странице, используя клавиатуру.

Клавиша	Описание
Tab	Перемещает фокус на следующий интерактивный элемент (ссылки, кнопки, поля ввода и т.д.)
Shift + Tab	Перемещает фокус на предыдущий интерактивный элемент.
Enter	Активирует текущий элемент с фокусом (например, нажимает кнопку или переходит по ссылке).
Spacebar (Пробел)	Прокручивает страницу вниз. Активирует элемент (например, переключает состояние чекбокса) в случае, если элемент с фокусом является кнопкой, чекбоксом или радиокнопкой.
Arrow Keys (Стрелки)	Стрелка вверх/вниз: Прокручивает страницу вверх/вниз. Стрелка влево/вправо: Перемещает фокус между элементами в некоторых специфических компонентах (например, в слайдерах или меню).

Понятность

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

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

Надежность

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

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

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

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

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

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

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

Задача