WCAG 2.4.3 Порядок фокуса

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

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

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

Порядок фокуса не обязан копировать визуальную раскладку пиксель в пиксель. Нарушение возникает, когда из-за порядка контент становится запутанным или им невозможно пользоваться. Среди ошибок, задокументированных W3C:

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

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

• tabindex="1", "2" … на элементах шапки, из-за чего фокус скачет, прежде чем перейти к обычному порядку;
• CSS-раскладка (flexbox order, размещение в grid), которая показывает «В корзину» рядом с ценой, но ставит кнопку последней в DOM — после отзывов и похожих товаров;
• окно таблицы размеров или быстрого просмотра, добавленное в конец страницы: фокус в него не переходит, и пользователю приходится пройти Tab по всей странице, чтобы до него добраться;
• после закрытия выдвижной корзины фокус прыгает в начало страницы, вместо того чтобы вернуться на кнопку корзины;
• поля оформления заказа идут в порядке, отличном от видимого (индекс перед улицей).

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

Автоматически: для этого критерия нет правила axe-core. «Сохраняет ли порядок смысл» — это оценка конкретной страницы, поэтому нужна ручная проверка. (Положительные значения tabindex наша проверка показывает как предупреждение о лучшей практике, а не как нарушение 2.4.3.)

Вручную: нажимайте Tab с начала страницы и следите за индикатором фокуса. Проходит ли он шапку, основной контент и подвал в разумном порядке? На страницах товаров: вариант, количество, «В корзину». Откройте каждое всплывающее окно и выдвижную панель: фокус должен перейти внутрь, оставаться там, пока они открыты, и вернуться на вызвавший элемент после закрытия. Заполните форму оформления заказа, пользуясь только Tab.

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

• Пусть порядок в DOM соответствует визуальному и логическому порядку; не меняйте порядок через CSS, если это меняет смысл.
• Уберите положительные значения tabindex; используйте 0 для собственных фокусируемых элементов и -1 для элементов, которые получают фокус из скрипта.
• При открытии диалога переводите фокус внутрь него, при закрытии — возвращайте на вызвавший элемент.
• Вставляйте динамический контент (всплывающие окна, сообщения об ошибках) в DOM рядом с элементом управления, к которому он относится.

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

• 2.1.1 Клавиатура — каждая функция должна работать с клавиатуры.
• 2.4.7 Видимый фокус — пользователи должны видеть, где находится фокус.
• 2.4.11 Фокус не скрыт (минимум) — элементы в фокусе не должны быть скрыты.

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

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

Не обязательно точно. WCAG требует, чтобы порядок сохранял смысл и работоспособность. Небольшие расхождения допустимы; скачки, из-за которых форма или диалог становятся запутанными или непригодными, — нарушение.

Является ли положительный tabindex нарушением WCAG?

Не автоматически, но W3C называет распространённой ошибкой использование tabindex для создания порядка фокуса, который нарушает смысл или работу. Значения больше 0 почти всегда к этому приводят, поэтому избегайте их.

Куда должен переходить фокус при открытии всплывающего окна?

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