Достъпност с клавиатура

Достъпността с клавиатура означава, че всяко действие, което потребителят може да извърши на дадена страница, може да бъде извършено само с клавиатура. Това е най-безкомпромисното изискване за достъпност: без него нито една помощна технология не работи.

Клавиатурният интерфейс е универсалният интерфейс

Екранни четци, устройства за превключване, гласово управление, проследяване на погледа — всяка помощна технология, използвана в уеб, в крайна сметка работи чрез клавиатурния слой. Потребител без двигателно увреждане може никога да не натисне Tab, но същият уебсайт трябва да е напълно управляем по този начин, за да могат хората с увреждания да го ползват.

Именно затова 2.1.1 Keyboard е критерий за успех от ниво A: неспазването му не затруднява ползването на сайта — то го прави напълно неизползваем за цели потребителски групи.

Какво реално изисква „управляемост с клавиатура”

• Tab и Shift+Tab придвижват фокуса напред и назад между интерактивните елементи.
• Enter активира връзки и повечето бутони.
• Space активира бутони и превключва полета за отметка и радио бутони.
• Клавишите за стрелки навигират в рамките на съставни компоненти (панели с раздели, менюта, групи от радио бутони, списъчни полета, плъзгачи).
• Escape затваря модални диалогови прозорци, изскачащи елементи и падащи менюта.
• Page Up/Down, Home/End навигират в дълго съдържание, когато платформената конвенция го изисква.

Компонент, който не прилага клавиатурния договор, очакван от потребителите на екранни четци с оглед на ролята му — например ARIA комбинирано поле, което реагира на кликвания, но не и на клавишите за стрелки — е технически фокусируем, но функционално неизползваем.

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

Преминете с Tab през страницата от самото начало (фокус в адресната лента, след това Tab) до края на долния колонтитул. Редът на фокуса трябва да съответства на визуалния ред. Всеки кликаем елемент трябва да получи фокус точно веднъж. Натискането на Enter или Space върху фокусиран елемент трябва да даде същия резултат като кликването върху него. Натискането на Escape в рамките на модален прозорец трябва да го затвори. Ако даден елемент е недостъпен, ако нещо се достига извън реда или ако фокусът е блокиран, са открити грешки.

Пет минути дисциплинирана навигация с Tab разкрива повече проблеми с достъпността, отколкото петнадесет минути сканиране с axe-core.

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

• <div onclick> за кликаеми карти. Не са фокусируеми, не могат да бъдат активирани с клавиатура и са напълно невидими за екранните четци като интерактивни елементи. Следва да се използва <button> (за действия) или <a href> (за навигация).
• Персонализирани падащи менюта, които не се отварят с Enter/Space. Изградени само с обработчици на кликвания; потребителите с клавиатура могат да фокусират задействащия елемент, но не могат да отворят списъка.
• Модални диалогови прозорци, които не задържат фокуса. Tab придвижва фокуса извън модалния прозорец и към (визуално скритата) страница зад него. Потребителят не може да вижда къде се намира.
• Модални диалогови прозорци, които прекалено задържат фокуса. Escape не затваря прозореца. Потребителят остава блокиран.
• Целта на връзката за прескачане не е фокусируема. Връзката за прескачане прескача към #main, но <main id="main"> няма tabindex="-1", поради което фокусът реално не се премества и следващият Tab рестартира от началото на страницата.

Две библиотеки си заслужава да се познават: focus-trap за управление на фокуса в рамките на модални прозорци, и tabbable за намиране на фокусируемите елементи в даден контейнер. И двете са малки и без предписан подход.