Фокусът не е скрит (минимум)

Какво изисква

Когато потребителят табулира до даден контрол, поне частта от него трябва да остане видима. Най-честата грешка: потребителят табулира надолу покрай фиксирана заглавна лента, страницата се превърта автоматично така, че фокусираният линк се оказва зад фиксираната лента, и потребителят вече не вижда пръстена на фокуса. Контролът все още е фокусиран и реагира на Enter, но потребителят не го вижда.

Критерият задава минимална граница: фокусираният елемент може да бъде частично покрит, но не изцяло. Ниво AAA — критерият 2.4.12 повишава изискването до „изобщо не е скрит”.

Това е един от четирите нови критерия за оперируемост, въведени в WCAG 2.2, и оказва значително влияние, тъй като фиксирани заглавни ленти, фиксирани долни ленти, банери за бисквитки и балончета на чат приспособления са навсякъде.

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

• Добавете CSS scroll-margin-top към фокусируемите елементи, равно на височината на фиксираната заглавна лента, така че браузърите автоматично да превъртат фокусирания контрол извън заглавната лента.
• При фиксирани долни ленти и чат балончета се уверете, че те не покриват напълно нито един фокусируем елемент. Или ги намалете при фокус, или ги закответе по начин, оставящ буфер в края на страницата.
• Банери за бисквитки и скриваеми наслагвания: никога не ги правете фиксирани по начин, при който следващите табулационни спирки се намират отдолу им. Или ги направете модални (с фиксиране на фокуса), или неблокиращи.
• При страници с фиксирана заглавна и фиксирана долна лента тествайте табулационната последователност около вертикалния център на видимата область — там фокусираният елемент е най-застрашен.
• Използвайте scroll-padding-top на контейнера с превъртане като резервен вариант за по-стари браузъри.

html { scroll-padding-top: 80px; }       /* съответства на височината на фиксираната заглавна лента */
:target, :focus { scroll-margin-top: 80px; }

Чести грешки

• Фиксирана заглавна лента без компенсация на scroll-padding: всеки табулационен преход в горната половина на видимата област скрива пръстена на фокуса.
• Банер за съгласие с бисквитки, закачен в долната част, покриващ последния ред полета на формуляр, когато те получат фокус.
• Балонче на чат приспособление в долния десен ъгъл, застъпващо бутон „Изпращане” в ъгъла на формуляр.
• Фиксирани промоционални ленти (банери за Черен петък), добавени от маркетинговия екип без актуализиране на токените за scroll-padding.
• Фиксирани заглавия на таблици в табла за управление, при което табулиране до първия ред с данни скрива елемента зад заглавния ред.

Защо е важно

Критерият решава клас грешки, които ежедневно затрудняват потребителите на клавиатура, но рядко се улавят от автоматизирани сканирания — никое правило на axe не може да предскаже при каква позиция на превъртане фиксиран елемент ще застъпи фокусиран. Той засяга непропорционално силно и потребителите на лупи за екрана, чиято видима област е свита до четвърт от екрана, поради което фиксираният елемент заема още по-голям дял.

Очаква се 2.4.11 да бъде едно от най-често цитираните нови открития в одитните доклади за 2026 г. Поправката е малка (няколко CSS токена), но изисква координация на всеки екип, отговорен за фиксиран елемент — заглавна лента, долна лента, банер, приспособление.