Cada vez que se agrega contenido nuevo a una página, intenta asegurarte de que el enfoque del usuario se dirija a ese contenido, para que pueda realizar acciones al respecto.
Cómo probarlo manualmente
Es importante probar las apps de una sola página, en especial cuando se trata de administrar el enfoque del usuario en el contenido nuevo.
Por lo general, en una app de una sola página, hacer clic en un vínculo no provocará una actualización forzada.
En cambio, un cambio de ruta recupera datos nuevos para el área de contenido <main>.
Para usuarios videntes,
esto funciona bien.
Sin embargo, es posible que los usuarios que navegan con un lector de pantalla o con otra tecnología de accesibilidad no sepan que se agregó el contenido nuevo a la página.
No hay indicación de que deba volver al área <main>.
Cuando esto suceda, deberás administrar el enfoque del usuario para mantener el contexto percibido del usuario en sincronización con el contenido visual del sitio.
Cómo corregirlo
Para administrar el enfoque de un usuario en el contenido nuevo de una página, busca un buen encabezado en el contenido recién cargado y enfócate en él.
La manera más fácil de lograrlo es asignar al encabezado un tabindex de -1 y llamar a su método focus():
<main>
<h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
// Assuming this gets called every time new content loads...
function onNewPage() {
var heading = document.querySelector('h2');
heading.focus();
// You can also update the page title :)
document.title = heading.textContent;
}
</script>
Las tecnologías de accesibilidad anuncian el nuevo encabezado y el área de referencia principal que contiene.
Consulta también Cómo administrar el enfoque para la accesibilidad.
Recursos
El código fuente de la auditoría del usuario se dirige al contenido nuevo agregado a la página