Доступные состояния фокуса: проектирование видимого фокуса клавиатуры
Как создать видимый фокус клавиатуры, соответствующий WCAG 2.2: что требуется для версий 2.4.7 и 2.4.13, как работает :focus-visible и советы по проектированию колец фокусировки.
Главное
Каждому интерактивному элементу необходим хорошо видимый индикатор фокуса для пользователей клавиатуры; Для WCAG 2.2 требуется уровень AA (2.4.7). Для получения сильного индикатора ориентируйтесь на рекомендации AAA WCAG (2.4.13): как минимум область контура в 2 пикселя CSS вокруг элемента с контрастом 3:1 между сфокусированным и несфокусированным состояниями. Используйте :focus-visible, чтобы показывать кольца для пользователей клавиатуры, не показывая их при каждом щелчке мыши.
Почему состояния фокуса имеют значение
Люди, использующие клавиатуру, переключатели устройств или экранную лупу, перемещаются по странице по одному элементу за раз. Индикатор фокуса — единственный способ узнать, где они находятся. Удаление контура браузера без замены — одна из наиболее частых проблем с доступностью.
Что требует WCAG 2.2
Критерий успеха 2.4.7 Видимый фокус (уровень AA) требует, чтобы любой интерфейс, управляемый с клавиатуры, имел режим, в котором индикатор фокуса виден. В WCAG 2.2 добавлен 2.4.13 Внешний вид фокуса (уровень AAA), который описывает сильный индикатор: по крайней мере такой же большой, как площадь периметра компонента толщиной 2 CSS пикселя, с коэффициентом контрастности не менее 3: 1 между сфокусированным и несфокусированным состояниями.
:фокус-видимый
MDN объясняет, что :focus-visible применяется, когда элемент имеет фокус и браузер решает, используя эвристику, что фокус должен быть показан, обычно при использовании клавиатуры. Это позволяет показывать четкие кольца фокусировки для пользователей клавиатуры, не показывая их каждый раз, когда кто-то нажимает кнопку мыши. Используйте его вместо удаления контуров.
Проектирование кольца
Практическое руководство:
- Используйте контур или кольцо со смещением, чтобы оно не сливалось с элементом.
- Проверьте контрастность каждого фона, на котором может появиться элемент; двухцветное кольцо помогает.
- Обеспечьте единообразие всех компонентов, определенных как токен в вашей дизайн-системе.
- Никогда не полагайтесь только на незначительное изменение цвета.
- Убедитесь, что выделенный элемент не скрыт за липкими заголовками.
Фокус и движение
Кольцо фокусировки может появиться с очень коротким переходом, но ощущение должно быть мгновенным. Избегайте анимации, которая задерживает кольцо или перемещает элемент, а для пользовательских компонентов, нарисованных на холсте, убедитесь, что на странице все еще есть реальный фокусируемый элемент, чтобы пользователи клавиатуры могли добраться до него.
Ключевые принципы
- На WCAG AA (2.4.7) требуется видимый фокус.
- 2.4.13 (AAA): область по периметру 2 пикселя и изменение контрастности 3:1.
- Используйте :focus-visible вместо удаления контуров.
- Определите кольцо фокусировки как маркер дизайна.
- Пользовательскому интерфейсу, отображаемому на холсте, нужны настоящие фокусируемые элементы.
Частые вопросы
Источники
- Understanding SC 2.4.7: Focus Visible — W3C ВАИ
- Understanding SC 2.4.13: Focus Appearance — W3C ВАИ
- :focus-visible — MDN Веб-документы