Gli screen reader hanno comandi per passare rapidamente da un'intestazione all'altra o a regioni di punto di riferimento specifici. Infatti, un sondaggio condotto tra gli utenti di screen reader ha rilevato che, nella maggior parte dei casi, esplorano le sezioni di una pagina sconosciuta per orientarsi.
Utilizzando 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à.
Utilizzare le intestazioni per strutturare la pagina
Utilizza gli elementi h1-h6 per creare un strutturato riassunto della tua pagina. L'obiettivo è creare uno scheletro o un'impalcatura della pagina in modo che chiunque navighi tramite le intestazioni possa farsi un'idea della pagina.
Una pratica comune è utilizzare un singolo h1 per il titolo principale o il logo su una pagina, elementi h2 per designare le sezioni principali ed 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 perfettamente al loro design. Questo è considerato un anti-pattern perché viola il modello di organizzazione.
Anziché fare affidamento sulle dimensioni dei caratteri predefinite del browser per le intestazioni, utilizza il tuo CSS e non saltare i livelli.
Ad esempio, questo sito ha una sezione chiamata "IN THE NEWS", seguita da due titoli:
L'intestazione della sezione, "IN THE NEWS", potrebbe essere un elemento h2 e le intestazioni di supporto potrebbero essere entrambi elementi h2.h3
Poiché il font-size per "IN THE NEWS" è più piccolo del titolo, potrebbe essere temptinge impostare il titolo della prima storia su h2 e "IN THE NEWS" su h3. Anche se potrebbe corrispondere allo stile predefinito del browser, romperebbe il riquadro trasmesso a un utente di screen reader.
Puoi utilizzare Lighthouse per verificare se la tua pagina salta livelli 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
Elementi HTML5 come main, nav e aside fungono da landmark, ovvero regioni speciali della pagina a cui uno screen reader può saltare.
Utilizza i tag landmark per definire le sezioni principali della pagina, anziché fare affidamento su div. Fai attenzione a non esagerare, perché avere troppi punti di riferimento può essere fonte di confusione. Ad esempio, utilizza un solo elemento main anziché 3 o
4.
Lighthouse consiglia di eseguire un controllo manuale del sito per verificare che gli "elementi di punto di riferimento HTML5 vengano utilizzati per migliorare la navigazione". Puoi utilizzare questo elenco di elementi di riferimento per controllare la tua pagina.
Ignorare i contenuti ripetitivi con i link di avanzamento
Molti siti contengono intestazioni di navigazione ripetitive, che possono essere fastidiose per la navigazione con le tecnologie per la disabilità. Utilizza uno skip link per consentire agli utenti di ignorare questi contenuti.
Un link di avanzamento è un'ancora offscreen che è sempre il primo elemento attivabile nel DOM. In genere, contiene un link in-page ai contenuti principali della pagina. Poiché è il primo elemento nel DOM, è sufficiente un'unica azione della tecnologia per la disabilità per attivare il controllo e aggirare 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 New York
Times e Wikipedia contengono link di avanzamento. Prova a visitarli e premi diverse volte il tasto TAB sulla tastiera.
Lighthouse può aiutarti a verificare se la tua pagina contiene un link di passaggio. Esegui di nuovo il controllo di accessibilità e cerca i risultati del controllo La pagina contiene un titolo, uno skip link o un'area di riferimento.