Работа со страницей с клавиатуры

Отключи мышь и нажимай Tab: каждая ссылка, кнопка и поле должны по очереди подсвечиваться в том порядке, в каком ты читаешь страницу.

Кто пользуется клавиатурой

Многие люди вообще не берут в руки мышь. Одни не могут твёрдо её держать; другие пользуются кнопкой-переключателем, ротовой палочкой или распознаванием речи, которое посылает нажатия клавиш; пользователи экранного диктора тоже в основном перемещаются клавиатурой. Критерий успешного применения 2.1.1 «Клавиатура» уровня A в WCAG 2.2 говорит, что всё на странице должно работать с клавиатуры. Критерий 2.1.2 «Отсутствие „клавиатурных ловушек“» добавляет: если фокус может попасть в какую-то часть страницы, он должен суметь выйти оттуда с клавиатуры.

Используй элементы, которые уже работают

Ссылки с href, button, input, select и textarea получают фокус сразу и реагируют на нужные клавиши. div с обработчиком щелчка так не умеет: до него не дойти клавишей Tab, Enter ничего не делает, а экранный диктор не объявляет его кнопкой. Совет MDN прост. Не используй tabindex, чтобы div вёл себя как кнопка; используй элемент button, у которого роль и поведение клавиатуры уже встроены.

Порядок фокуса и tabindex

Порядок Tab следует порядку элементов в исходном коде HTML. Критерий 2.4.3 «Перемещение указателя» (порядок фокуса) требует, чтобы этот порядок сохранял смысл и удобство страницы, поэтому самый простой способ исправить странный порядок состоит в том, чтобы переставить HTML. MDN перечисляет три вида значений tabindex. Ноль ставит элемент в обычный порядок. Отрицательное значение, обычно -1, убирает его из порядка Tab, но позволяет скрипту вызвать для него focus(), что полезно для диалога или сообщения об ошибке. Положительное значение ставит элемент впереди всех остальных, и MDN советует использовать только 0 и -1, потому что положительные значения делают порядок трудным для понимания.

Видно, где ты находишься

Пользователям клавиатуры нужно видеть, у какого элемента фокус. Критерий 2.4.7 «Видимый указатель» уровня AA требует видимого индикатора фокуса, поэтому правило таблицы стилей вроде outline: none без замены считается нарушением. В WCAG 2.2 добавлены два связанных критерия. 2.4.11 «Фокус не перекрыт (минимальные требования)» уровня AA говорит, что элемент с фокусом не должен быть полностью спрятан за тем, что добавил автор, например за закреплённым подвалом или баннером о cookie. 2.5.8 «Размер области для наведения указателя (минимальные требования)», тоже AA, требует, чтобы то, по чему щёлкают или нажимают пальцем, было не меньше 24 на 24 CSS-пикселя или имело достаточно места вокруг.

Очень помогает ещё один приём: ссылка для пропуска. На сайте с длинным меню пользователю клавиатуры приходится на каждой странице проходить клавишей Tab все пункты меню. Ссылка, поставленная первой на странице и ведущая к основному содержимому, позволяет перескочить меню одним нажатием. Её можно визуально скрыть, пока она не получит фокус.

Проверка занимает две минуты. Щёлкни в адресной строке и нажимай Tab, проходя всю страницу. Убедись, что до каждого элемента управления можно дойти, что порядок совпадает с порядком чтения, что всегда видно, где фокус, и что Enter и Space делают то же, что щелчок мыши. Потом нажимай Shift+Tab, чтобы вернуться. Любой элемент, до которого не дойти, или любое место, где фокус пропадает, является ошибкой.