Доступні стани фокусування: розробка видимого фокусу клавіатури
Як розробити видимий фокус клавіатури, який відповідає 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 Focus Appearance (рівень AAA), який описує потужний показник: принаймні такий же розмір, як площа периметра компонента товщиною 2 CSS пікселя, із коефіцієнтом контрастності принаймні 3:1 між сфокусованим і розфокусованим станами.
:focus-visible
MDN пояснює, що :focus-visible застосовується, коли елемент має фокус і браузер вирішує за допомогою евристики, що фокус має бути показаний, як правило, для використання клавіатури. Це дає змогу показувати сильні кільця фокусування для користувачів клавіатури, не показуючи їх кожного разу, коли хтось натискає кнопку мишею. Використовуйте його замість видалення контурів.
Дизайн кільця
Практичне керівництво:
- Використовуйте контур або кільце зі зміщенням, щоб воно не зливалося з елементом.
- Перевірте контраст кожного тла, на якому може з’явитися елемент; допомагає двоколірне кільце.
- Зберігайте його узгодженим між компонентами, визначеними як маркер у вашій системі проектування.
- Ніколи не покладайтеся лише на незначну зміну кольору.
- Переконайтеся, що виділений елемент не приховано за закріпленими заголовками.
Фокус і рух
Кільце фокусування може з’являтися з дуже коротким переходом, але воно повинно відчуватися миттєво. Уникайте анімації, яка затримує дзвінок або переміщує елемент, а для спеціальних компонентів, намальованих на полотні, переконайтеся, що на сторінці все ще є справжній елемент, який можна сфокусувати, щоб користувачі клавіатури могли його дістати.
Ключі Principle, які слід запам’ятати
- Для WCAG AA (2.4.7) необхідний видимий фокус
- 2.4.13 (AAA): площа 2 пікселів по периметру та зміна контрасту 3:1
- Використовуйте :focus-visible замість видалення контурів
- Визначте кільце фокусування як знак дизайну
- Інтерфейс користувача Canvas потребує реальних елементів, які можна фокусувати
Часті запитання
Джерела
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Веб-документи