Видим фокус

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

Всеки път, когато интерактивен елемент получи фокус от клавиатурата, браузърът — или CSS на страницата — трябва да изобрази видим индикатор, показващ кой елемент е фокусиран. Критерият не предписва как трябва да изглежда индикаторът — това е задача на 2.4.13 при ниво AAA. Изисква се само нещо да е видимо. Класическият пропуск е *:focus { outline: none; } без замяна.

Този критерий се прилага към всеки елемент, получаващ фокус: връзки, бутони, полета за въвеждане, персонализирани джаджи, вградени рамки и всичко с tabindex. Прилага се независимо дали потребителят е стигнал до елемента чрез Tab, Shift+Tab или програматично извикване на фокуса.

Как да бъде изпълнен

• Никога не пишете outline: none (или outline: 0) без непосредствена замяна. Използвайте :focus-visible, за да ограничите персонализирания пръстен само до потребители на клавиатура, ако искате да го потискате при кликване с мишка.
• Осигурете стил на фокуса с достатъчен контраст и дебелина, за да бъде очевиден: 2px плътен пръстен с контраст 3:1 спрямо съседния фон е консервативната отправна точка.
• За светли контроли върху светъл фон използвайте тъмен пръстен (и обратно). Сивият пръстен върху сиво hover-състояние е класическият капан за невидимост.
• Персонализираните джаджи (combobox, listbox, меню) трябва да преместват фокуса върху активната опция и да изобразяват върху нея видим индикатор.
• Тествайте, като преминете с Tab из цялата страница от адресната лента. Всяка спирка трябва да бъде очевидна без присвиване.

Чести грешки

• Глобален reset: *:focus { outline: none; } в базовия CSS, без последващо добавяне.
• Библиотеки с компоненти, снабдени с 1px пръстен с нисък контраст, съответстващ на цвета на бранда върху преходен фон на hero секция — практически невидим.
• Индикатор за фокус, скрит зад залепнало заглавие при скролиране (вж. 2.4.11 — същата първопричина, различен критерий).
• Бутони, сменящи фоновия цвят при :hover, но не при :focus, така че потребителите на клавиатура не получават никакъв сигнал.
• Персонализирани падащи менюта, при които фокусът се премества към скрит извъни екрана <li> и нищо не се променя визуално.
• Дизайнери, заменящи пръстена с мъничка сянка, невидима върху наситени фонове.

Как се вписва :focus-visible

Браузърите предоставят :focus-visible, за да разграничат фокуса от клавиатура от фокуса с мишка. Модел:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Това запазва чистотата при кликване с мишка и дава на потребителите на клавиатура видим индикатор. Безопасно за внедряване във всички съвременни браузъри считано от 2026 г.

Защо е важно

„Видим фокус” е единственият най-цитиран критерий в одитите за достъпност с клавиатура — и може би най-значимият. Сайт, при който 2.4.7 не е спазен, е неизползваем с клавиатура, дори ако всички останали критерии са изпълнени. Потребителите с двигателни увреждания, потребителите с намалено зрение, използващи лупи, и потребителите с наранявания на ръцете губят достъп. Потребителите на мобилни клавиатури (външни Bluetooth клавиатури на таблети) се сблъскват с същата бариера. Поправката обикновено се свежда до едно CSS правило — което прави трайността на тази грешка в мрежата толкова по-забележителна.