Изменение маршрутов без перезагрузки страницы
Озвучивайте навигацию и перемещайте фокус при смене маршрута.
«Изменение маршрутов без перезагрузки страницы» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Проблема бесшумной навигации
В SPA щелчок по ссылке заменяет содержимое без полной перезагрузки. Для средства чтения с экрана ничего не происходит, поэтому оно остаётся беззвучным при открытии новой страницы. 🤫
Почему полные перезагрузки были простыми
При настоящей загрузке страницы фокус сбрасывается, и средство чтения с экрана озвучивает новый заголовок. Маршрутизация на стороне клиента пропускает всё это, поэтому такие сигналы нужно воссоздать самостоятельно.
Обновляйте заголовок документа
При каждом изменении маршрута устанавливайте для document.title значение, соответствующее новому представлению. Многие средства чтения с экрана озвучивают заголовок при его изменении, помогая пользователям ориентироваться.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Перемещайте фокус при навигации
После маршрутизации переместите фокус в начало нового содержимого, обычно на основной заголовок. Так пользователи клавиатуры и средства чтения с экрана поймут, что страница изменилась.
Сфокусируйте заголовок или основное содержимое
Задайте целевому элементу tabindex со значением -1, чтобы скрипт мог передать ему фокус, не добавляя его в порядок перехода по Tab. Затем вызовите для него фокусировку после обновления маршрута.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Объявляйте изменения через живую область
Другой вариант — визуально скрытая живая область, в которую помещается текст вроде «Переход в настройки». Средство чтения с экрана озвучит его, не перемещая фокус.
<div aria-live="polite" className="sr-only">{message}</div>Выберите одну стратегию, а не обе
И перемещение фокуса, и объявление в живом регионе работают. Одновременное использование обоих подходов может привести к двойным объявлениям, поэтому выберите один подход для приложения и придерживайтесь его.
Время имеет значение
Перемещайте фокус или выполняйте объявление после отображения нового представления. В React эффект, зависящий от пути маршрута, срабатывает после обновления DOM.
Не перехватывайте фокус во время действия
Перемещайте фокус только при настоящем изменении маршрута, а не при небольших обновлениях на той же странице. Перехват фокуса во время действия пользователя раздражает и сбивает с толку.
Библиотеки маршрутизации могут помочь
Некоторые маршрутизаторы предоставляют хуки для отслеживания изменений маршрута. React Router предоставляет Вам useLocation, поэтому эффект может реагировать на каждое фактическое изменение пути.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Тестируйте как пользователь
Включите средство чтения с экрана, перейдите по навигации и прислушайтесь. Если изменения маршрута объявляются, а фокус перемещается в логичное место, навигация SPA доступна.
Быстрая проверка
Пользователь средства чтения с экрана нажимает ссылку SPA, но не слышит никаких изменений. Какова наиболее вероятная причина?
Итоги: объявляйте маршрут
Навигация SPA невидима, пока Вы не сделаете её слышимой. Обновите заголовок, затем переместите фокус или используйте живой регион, чтобы все знали об изменении страницы. ✅
Часто задаваемые вопросы
Урок «Изменение маршрутов без перезагрузки страницы» бесплатный?
Да — полный текст урока «Изменение маршрутов без перезагрузки страницы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Изменение маршрутов без перезагрузки страницы»?
Озвучивайте навигацию и перемещайте фокус при смене маршрута. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Изменение маршрутов без перезагрузки страницы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Изменение маршрутов без перезагрузки страницы
- Управление фокусом с помощью ссылок на элементы и useEffect
- Фрагменты, порталы и ловушка порядка DOM
- jsx-a11y и защитные правила на уровне компонентов