This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Достъпност
Защо фокусираният елемент никога не трябва да се крие?
Всеки, който мине през страница с клавиатурата трябва да види къде е фокусът. Лепкави заглавни ленти, банери за бисквитки и чат прозорци над съдържанието; Фокусът пада отдолу и е невидим. Ниво АА (2.4.11, ново в WCAG 2.2) изисква фокусираният елемент да остане поне частично видим. Критерият AAA от ниво 2.4.12 изисква: напълно видим, без затъмнени пиксели.
Какво изисква критерият
Когато даден елемент получава фокус върху клавиатурата, няма част от него зад всяко друго съдържание, генерирано от автора: няма лепкава заглавна част или кракер, няма бисквитен банер, няма чат бутон, няма референтен прозорец. При смяна на фокуса браузърът превърта само до момента, когато елементът навлиза във видимата област; Той не знае нищо за тези, които са над него. Поради това самата страна трябва да гарантира, че площта под лепяща лента се пази чиста по време на превъртане.
Изпълнение
Имотът CSS превъртане на свитъчен контейнер запазва толкова пространство, колкото и лепящите ленти са високи; браузърът след това превърта фокусирани елементи под бара. Прозорците, лежащи отстрани, улавят фокуса (фокусът остава в прозореца) или се затварят, когато фокусът влиза в страната. Бутон за чат в ъгъла остава малък или се движи настрана, когато се фокусира върху елемент отдолу.
Така се справяме с това
Измерването преминава през страницата с клавиша подпрозорец, измерва видимата част за всеки фокусиран елемент и сравнява с лепилни елементи; Частично видими за ниво АА, напълно видими за ААА. Едно и също измерване осигурява и двете стойности. Критерият принадлежи към категория AAA със знания; докладът съдържа скрит дял за референтна точка.
Beispiele
Фокусирано поле половината под чат бутона
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }На ниво АА, част от фокусирания елемент трябва да бъде замъглена и няма пиксел на ААА.
- Поставете превъртане горната и долната част на височината на вашите лепкави слабини.
- Позволете на банери за бисквитки и референтни прозорци да улавят фокуса, докато не бъдат затворени.
- Прегледайте всеки шаблон с клавиша подпрозорец и наблюдавайте фокусната рамка; Не трябва да изчезва никъде.
- Дръжте плаващи бутони (чат, нагоре) малки и на разстояние от ръба.
