Gli screen reader sono dotati di comandi che consentono di passare rapidamente da un titolo all'altro o a pagine regioni di punti di riferimento. Infatti, un sondaggio tra gli utenti di screen reader ha scoperto che molto spesso navigano in una pagina sconosciuta esplorando il intestazioni.
Utilizzando gli elementi di intestazione e punto di riferimento corretti, puoi ottenere migliorare 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 pagina. L'obiettivo è
per creare uno scheletro o un'impalcatura della pagina in modo che chiunque possa navigare
possono formare un'immagine mentale.
È prassi comune utilizzare un singolo h1 per il titolo o il logo principale su una
pagina, h2 elementi per designare le sezioni principali e h3 elementi 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, molto simile al loro design. Questo è considerato un anti-pattern perché rompe modello a contorni.
Anziché fare affidamento sulle dimensioni predefinite dei caratteri del browser per le intestazioni, utilizza il proprio CSS e non saltare i livelli.
Ad esempio, questo sito ha una sezione chiamata "IN LE NOTIZIE", seguita da due titoli:
L'intestazione della sezione "IN THE NOTIZIE" potrebbe essere un h2 e le richieste di supporto
i titoli possono essere entrambi elementi h3.
Perché font-size di "IN THE NEWS" è più piccolo del titolo, potrebbe
potresti voler trasformare il titolo della prima notizia in h2 e creare
"NEL NOTIZIE" e h3. Anche se può corrispondere
allo stile predefinito del browser,
spezzerebbe la struttura trasmessa a un utente di screen reader.
Puoi utilizzare Lighthouse per verificare se la pagina ignora eventuali livelli di intestazione. Esegui l' Controllo dell'accessibilità (Lighthouse > Opzioni > Accessibilità) e aspetto per 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 oppure
aree speciali della pagina a cui può passare uno screen reader.
Utilizza i tag dei punti di riferimento per definire le sezioni principali della pagina, anziché utilizzare i
div Fai attenzione a non esagerare, perché avere troppi punti di riferimento può
faticoso. Ad esempio, utilizza un solo elemento main anziché 3 oppure
4,
Lighthouse consiglia di controllare manualmente il sito per verificare che il "punto di riferimento HTML5 per migliorare la navigazione." Puoi utilizzare questo elenco di punti di riferimento per controllare la pagina.
Aggira contenuti ripetitivi con skip link
Molti siti contengono una navigazione ripetitiva nelle intestazioni, il che può essere fastidioso di navigare con le tecnologie per la disabilità. Utilizza un ignora link per consentire agli utenti di ignorare questi contenuti.
Un skip link è un ancoraggio fuori schermo che è sempre il primo elemento attivabile in il DOM. In genere, contiene un link in-page ai contenuti principali della pagina. Perché il primo elemento del DOM, occorre una sola azione dalle tecnologie per la disabilità per 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
Orari e Wikipedia
contengono skip link. Prova a visitarli e a premere il tasto TAB sul tuo
tastiera alcune volte.
Lighthouse può aiutarti a verificare se la pagina contiene uno skip link. Esegui l' il controllo dell'accessibilità e cerca i risultati del messaggio La pagina contiene un controllo di intestazione, skip link o regione del punto di riferimento.