Фокус

Фокусът е състоянието, при което даден елемент е активен получател на въвеждане от клавиатурата. В даден момент само един елемент на страницата може да притежава фокуса, а визуалният индикатор на това състояние — пръстенът на фокуса — е най-важното средство за ориентация за потребителите, работещи с клавиатура, превключватели и екранни четци.

Защо фокусът е важен

Значителна част от потребителите навигират мрежата изцяло без мишка:

• Потребители само с клавиатура — с двигателни увреждания, при които насочването е трудно или невъзможно.
• Потребители на превключватели — преглеждащи интерфейси чрез устройства с един бутон или тип sip-and-puff.
• Потребители на екранни четци — маршрутизиращи чрез клавиатурния интерфейс дори на сензорни екрани.
• Потребители на гласово управление (“Click the Submit button”) — чиито инструменти разпознават команди чрез съпоставяне с фокусируеми елементи.

За всички тях фокусът е курсорът. Местоположението на фокуса, посоката на движение и изгледът му определят дали страницата изобщо е използваема.

Правилата на WCAG за фокуса

WCAG 2.x и 2.2 съдържат няколко критерия, свързани с фокуса:

• 2.1.1 Клавиатура (A) — цялата функционалност трябва да е достъпна от клавиатурата.
• 2.1.2 Без капан за клавиатурата (A) — потребителите на клавиатура трябва да могат да преместят фокуса от всеки фокусируем елемент, използвайки само клавиатурата.
• 2.4.3 Ред на фокуса (A) — редът на фокуса трябва да е логичен и смислен.
• 2.4.7 Видим фокус (AA) — фокусираният елемент трябва да има видим индикатор.
• 2.4.11 Фокусът не е скрит (AA, ново в WCAG 2.2) — фиксирани заглавки, банери за бисквитки и плаващи чат-приставки не могат да скриват напълно фокусиран елемент.
• 2.4.13 Вид на фокуса (AAA, ново в 2.2) — индикаторът на фокуса трябва да отговаря на конкретни изисквания за площ и цветови контраст.

Чести модели на неуспех

• outline: none без заместител. Дизайнерите премахват пръстена по подразбиране, защото не съответства на визуалния им език, и забравят да го заменят със стилизиран еквивалент. Това е неуспех на ниво AA и е най-честият такъв.
• Фокус само при :focus-visible, а не при :focus. Съвременната добра практика използва :focus-visible, за да се показва пръстенът само при навигация с клавиатура, а не при кликване с мишка. Допустимо е — но индикаторът при :focus-visible все пак трябва да отговаря на изискванията за цветови контраст на ниво AA.
• Изгубен фокус след динамични действия. След затваряне на модален прозорец фокусът трябва да се върне към елемента, отворил прозореца. След изтриване на ред фокусът трябва да се премести към логичен съсед. В противен случай потребителят попада произволно (обикновено в тялото на документа) и трябва да започне да табулира отначало.
• Скрит фокус под фиксирано съдържание. Фокусирана връзка на 50 пиксела от горния край на страницата се оказва зад фиксирана заглавка, висока също 50 пиксела. Потребителят табулира в привидна празнота. Задайте scroll-padding-top, равно на височината на заглавката, или открийте припокриването и превъртете фокусирания елемент в полезрението.

Най-бързият ръчен одит

Табулирайте през всяка страница от адресната лента до долния колонтитул. Ако в нито един момент не виждате фокуса, не можете да достигнете интерактивна контрола или се блокирате в капан за фокуса, страницата не отговаря на 2.4.7 или 2.1.2.