WCAG 2.4.11 Фокус не скрыт (минимум)

Критерий успеха 2.4.11 появился в WCAG 2.2. Он нужен для того, чтобы пользователи клавиатуры действительно видели элемент, на который перешли, а фокус не пропадал за липкой шапкой, кнопкой чата или cookie-баннером. Это уровень AA, он входит в EN 301 549 (пункт 9.2.4.11). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

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

Когда компонент интерфейса получает фокус клавиатуры, он не скрыт полностью контентом, созданным автором сайта.

Главное из пояснений W3C:

• на уровне AA допустимо частичное перекрытие — элемент не должен быть скрыт полностью. Уровень AAA (2.4.12 «Фокус не скрыт (расширенный)») требует, чтобы не была скрыта никакая его часть;
• если пользователь может перемещать контент (например, перетаскивать панель инструментов), учитывается только начальное положение этого контента;
• контент, открытый самим пользователем, может перекрывать элемент в фокусе; если пользователь может сделать элемент видимым без перемещения фокуса клавиатуры (например, закрыть всплывающее окно клавишей Esc), он не считается скрытым.

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

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

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

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

Вручную: в окне размера ноутбука и ещё раз при увеличении 200 % пройдите клавишей Tab по всей странице с открытым cookie-баннером, затем ещё раз после его закрытия. Следите за липкой шапкой, липкими панелями «В корзину» и плавающими кнопками. Каждый раз, когда фокус попадает на элемент, хотя бы часть элемента должна быть видна. Обратите особое внимание на форму оформления заказа и подвал.

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

• Добавьте прокручиваемому контейнеру scroll-padding-top (и scroll-padding-bottom), равный высоте липких панелей, чтобы элементы в фокусе прокручивались в свободную область.
• Сделайте cookie-баннер модальным (фокус переходит в него и остаётся там, пока не сделан выбор) или разместите его так, чтобы он не перекрывал контент.
• Уменьшайте липкие элементы на маленьких экранах и при увеличении.
• Дайте возможность закрывать плавающие виджеты клавишей Esc и с клавиатуры.

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

• 2.4.7 Видимый фокус — индикатор фокуса должен быть видимым.
• 2.4.3 Порядок фокуса — фокус должен перемещаться в логичном порядке.
• Чек-лист WCAG 2.2 — что ещё нового в WCAG 2.2.

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

Нарушает ли липкая шапка WCAG 2.4.11?

Только если она полностью закрывает элемент в фокусе. Если часть элемента остаётся видимой, 2.4.11 (AA) выполнен; критерий уровня AAA 2.4.12 требует, чтобы не была скрыта никакая часть. Обычно проблему решает CSS-свойство scroll-padding.

Нарушает ли cookie-баннер 2.4.11?

Немодальный cookie-баннер, который полностью скрывает элемент, получающий фокус, нарушает критерий. W3C описывает, как этого избежать: сделать баннер модальным, чтобы он забирал фокус, использовать scroll padding, чтобы элементы в фокусе не оказывались под ним, или закрывать баннер, когда фокус из него уходит.

Критерий 2.4.11 появился в WCAG 2.2?

Да. «Фокус не скрыт (минимум)» добавлен в WCAG 2.2 на уровне AA вместе с «Фокус не скрыт (расширенный)» на уровне AAA.