WCAG 2.4.7 Видимый фокус

Критерий успеха 2.4.7 следит за тем, чтобы пользователи клавиатуры видели, где они находятся на странице. Без видимого индикатора фокуса нажимать Tab — всё равно что водить мышью с невидимым курсором: зрячие пользователи клавиатуры — люди с двигательными нарушениями, многие люди со слабым зрением, опытные пользователи — не понимают, какая ссылка или кнопка сработает. Это уровень AA, он входит в EN 301 549 (пункт 9.2.4.7). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

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

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

• стили, которые убирают или скрывают индикатор фокуса (outline: none, outline: 0 или рамка, которая его скрывает), без видимой замены;
• скрипты, которые снимают фокус с элемента сразу после того, как он его получил.

В WCAG 2.2 также добавлен 2.4.13 «Внешний вид фокуса» на уровне AAA с правилами размера и контраста индикатора; на уровне AA требуется только видимость.

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

• сброс стилей в теме с *:focus { outline: none; }, чтобы спрятать «некрасивую» рамку после кликов мышью;
• кнопки и образцы цвета с собственным стилем, который в фокусе лишь едва меняет цвет;
• рамка фокуса того же цвета, что и фирменный фон, из-за чего она пропадает на цветных баннерах;
• собственные чекбоксы и радиокнопки, где настоящее поле скрыто, а его фокус не показан на визуальной замене;
• карточки товаров, где фокус попадает на невидимую накладную ссылку.

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

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

Вручную: пройдите клавишей Tab по всей странице, включая шапку, мегаменю, фильтры, параметры товара, выдвижную корзину, формы и подвал. На каждой остановке должно быть ясно видно, какой элемент в фокусе. Проверьте на светлом и тёмном фоне и во всплывающих окнах. Если индикатор исчезает, поищите в CSS правила outline: none или :focus.

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

• Никогда не убирайте обводку без замены. Используйте :focus-visible, чтобы показывать заметную рамку пользователям клавиатуры и не показывать её при кликах мышью.
• Надёжный стиль: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } или двухцветная рамка, которая работает на любом фоне.
• Показывайте фокус на видимой части собственных элементов управления (например, на стилизованном образце цвета, а не на скрытом поле).
• Стремитесь к контрасту 3:1 с соседними цветами, чтобы рамку было легко заметить.

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

• 2.4.11 Фокус не скрыт (минимум) — элемент в фокусе не должен скрываться за другим контентом.
• 1.4.11 Контраст нетекстового контента — визуальным частям элементов управления нужен контраст 3:1.
• 2.4.3 Порядок фокуса — фокус должен перемещаться в логичном порядке.

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

Является ли outline: none нарушением WCAG?

Это нарушение 2.4.7, если свойство убирает индикатор фокуса и больше ничто не показывает, где фокус. Убрать стандартную обводку можно, если заменить её хорошо заметным собственным стилем.

Чем 2.4.7 «Видимый фокус» отличается от 2.4.13 «Внешний вид фокуса»?

2.4.7 (уровень AA) требует только, чтобы индикатор фокуса был виден. 2.4.13 «Внешний вид фокуса» (уровень AAA, новый в WCAG 2.2) задаёт минимальный размер индикатора и изменение контраста 3:1.

Нужен ли индикатору фокуса минимальный контраст?

По самому 2.4.7 — нет. Но рамка фокуса — визуальная часть элемента управления, поэтому важен 1.4.11 «Контраст нетекстового контента» (3:1), а индикатор, который на практике никто не видит, не делает фокус видимым.