WCAG 2.1.2 Отсутствие клавиатурной ловушки

Критерий успеха 2.1.2 защищает всех, кто перемещается по странице с клавиатуры, — пользователей программ экранного доступа (скринридеров), людей с двигательными нарушениями, людей, которые используют кнопочный доступ, — от того, чтобы застрять внутри одной части страницы. Это уровень A, критерий входит в EN 301 549 (пункт 9.2.1.2). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

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

Если для выхода нужно что-то кроме стрелок или Tab без модификаторов либо других стандартных способов выхода, пользователю нужно сообщить, как выйти (например, «нажмите Ctrl+M, чтобы выйти из редактора»).

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

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

Типичные ошибки в интернет-магазине

• встроенное видео, 3D-просмотр товара или карта, которые захватывают Tab и никогда его не отпускают;
• чат или виджет поддержки в iframe, куда фокус попадает и откуда не может вернуться на страницу;
• скрипт «ловушки фокуса» во всплывающем окне (рассылка, колесо скидок, проверка возраста), которое нельзя закрыть с клавиатуры;
• поле форматированного текста для отзывов, которое использует Tab для отступа и не сообщает, как из него выйти;
• выбор даты при оформлении заказа, который удерживает фокус в сетке календаря.

Как проверить

Автоматически: правила axe-core для этого критерия нет. Может ли фокус покинуть компонент, зависит от того, как скрипты реагируют на клавиши, а сканирование не может надёжно это смоделировать, поэтому нужна ручная проверка.

Вручную: начните с верха страницы и нажимайте Tab, пока не дойдёте до подвала, затем вернитесь наверх с Shift+Tab. Убедитесь, что вы проходите через каждый встроенный плеер, iframe, всплывающее окно и виджет в обоих направлениях. Откройте каждый диалог и попробуйте Esc и кнопку «Закрыть». Если застряли, запишите где; если компонент предлагает особую клавишу выхода, проверьте, что она объяснена на экране.

Как исправить

• Не перехватывайте Tab и Shift+Tab, если только вы не удерживаете фокус намеренно в открытом модальном окне.
• У каждого модального или всплывающего окна должна быть фокусируемая кнопка «Закрыть», оно должно закрываться по Esc; после этого верните фокус на элемент, который его открыл.
• Проверяйте сторонние встраиваемые блоки до их добавления и заменяйте или оборачивайте те, что захватывают фокус.
• Если компоненту действительно нужен Tab (редактор кода или текста), покажите короткую инструкцию, как из него выйти.

Связанные критерии

• 2.1.1 Клавиатура — каждая функция должна работать с клавиатуры.
• 2.4.3 Порядок фокуса — фокус должен перемещаться в логичном порядке.
• 2.4.11 Фокус не скрыт (минимум) — элемент в фокусе не должен быть полностью скрыт.

Частые вопросы

Что такое клавиатурная ловушка?

Место на странице, куда фокус клавиатуры может попасть, но откуда его нельзя вывести с клавиатуры, например встроенный видеоплеер или виджет, который «съедает» клавишу Tab. Пользователь застревает и часто вынужден перезагрузить страницу.

Является ли клавиатурной ловушкой модальный диалог, который удерживает фокус внутри?

Нет, если пользователь может из него выйти, например клавишей Esc или доступной кнопкой «Закрыть». Удерживать фокус внутри открытого модального окна — рекомендуемый шаблон; ловушка — это когда выхода нет.

Почему 2.1.2 распространяется на каждую часть страницы?

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