Фокусът не е скрит (подобрено ниво)

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

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

Това е ниво AAA и е стремежна цел за повечето екипи, но е правилната мишена за системи за проектиране, използвани в правителствените, здравните и образователните сектори, където надеждността на клавиатурата е задължителна.

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

• Задайте scroll-padding-top и scroll-padding-bottom на контейнера за превъртане с по-голям запас — малко повече от общата височина на всички залепени елементи.
• Скривайте автоматично чат-уиджети, когато фокусируем елемент се приближи до тяхната позиция, или ги преместете настрани при събитие на фокус.
• За залепени долни колонтитули обмислете нелепящи алтернативи или ги свивайте при превъртане, така че да покриват само заглавно съдържание, но не и контроли.
• Проверете всяка страница едновременно с залепено заглавие и залепен долен колонтитул. „Безопасната лента” в средата намалява бързо, особено на малки екрани.
• Тествайте при 200% мащаб на браузъра и при 400% (съгласно 1.4.10 Пренареждане) — залепени елементи, работещи при 100%, могат да запълнят екрана при по-голям мащаб.

Чести грешки

• Залепено заглавие, покриващо горните 4 пиксела на всеки пръстен на фокуса — приемливо за 2.4.11, но нарушение на 2.4.12.
• Цели на „Прескочи към съдържанието”, позиционирани в самото начало на <main>, с пръстен на фокуса, частично скрит от залепеното заглавие.
• Плаващи бутони „Помощ” в долния десен ъгъл, припокриващи 1 px от ъгъла на фокусирани бутони в тази зона.
• Промоционални банери, вмъкнати от маркетингови тагове, неотчетени в токените за отместване при превъртане на системата за проектиране.
• Долни навигационни ленти на мобилни устройства, при които табулирането до последното поле на формуляр показва полето с пръстена на фокуса, леко отрязан в долния ръб.

Защо е важно

За потребители с намалено зрение, разчитащи на индикатора за фокус, за да проследяват позицията си, дори частично отрязване може да направи индикатора ефективно невидим — контур от 2 px с отрязания горен пиксел изглежда като линия от 1 px, лесно бъркана с рамка. Подобреният критерий третира индикатора за фокус като първокласен UI елемент, заслужаващ пълната си ограждаща кутия на екрана. Ангажирането с 2.4.12 принуждава екипите да рационализират бюджета си за залепени елементи, което често подобрява оформлението за всички потребители.