Ogni volta che aggiungi nuovi contenuti a una pagina, assicurati che l'attenzione dell'utente venga indirizzata a quei contenuti in modo che possa intervenire.
Come eseguire il test manuale
È importante testare le app con una sola pagina, soprattutto quando si tratta di gestire l'attenzione dell'utente sui nuovi contenuti.
In genere, in un'app a pagina singola,
fare clic su un link non causa un aggiornamento forzato.
Una modifica del percorso recupera invece i nuovi dati relativi all'area di contenuti <main>.
Per gli utenti vedenti,
va bene.
Tuttavia, gli utenti che usano uno screen reader o altre tecnologie per la disabilità potrebbero non sapere che i nuovi contenuti sono stati aggiunti alla pagina.
Non viene indicato che deve
tornare all'area <main>.
In questi casi, ti consigliamo di gestire l'attenzione dell'utente per mantenere sincronizzato il contesto percepito dell'utente con i contenuti visivi del sito.
Soluzione
Per gestire l'attenzione di un utente ai contenuti aggiornati di una pagina, trova una buona intestazione nei contenuti appena caricati e concentrati su di essi.
Il modo più semplice per ottenere questo risultato è assegnare all'intestazione il valore tabindex di -1 e chiamare il metodo 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>
Le tecnologie per la disabilità annunciano la nuova intestazione e il punto di riferimento principale in cui è contenuta.
Vedi anche Gestire l'accessibilità.