Ред на фокуса

Какво изисква критерият

Натискането на Tab от страна на потребител, ползващ клавиатура, трябва да премества фокуса между интерактивните елементи в ред, позволяващ изпълнението на всяка задача без загуба на контекст. При оформления отляво надясно (LTR) на езика, прочитан отляво надясно, това означава почти винаги от горе надолу и отляво надясно. Редът не трябва да бъде идентичен с визуалния, но всяко отклонение трябва да запазва смисъла — например връзката „Прескочи до края” може да е извън основния поток, стига останалото да е логично.

Типичните нарушения, насочени срещу този критерий, са диалогови прозорци, скриващи фокуса, мрежи с ново подреждане чрез плъзгане и остарял ред на Tab, и CSS, пренареждащ съдържанието визуално, но запазващ оригиналния DOM ред.

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

• Изграждайте DOM в реда на четене. Ако визуалното оформление се различава, използвайте свойствата order на CSS Grid или Flexbox внимателно — именно изходният ред следва Tab клавишът.
• Когато се отвори модален прозорец, преместете фокуса в него и го задържайте вътре до затварянето. При затваряне върнете фокуса на задействащия елемент.
• Никога не използвайте положителни стойности на tabindex (tabindex="3"). Те създават персонализирани редове, влизащи в конфликт с DOM и нарушаващи работата при промяна на страницата.
• При списъци с пренареждане чрез плъзгане актуализирайте DOM реда така, че да съответства на новия визуален ред и редът на Tab да остане синхронизиран.
• Проверете, като натиснете Tab от адресната лента и преминете през всеки фокусируем елемент на страницата. Ако в даден момент изпитате усещането „изгубих се”, потребителите ще изпитат същото.

Чести грешки

• Модален прозорец се отваря, но фокусът остава върху страницата зад него. Tab циклира през скрити елементи, докато модалният прозорец се вижда, но остава недостъпен.
• Мобилното меню за изваждане отстрани се отваря, фокусът остава в тялото на страницата. Потребителите на екранни четци не могат да намерят новопоявилото се съдържание.
• flex-direction: row-reverse обръща визуалния ред; DOM редът остава непроменен; Tab вече се движи отдясно наляво, докато четенето се извършва отляво надясно.
• Персонализирани стойности на tabindex разпръснати из формуляр, като по-късно добавени елементи наследяват tabindex="0" и се позиционират в края.
• Автоматично фокусиране върху изскачащ прозорец с „Абонирай се”, появяващ се 8 секунди след зареждане — откъсва фокуса от четящия потребител.

Защо е важно

Редът на фокуса е клавиатурният еквивалент на реда на четене. Когато е нарушен, изживяването не е просто бавно — то е неинформативно. Потребители с двигателни увреждания, навигиращи изключително с Tab и Shift+Tab, могат да бъдат насочени в грешна секция на формуляр, да пропуснат задължително поле изцяло или да изгубят позицията си в дълга страница заради единствен неправилно позициониран елемент за управление.