Cambios de ruta sin recargar la página
Anuncie la navegación y mueva el foco al cambiar de ruta.
Cambios de ruta sin recargar la página es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
El problema de la navegación silenciosa
En una SPA, al hacer clic en un enlace se sustituye el contenido sin una recarga completa. Para un lector de pantalla, no parece ocurrir nada, así que permanece silencioso ante la nueva página. 🤫
Por qué las recargas completas eran sencillas
Una carga de página real restablece el foco y hace que el lector de pantalla lea el nuevo título. El enrutamiento del lado del cliente omite todo eso, por lo que debe recrear esas señales.
Actualice el título del documento
En cada cambio de ruta, establezca document.title para que coincida con la nueva vista. Muchos lectores de pantalla leen el título cuando cambia, lo que permite a los usuarios orientarse.
useEffect(() => {
document.title = 'Settings - MyApp';
}, [location.pathname]);Mueva el foco al navegar
Después del enrutamiento, envíe el foco al principio del contenido nuevo, normalmente al encabezado principal. Así indica a los usuarios de teclado y de lectores de pantalla que la página ha cambiado.
Enfoque el encabezado o el elemento principal
Asigne al objetivo un tabindex de -1 para que pueda recibir el foco mediante un script sin incorporarse al orden de tabulación. Después, llame a .focus() cuando se actualice la ruta.
<h1 tabindex="-1" ref={headingRef}>Settings</h1>Anuncie el cambio con una región activa
Otra opción es una región activa oculta visualmente que rellene con un texto como Navigated to Settings. El lector de pantalla lo pronuncia sin mover el foco.
<div aria-live="polite" className="sr-only">{message}</div>Elija una estrategia, no las dos
Mover el foco y anunciar el cambio en una región activa funcionan por separado. Hacer ambas cosas a la vez puede provocar anuncios duplicados, así que elija un enfoque para cada aplicación y sea coherente.
El momento es importante
Ejecute el movimiento del foco o el anuncio después de que se renderice la nueva vista. En React, un efecto que depende de la ruta se ejecuta cuando se actualiza el DOM.
No quite el foco a mitad de una tarea
Mueva el foco solo cuando haya un cambio de ruta real, no ante actualizaciones menores en la misma página. Robar el foco mientras alguien realiza una acción resulta desconcertante y confuso.
Las bibliotecas de enrutamiento pueden ayudar
Algunos enrutadores ofrecen hooks para los cambios de ruta. React Router le proporciona useLocation, de modo que un efecto puede reaccionar cada vez que la ruta cambia realmente.
const location = useLocation();
useEffect(() => focusMain(), [location.pathname]);Pruébelo como lo haría un usuario
Active un lector de pantalla, haga clic por la navegación y escuche. Si los cambios de ruta se anuncian y el foco llega a un lugar lógico, la navegación de su SPA es accesible.
Comprobación rápida
Una persona que usa un lector de pantalla hace clic en un enlace de una SPA, pero no oye ningún cambio. ¿Cuál es la causa más probable?
Resumen: anuncie la ruta
La navegación de una SPA es invisible hasta que consigue que se escuche. Actualice el título y después mueva el foco o use una región activa para que todos sepan que la página ha cambiado. ✅
Preguntas frecuentes
¿La lección «Cambios de ruta sin recargar la página» es gratis?
Sí — el texto completo de «Cambios de ruta sin recargar la página» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cambios de ruta sin recargar la página»?
Anuncie la navegación y mueva el foco al cambiar de ruta. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Cambios de ruta sin recargar la página»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cambios de ruta sin recargar la página
- Gestionar el foco con refs y useEffect
- Fragments, Portals y la trampa del orden del DOM
- jsx-a11y y controles de calidad a nivel de componente