WCAG 2.4.11 · Модуль WCAG

Видимый индикатор фокусировки

Пользователи, использующие вкладки для навигации, всегда знают, где они находятся. Никакого исчезающего контура.

Что это такое?

Что означает "индикатор видимой фокусировки"?

Индикатор фокуса — это видимый маркер, показывающий, какой элемент в данный момент выбран с помощью клавиатуры. По умолчанию в браузере это обычно тонкая синяя рамка. Многие темы удаляют эту рамку („она выглядит некрасиво"), что нарушает навигацию с клавиатуры для тех, кто не использует мышь.

Почему это важно?

Обязательства и выгоды — WCAG 2.4.11.

WCAG 2.4.11 (Внешний вид фокуса) Требуется индикатор фокуса с четким визуальным выделением — толщиной не менее 2 пикселей CSS и коэффициентом контрастности 3:1 по отношению к окружающему пространству. Без видимого фокуса навигация с помощью клавиатуры практически невозможна (вы не знаете, куда вас приведет нажатие клавиши Enter). Также требуется: :focus-visible Разделяет щелчок мыши (контур не требуется) и фокусировку на вкладке (контур требуется) — удобный пользовательский интерфейс.

Наша реализация

Как именно мы это решим.

Глобальный стиль фокусировки: 3 пикселя сплошного фирменного цвета + 3 пикселя смещения, радиус скругления углов 6 пикселей — высокая заметность, контрастность AAA.
:focus-visible вместо :фокус При щелчке мыши контур не отображается, в отличие от фокусировки на вкладке Tab.
Никогда не был глобальным план: отсутствует без замены.
Пользовательским компонентам (карусели, пользовательские выпадающие списки) явно присваиваются собственные состояния фокуса.
Проверка: Пошаговое руководство по работе с клавиатурой — каждый интерактивный элемент должен быть четко различим в фокусе.

Другие модули WCAG

Соответствующие структурные элементы нашего модульного комплекса

Все модули в обзоре BFSG →

Вам нужен именно этот модуль?

Первичная консультация (15 минут) — мы выясним, насколько она актуальна для вашего сайта.

Запишитесь на первичную консультацию

Дополнительная информация:
Обзор BFSG ·
Обзор производительности ·
Финансирование BAFA ·
Часто задаваемые вопросы