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