Сара работала над образовательной платформой два года, когда коллега попросил её попробовать пользоваться сайтом только с клавиатуры. Без мыши. Результат оказался неожиданным.
Выпадающее меню курсов не открывалось по Enter. Модальные окна захватывали фокус так, что выйти можно было только перезагрузкой страницы. А кнопка отправки домашних заданий вообще не реагировала на Space.
Что она обнаружила
Сначала Сара проверила все интерактивные элементы. Оказалось, что большинство кнопок были обычными div с обработчиками onClick. Браузер их просто не видел как интерактивные элементы.
Она начала с замены псевдо-кнопок на настоящие элементы button. Потом добавила tabindex только там, где это действительно нужно. Для модальных окон написала простую функцию управления фокусом — при открытии фокус переходит внутрь, при закрытии возвращается на триггер.
Неочевидная проблема
Самым сложным оказалось выпадающее меню. Сара потратила неделю, экспериментируя с разными паттернами, пока не нашла решение: комбинация role, aria-expanded и правильной обработки клавиш Escape, Arrow Down и Arrow Up.
Через три недели все основные сценарии работали с клавиатуры. Сара запустила тестирование с реальными пользователями, и двое из них признались, что раньше вообще не могли пользоваться платформой. Они просто молчали об этом.
Теперь она проверяет доступность с клавиатуры на этапе создания компонентов, а не после релиза.