WCAG 3.2.1 При получении фокуса

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

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

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

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

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

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

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

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

Вручную: отложите мышь и пройдите клавишей Tab всю страницу: шапку, меню, фильтры, карточки товаров, формы и подвал. Клавишами Shift+Tab вернитесь назад. На каждом шаге отмечайте, произошло ли что-то, кроме перемещения фокуса: новая страница, новое окно или вкладка, диалог или прыжок фокуса в другое место. Повторите на страницах оформления заказа и личного кабинета.

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

• Запускайте переходы и диалоги при активации (клик, Enter, пробел), а не по событиям focus или focusin.
• Показывайте справку текстом рядом или подсказкой, которая не забирает фокус.
• В мегаменю подменю можно открывать при фокусе, но не переходите на новую страницу, пока ссылка не активирована.
• Уберите скрипты, которые вызывают blur() у элементов в фокусе.

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

• 3.2.2 При вводе данных — то же правило для изменения значения.
• 2.4.3 Порядок фокуса — фокус перемещается в осмысленном порядке.
• Чек-лист WCAG 2.2 — все критерии уровней A и AA с первого взгляда.

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

Что такое изменение контекста в WCAG?

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

Можно ли по 3.2.1 показывать подсказку или выпадающее меню при фокусе?

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

Может ли автоматический инструмент проверить 3.2.1?

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