Изгледна индикация за фокус

Какво изисква критерият

Критерий 2.4.7 (Видим фокус) изисква индикаторът да съществува. Критерий 2.4.13 (Изгледна индикация за фокус) определя точно как трябва да изглежда. За да се постигне съответствие, индикаторът за фокус трябва:

1. Да има площ, не по-малка от солидна ограда с дебелина 2 CSS пиксела около фокусирания елемент, или линия с дебелина 1 пиксел при същата обща площ.
2. Да достига контраст 3:1 между фокусираното и нефокусираното състояние на същите пиксели.
3. Да не е скрит от друго съдържание (което попада и в обхвата на критерии 2.4.11 / 2.4.12).

За първи път WCAG въвежда числови изисквания за стилизирането на фокуса, което промени подхода на дизайн системите към клавиатурните стилове. Очаква се всеки одит на достъпността през 2026 г. да цитира този критерий по наименование.

Как да се постигне съответствие

• Използвайте солидна ограда с дебелина най-малко 2 пиксела. Стандартен шаблон: outline: 2px solid currentColor; outline-offset: 2px;.
• Изберете цвят за фокуса, достигащ контраст 3:1 спрямо съседния цвят, а не само спрямо фона на страницата — бутоните се намират върху хovered състояния, градиенти и изображения.
• За тъмен и светъл режим задайте два цвята за фокуса и ги превключвайте чрез prefers-color-scheme или теми с токени.
• Избягвайте разчитане на светещ ефект или пръстен с box-shadow с нисък контраст; ако използвате box-shadow, задайте му твърд ръб и достатъчна дебелина.
• Предпочитайте :focus-visible, за да не се показва пръстенът при потребители на мишка, но се уверете, че се активира при всеки клавиатурен фокус, включително програматичен.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 against white and grey hovers */
  outline-offset: 2px;
  border-radius: inherit;
}

Чести нарушения

• Огради за фокус с дебелина 1 пиксел (повечето браузърни настройки по подразбиране в библиотеките за компоненти преди 2023 г.).
• Огради в цвета на марката (brand-blue) върху бутон в същия цвят при hover — идентичен цвят, контраст 1:1.
• Фокус, стилизиран само с мек box-shadow без ясно дефиниран ръб, изчезващ върху шарени фонове.
• Персонализирани полета за въвеждане, при които фокусното състояние променя само цвета на рамката, но не дебелината или контраста — твърде неуловимо, за да се брои.
• „Вградени” (inset) огради за фокус върху малки бутони с икони, рисувани вътре в зоната за натискане 16×16 пиксела и ставащи невидими зад глифа на иконата.
• Компоненти, преминаващи проверката върху бял фон, но пропадащи при тъмния режим, изпробван от никого.

Практически контролен списък за контраста

За всеки интерактивен компонент изброете всяко повърхностно състояние, в което може да се намери (по подразбиране, при hover, натиснат, деактивиран, в карта, в модален прозорец, върху изображение-герой) и проверете дали пръстенът за фокус достига 3:1 за всяко от тях. Процесът е трудоемък; библиотеки за компоненти, пренебрегнали тази проверка, се доставят с латентни нарушения. Автоматизацията чрез Storybook + pa11y или axe-playwright се изплаща тук.

Защо е важно

Критерий 2.4.13 затваря най-разпространената вратичка в 2.4.7: индикатор за фокус, технически съществуващ, но твърде тесен, твърде нискоконтрастен или позиционно отрязан, за да е полезен. Потребителите с намалено зрение, разчитащи на пръстена за проследяване на фокуса, получават измерима и тестуема гаранция. Дизайнерите получават ясно правило, което могат да проверят преди доставката, вместо да договарят след нея.

Дори екипи, формално ангажирани само с ниво AA, широко приемат 2.4.13 като цел, тъй като нарушенията са лесно забележими при одити и лесно използваеми в съдебни производства. Ако трябва да бъде приет само един критерий от ниво AAA от WCAG 2.2, това е той.