This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Достъпност
Как изглежда фокусната рамка?
Фокусната рамка показва къде са потребителите на клавиатурата. Ниво АА (2.4.7) изисква само да бъде видимо; Тънка, бледа рамка изпълнява това. Критерият AAA от ниво 2.4.13 определя мерки: Фокусната рамка обхваща елемента с линия от най-малко 2 CSS пиксела дебелина, а площта, която се променя на фокус има контраст от най-малко 3:1 между фокусирани и нефокусирани състояния.
Какво изисква критерият
Две мерки, и двете измерими. Първо, площта: фокусната рамка е поне толкова голяма, колкото дебелината на 2 пиксела около елемента; Не е достатъчно да се подчертае самостоятелно или 1 пиксел рамка. Второ, контрастът: пикселите, които се променят на фокус се различават от състоянието без фокус от поне 3:1. Тъмно синя рамка на тъмно син бутон пада през, бяла рамка с тъмно подгъва на всеки фон съществува.
Рамка, която работи на всеки фон
Тъй като бутоните могат да бъдат леки и тъмни, двуцветен фокус е успешен: очертание от 2 пиксела в смел цвят с 2 пиксела разстояние до елемента (outline-offset) и допълнителна сянка в контра-цветен. Така контрастът се поддържа върху светли и тъмни повърхности. Фокусът по подразбиране на браузъра често е твърде тънък или се отстранява от стила с очертания: няма; Тази забрана е най-често срещаната причина за невидим фокус.
Така се справяме с това
Измерването фокусира всеки контролен елемент, сравнява пикселите преди и след фокуса и измерва дебелината и контраста на промяната. Това прави критерия напълно автоматично изпитан; изпитването на ниво АА (фокусно видим) осигурява същите данни. Критерият принадлежи към категория ААА със знания; в доклада - дебелината и контраста за всяка справка.
Beispiele
Тънка бледофокална рамка
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Най-малко 2 пиксела очертават и променените пиксела се различават от нефокусираното състояние в 3:1. Бялата сянка запазва контраста на тъмните повърхности.
- Премахване на всеки контур: няма от стила, който не определя веднага собствения си фокус.
- Определете глобален фокус с: фокус-видим: очертание на 3 пиксела, контур-офсет от 2 пиксела, в цвят 3:1 на фона.
- Добавете сянка в контра-цветовете, така че рамката да остане видима върху светли и тъмни повърхности.
- Прегледайте страницата с клавиша подпрозорец и проверете всяка държава: меню, бутони, полета, линкове в текста.
