Ogni volta che vengono aggiunti nuovi contenuti a una pagina, cerca di assicurarti che l'attenzione dell'utente venga indirizzata a questi contenuti, in modo che possa intervenire.
Come eseguire il test manuale
È importante testare le app di una sola pagina, soprattutto per quanto riguarda la gestione dell'attenzione dell'utente ai nuovi contenuti.
In genere, in un'app a pagina singola, fare clic su un link non causa un aggiornamento forzato.
Una modifica del percorso consente invece di recuperare nuovi dati per l'area dei contenuti <main>.
Gli utenti che navigano con uno screen reader o un'altra tecnologia per la disabilità potrebbero non sapere che i nuovi contenuti sono stati aggiunti alla pagina.
Nessuna indicazione del fatto che debba tornare all'area di <main>.
In questi casi, è consigliabile gestire l'attenzione dell'utente per mantenere sincronizzato il contesto percepito con i contenuti visivi del sito.
Soluzione
Per gestire l'attenzione di un utente su contenuti aggiornati di una pagina,
trovare una buona intestazione nei contenuti appena caricati e indirizzare l'attenzione su di essa.
Il modo più semplice per ottenere questo risultato è assegnare all'intestazione un valore tabindex di -1
e chiamare il relativo 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 l'area del punto di riferimento principale in cui è contenuta.