Клавиатурная навигация: порядок фокуса и ловушки

Прямой ответ

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

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Индикатор фокуса задаётся явно, поэтому положение элемента на странице определяется без указателя. О семантике — в статье про семантическую разметку HTML.

Достижимость элементов и порядок фокуса

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

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

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

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

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

Отдельный аспект — скрытые элементы. Элемент, скрытый от отображения, исключается из порядка фокуса, поэтому скрытая область не получает фокус до раскрытия.

Видимый индикатор фокуса

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

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

Сохранение индикатора. Индикатор не удаляется стилями, поэтому фокус остаётся видимым на всех элементах.

Контраст индикатора. Выделение отличается от фона, поэтому индикатор различим при любом оформлении.

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

Ловушка фокуса и обработка клавиш

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

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

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

Обработка клавиш. Выход из области выполняется клавишей, поэтому действие объявляется и выполняется предсказуемо.

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

Об основах доступности — в статье про доступность веб-интерфейсов; об аудите — в статье про аудит доступности сайта.

Пропуск повторяющихся блоков и переход к содержимому

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

Ссылка перехода. Первый элемент страницы ведёт к основному содержимому, поэтому переход выполняется одним шагом вместо последовательного чтения навигации.

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

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

Практическое следствие: страница без ссылки перехода требует чтения всех элементов навигации перед достижением содержимого, поэтому число шагов растёт с размером меню.

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

Практика: настройка клавиатурной навигации

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

2. Сохраняйте соответствие порядка фокуса визуальному порядку. Переход не перемещает пользователя в неожиданное место.

3. Задавайте видимый индикатор фокуса. Положение элемента определяется явно без указателя.

4. Не удаляйте индикатор фокуса стилями. Пользователь сохраняет сведение о положении на странице.

5. Обеспечивайте контраст индикатора с фоном. Выделение различимо при любом оформлении страницы.

6. Исключайте непреднамеренные ловушки фокуса. Пользователь покидает область без дополнительных условий.

7. Объявляйте клавишу выхода из области с удержанием фокуса. Действие выполняется предсказуемо.

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

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

Практический сценарий: пользователь не мог выйти из модального окна

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

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

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

FAQ

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

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

Что такое ловушка фокуса? Удержание фокуса внутри области. Ловушка оправдана в модальном окне, но непреднамеренная ловушка делает остальное содержимое недоступным.

Что должно происходить после закрытия модального окна? Фокус возвращается на элемент, открывший окно. Иначе навигация продолжается с неопределённого места.

Источники: WCAG 2.2 Keyboard Accessible, ARIA APG Keyboard Interface, HTML interaction — ссылки в шапке.