Cada vez que se agrega contenido nuevo a una página, asegúrate de que la atención del usuario se dirija a ese contenido para que pueda tomar medidas al respecto.
Cómo realizar pruebas manuales
Es importante probar las apps de una sola página, en especial cuando se trata de administrar la atención del usuario en el contenido nuevo.
Por lo general, en una app de una sola página, hacer clic en un vínculo no causará una actualización forzada.
En cambio, un cambio de ruta recupera datos nuevos para el área de contenido de <main>.
Es posible que los usuarios que navegan con un lector de pantalla o alguna otra tecnología de accesibilidad no sepan que se agregó contenido nuevo a la página.
No hay indicaciones de que deban volver a navegar al área <main>.
Cuando esto suceda, deberás administrar el enfoque del usuario para mantener el contexto percibido 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 cargado recientemente y diríjalo hacia él.
La forma más sencilla de hacerlo es asignarle 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 punto de referencia principal en la que se encuentra.