Лиза работала над образовательной платформой на React. Пользователь пожаловался, что при переходе между уроками фокус остаётся на предыдущей странице, и приходится каждый раз табать заново до контента. Она не понимала проблемы, пока не попробовала пользоваться сайтом только с клавиатуры.
В обычных сайтах при переходе по ссылке браузер автоматически сбрасывает фокус наверх страницы. В SPA этого не происходит. React Router просто меняет компонент, но фокус остаётся там, где был. Пользователь думает, что перешёл на новую страницу, но браузер этого не знает.
Поиск решения
Лиза начала с простого: добавила useEffect с focus на основной контейнер при монтировании компонента. Не сработало. Экранный диктор не объявлял переход, потому что контейнер был обычным div.
Она попробовала другой подход. Добавила ref на заголовок h1 каждой страницы, установила tabindex равен -1 и программно переносила фокус на заголовок при смене роута. Теперь диктор зачитывал название новой страницы, и пользователь понимал, что контент изменился.
Дополнительные детали
Лиза также добавила объявления для динамического контента через aria-live. Когда загружался список новых уроков или появлялись уведомления, экранный диктор информировал об этом без перемещения фокуса.
Она создала переиспользуемый хук useFocusOnMount для всех страниц платформы. Теперь каждый новый роут автоматически управляет фокусом правильно. Пользователи с клавиатурой и screen reader получили нормальную навигацию без костылей.