Доступность веб-интерфейсов: принципы и проверка

Прямой ответ

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

<button type="button" aria-expanded="false" aria-controls="menu">Меню</button>
<nav id="menu" hidden>...</nav>

Кнопка объявляет состояние и связь с раскрываемой областью, поэтому вспомогательная технология сообщает пользователю назначение элемента. О семантике — в статье про семантическую разметку HTML.

Восприятие содержимого и альтернативные представления

Содержимое страницы должно восприниматься без опоры только на один канал, поэтому нетекстовое содержимое сопровождается текстовым эквивалентом.

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

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

Структура заголовков. Заголовки образуют иерархию, поэтому навигация по разделам выполняется без последовательного чтения страницы.

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

Отдельный аспект — представление только по цвету. Ссылка, выделенная только цветом, не отличается от окружающего текста без цветового восприятия, поэтому различие обеспечивается подчёркиванием либо значком.

Управление с клавиатуры и фокус

Управление с клавиатуры определяет, доступно ли действие без указателя, поэтому порядок фокуса соответствует визуальному порядку.

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

Видимость фокуса. Элемент в фокусе выделяется явно, поэтому пользователь определяет текущее положение на странице.

Порядок фокуса. Последовательность перехода соответствует визуальному порядку, поэтому навигация предсказуема.

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

Понимание интерфейса и предсказуемость

Понимание определяется тем, что назначение элемента и результат действия очевидны, поэтому поведение интерфейса предсказуемо.

Назначение элемента. Элемент объявляет своё назначение, поэтому пользователь определяет действие до его выполнения.

Последовательность действий. Порядок шагов соответствует ожиданию, поэтому переход между элементами не приводит к неожиданному результату.

Сообщение об изменении. Изменение состояния объявляется, поэтому пользователь узнаёт о результате действия без визуального контроля.

Практическое следствие: элемент без объявления назначения воспринимается как неопределённый, поэтому пользователь не определяет результат действия до его выполнения.

О ARIA-атрибутах — в статье про ARIA-атрибуты; о требованиях — в статье про WCAG для разработчика.

Практика: обеспечение доступности интерфейса

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

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

3. Дублируйте состояние, переданное цветом, текстом либо значком. Различие доступно без цветового восприятия.

4. Обеспечивайте достижимость элементов с клавиатуры. Действие выполняется без указателя.

5. Делайте фокус видимым. Пользователь определяет текущее положение на странице.

6. Объявляйте назначение и состояние интерактивных элементов. Результат действия предсказуем до его выполнения.

7. Проверяйте страницу с клавиатуры и вспомогательной технологией. Доступность подтверждается проверкой, а не предположением.

Рекомендации:

1. Не передавайте состояние только цветом. Различие недоступно без цветового восприятия, поэтому требуется текстовый эквивалент.
2. Учитывайте порядок фокуса при изменении разметки. Последовательность перехода должна соответствовать визуальному порядку.
3. Сопоставляйте семантику элемента с его назначением. Произвольный блок не объявляет назначение, поэтому требуется явное описание.
4. Фиксируйте проверку доступности в процессе разработки. Нарушение обнаруживается до выпуска, а не после.
5. Пересматриваем доступность при добавлении нового типа элемента. Новый элемент требует объявления назначения и состояния.

Практический сценарий: меню было недоступно с клавиатуры

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

1. Диагностика. Проверка с клавиатуры показала, что кнопка меню не достигалась клавишей перехода, а раскрываемая область не объявляла состояние. Пользователь без указателя не мог определить ни наличие меню, ни его состояние.
2. Причина. Меню было реализовано произвольным блоком без семантики кнопки, поэтому элемент не попадал в порядок фокуса и не объявлял назначение.
3. Действия. (а) Заменили произвольный блок на семантическую кнопку, чтобы элемент достигался с клавиатуры и объявлял назначение; (б) добавили объявление состояния и связь с раскрываемой областью, чтобы пользователь узнавал о раскрытии; (в) сделали фокус видимым, чтобы положение на странице определялось явно; (г) проверили порядок перехода по всем элементам меню и убедились в соответствии визуальному порядку; (д) добавили проверку доступности в процесс разработки, чтобы нарушение обнаруживалось до выпуска.
4. Результат. Меню открывается с клавиатуры, а состояние раскрываемой области объявляется, поэтому действие доступно без указателя.

Вывод: интерактивный элемент, реализованный произвольным блоком без семантики, не достигается с клавиатуры и не объявляет назначение, поэтому действие недоступно без указателя. Семантический элемент с объявлением состояния и видимым фокусом делает действие доступным.

FAQ

Что составляет основу доступного интерфейса? Семантическая разметка, управление с клавиатуры, альтернативные представления содержимого и объявление состояния элементов.

Почему нельзя передавать состояние только цветом? Различие недоступно без цветового восприятия, поэтому состояние дублируется текстом либо значком.

Что делает элемент доступным с клавиатуры? Достижимость клавишей перехода и видимый фокус. Элемент вне порядка фокуса недоступен без указателя.

Как проверить доступность страницы? Проверкой с клавиатуры и вспомогательной технологией. Автоматическая проверка находит часть нарушений, поэтому ручная проверка обязательна.

Источники: W3C WAI WCAG 2.2 Quick Reference, W3C WAI Introduction to Accessibility, HTML semantics — ссылки в шапке.