Gli screen reader hanno comandi che consentono di passare rapidamente da un titolo all'altro o ad aree specifiche di punti di riferimento. Infatti, un sondaggio condotto tra gli utenti di screen reader ha rilevato che, nella maggior parte dei casi, navigano in una pagina sconosciuta esplorando le titoli.
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 delineare la pagina
Usa gli elementi h1-h6 per creare una struttura strutturale per la 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.
È prassi comune utilizzare un unico h1 per il titolo o il logo principale di una 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 perfettamente al loro design. Questo è considerato un anti-pattern, perché spezza il modello schematico.
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.
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
Gli elementi HTML5, ad esempio main, nav e aside, fungono da punti di riferimento o
regioni speciali della pagina a cui può passare uno screen reader.
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 dei punti di riferimento per controllare la 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 skip link è un ancoraggio fuori schermo 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 a premere alcune 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 Accessibilità e cerca i risultati del controllo La pagina contiene un'intestazione, un skip link o un'area geografica punto di riferimento.