Попробуй пройти свой интерфейс без мышки

Есть довольно простой способ проверить, насколько удобно пользоваться вашим сайтом. Убери руку с мышки и попробуйте сделать что-нибудь полезное с помощью одной клавиатуры: открыть меню, найти нужный товар, положить его в корзину, заполнить форму и оформить заказ. Желательно без желания выбросить ноутбук в окно 🙃

Для навигации понадобятся в основном три клавиши: Tab — переход к следующему интерактивному элементу, Shift + Tab — к предыдущему, Enter или Space — активация кнопок и других элементов (в зависимости от их типа). Esc обычно помогает закрыть открытое меню или модальное окно. На словах всё довольно просто, а практике быстро выясняется, что:

- фокус у некоторых элементов вообще не виден. Ты нажимаешь Tab, но понятия не имеешь, где сейчас находишься;

- до красивой кастомной кнопки нельзя добраться с клавиатуры, потому что на самом деле это div с обработчиком onClick;

- модалка открылась, но фокус остался где-то на странице под ней. Или наоборот: окно закрылось, а фокус исчез в неизвестном направлении;

- выпадающее меню работает только при наведении мышкой. С клавиатуры оно как будто не существует.

- чтобы добраться до основного контента, приходится двадцать раз нажать Tab, проходя через всю шапку сайта.

Это не просто неудобства для тех, кто предпочитает клавиатуру. Для людей, которые не могут пользоваться мышью, такие ошибки могут сделать интерфейс недоступным.

У клавиатурной навигации есть вполне конкретные требования в WCAG: интерактивные элементы должны быть доступны с клавиатуры, фокус должен быть видимым, а пользователь не должен застревать внутри компонента без возможности выбраться. Подглядеть паттерны доступности компонентов можно в справочнике ARIA Authoring Practices Guide:

https://www.w3.org/WAI/ARIA/apg/patterns/

Конечно, успешный проход с клавиатуры ещё не означает, что с доступностью всё хорошо; надо еще проверять скринридеры, подписи элементов, контрастность и другие аспекты. Но если ты не можешь оформить заказ, не прикоснувшись к мышке, это уже повод задуматься.

#ks_фронтенд