Gli screen reader dispongono di comandi per passare rapidamente da un titolo all'altro o verso specifiche aree di riferimento. Infatti, un sondaggio tra gli utenti di screen reader ha rilevato che molto spesso navigano in una pagina sconosciuta esplorando i titoli.
Se utilizzi elementi di intestazione e punto di riferimento corretti, puoi migliorare notevolmente l'esperienza di navigazione sul tuo sito per gli utenti di tecnologie per la disabilità.
Utilizza le intestazioni per delineare la struttura della pagina
Utilizza gli elementi h1-h6 per creare un contorno strutturale per la pagina. L'obiettivo è creare uno scheletro o un'impalcatura della pagina in modo che chiunque utilizzi le intestazioni possa formare un quadro mentale.
È prassi comune utilizzare un unico elemento h1 per il titolo o il logo principale della pagina, gli elementi h2 per designare le sezioni principali e gli elementi h3 nelle sottosezioni di supporto:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Non saltare i livelli di intestazione
Gli sviluppatori spesso saltano i livelli di intestazione per utilizzare gli stili predefiniti del browser che si adattano molto al loro design. Questo è considerato un anti-pattern perché spezza il modello Outline.
Invece di fare affidamento sul carattere predefinito del browser per le intestazioni, utilizza il tuo CSS e non saltare livelli.
Ad esempio, questo sito ha una sezione chiamata "NELLA NOTIZIA", seguita da due titoli:
L'intestazione di sezione "NELLA NOTIZIA" potrebbe essere un h2 e i titoli
di supporto potrebbero essere entrambi elementi h3.
Poiché font-size di "IN THE NEWS" è più piccolo del titolo, si potrebbe avere la tentazione di trasformare il titolo della prima notizia in h2 e "IN THE NEWS" come h3. Anche se potrebbe corrispondere allo stile predefinito del browser,
verrebbe interrotto il profilo visualizzato dall'utente di uno screen reader.
Puoi utilizzare Lighthouse per controllare se nella pagina salta un livello di intestazione. Esegui il controllo Accessibilità (Lighthouse > Opzioni > Accessibilità) e cerca i risultati del controllo Le intestazioni non saltano i livelli.
Utilizzare i punti di riferimento per facilitare la navigazione
Gli elementi HTML5 come main, nav e aside fungono da punti di riferimento o
regioni speciali della pagina a cui uno screen reader può passare.
Utilizza i tag punto di riferimento per definire le sezioni principali della pagina, anziché fare affidamento sugli elementi div. Fai attenzione a non andare in mare perché avere troppi punti di riferimento può essere difficoltoso. Ad esempio, attieniti a un solo elemento main anziché 3 o
4.
Lighthouse consiglia di controllare manualmente il sito per verificare che "gli elementi punto di riferimento HTML5 vengano utilizzati per migliorare la navigazione". Puoi utilizzare questo elenco di elementi di riferimento per controllare la tua pagina.
Aggira i contenuti ripetitivi con skip link
Nelle intestazioni di molti siti sono presenti elementi di navigazione ripetitivi, il che può essere fastidioso da navigare con le tecnologie per la disabilità. Utilizza un link che ignora per consentire agli utenti di ignorare questi contenuti.
Un skip link è un ancoraggio fuori schermo che è sempre il primo elemento attivabile nel DOM. In genere, include un link in-page ai contenuti principali della pagina. Poiché è il primo elemento nel DOM, basta una singola azione delle tecnologie per la disabilità per focalizzarlo e bypassare la navigazione ripetitiva.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Molti siti popolari, come GitHub, The NY Times e Wikipedia, contengono tutti skip link. Prova a visitarli e a premere il tasto TAB sulla
tastiera alcune volte.
Lighthouse può aiutarti a verificare se la tua pagina contiene uno skip link. Esegui di nuovo il controllo Accessibilità e cerca i risultati del controllo La pagina contiene un'intestazione, un link ignorabile o una regione di riferimento.