Il ruolo della semantica nella navigazione nelle pagine
Hai appreso cosa sono le abitudini, la semantica e come le tecnologie per la disabilità utilizzano l'albero dell'accessibilità per creare un'esperienza utente alternativa per i loro utenti. Puoi vedere che scrivere HTML espressivo e semantico offre molta accessibilità con pochissimo sforzo, poiché molti elementi standard hanno sia la semantica sia il comportamento di supporto integrati.
In questa lezione tratteremo alcune semantiche meno evidenti che sono molto importanti per gli utenti di screen reader, in particolare per quanto riguarda la navigazione. In una pagina semplice con molti controlli, ma pochi contenuti, è facile esaminarla per trovare ciò che ti serve. Tuttavia, in una pagina con molti contenuti, come una voce di Wikipedia o un aggregatore di notizie, non è pratico leggere tutto dall'alto verso il basso; hai bisogno di un modo per navigare in modo efficiente tra i contenuti.
Gli sviluppatori hanno spesso la convinzione errata che gli screen reader siano noiosi e lenti da usare o che tutto sullo schermo debba essere attivabile per essere trovato dallo screen reader. Spesso non è così.
Gli utenti di screen reader si affidano spesso a un elenco di intestazioni per individuare le informazioni. La maggior parte degli screen reader offre modi semplici per isolare e scansionare un elenco di intestazioni di pagina, una funzionalità importante chiamata rotor. Vediamo come usare efficacemente le intestazioni HTML per supportare questa funzionalità.
Utilizzare le intestazioni in modo efficace
Innanzitutto, ripetiamo un punto precedente: l'ordine DOM è importante, non solo per l'ordine di attivazione, ma anche per l'ordine dello screen reader. Quando esegui esperimenti con screen reader come VoiceOver, NVDA, JAWS e ChromeVox, noterai che l'elenco delle intestazioni segue l'ordine DOM anziché l'ordine visivo.
Questo è vero per gli screen reader in generale. Poiché gli screen reader interagiscono con l'albero dell'accessibilità e questo si basa sull'albero DOM, l'ordine percepito da uno screen reader si basa direttamente sull'ordine del DOM. Ciò significa che una struttura delle intestazioni appropriata è più importante che mai.
Nella maggior parte delle pagine ben strutturate, i livelli di intestazione sono nidificati per indicare le relazioni tra i blocchi di contenuti. La lista di controllo WebAIM fa ripetutamente riferimento a questa tecnica.
- 1.3.1 menziona "Il markup semantico viene utilizzato per designare le intestazioni"
- 2.4.1 menziona la struttura delle intestazioni come tecnica per aggirare blocchi di contenuti
- 2.4.6 tratta alcuni dettagli per scrivere intestazioni utili
- 2.4.10 indica che "le singole sezioni di contenuti sono designate utilizzando le intestazioni, ove opportuno"
Non tutte le intestazioni devono essere visibili sullo schermo. Wikipedia, ad esempio, utilizza una tecnica che posiziona deliberatamente alcune intestazioni fuori dallo schermo per renderle specificamente accessibili solo agli screen reader e ad altre tecnologie per la disabilità.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Per le applicazioni complesse, questo può essere un buon modo per inserire le intestazioni quando la progettazione visiva non richiede o non ha spazio per un'intestazione visibile.
Altre opzioni di navigazione
Sebbene le pagine con buone intestazioni aiutino gli utenti di screen reader a navigare, esistono altri elementi che possono utilizzare per spostarsi all'interno di una pagina, tra cui link, controlli di form e landmark.
I lettori possono utilizzare la funzionalità del rotore dello screen reader (un modo semplice per isolare e esaminare un elenco di intestazioni di pagina) per accedere a un elenco di link nella pagina. A volte, come in una wiki, ci sono molti link, quindi il lettore potrebbe cercare un termine all'interno dei link. In questo modo, i risultati vengono limitati ai link che contengono effettivamente il termine, anziché a ogni occorrenza del termine nella pagina.
Questa funzionalità è utile solo se lo screen reader è in grado di trovare i link e il testo dei link è significativo. Ad esempio, di seguito sono riportati alcuni pattern comuni che rendono difficile trovare i link.
- Tag di ancoraggio senza attributi
href. Spesso utilizzati nelle applicazioni a pagina singola, questi target dei link causano problemi per gli screen reader. Puoi approfondire la questione in questo articolo sulle app a pagina singola. - Pulsanti implementati con link. Ciò fa sì che lo screen reader interpreti i contenuti come un link e la funzionalità del pulsante venga persa. In questi casi, sostituisci l'anchor tag con un pulsante reale e applicagli uno stile appropriato.
- Immagini utilizzate come contenuti dei link. A volte, le immagini collegate possono essere inutilizzabili per gli screen reader. Per garantire che il link sia correttamente esposto alle tecnologie per la disabilità, assicurati che l'immagine abbia un testo dell'attributo
alt.
Un altro problema è il testo del link di scarsa qualità. Il testo selezionabile, ad esempio "scopri di più" o "fai clic qui", non fornisce informazioni semantiche sulla destinazione del link. Utilizza invece un testo descrittivo come "scopri di più sul design responsive" o "guarda questo tutorial su Canvas" per aiutare gli screen reader a fornire un contesto significativo sui link.
Il rotore può anche recuperare un elenco di controlli dei moduli. Grazie a questo elenco, i lettori possono cercare elementi specifici e accedervi direttamente.
Un errore comune commesso dagli screen reader è la pronuncia. Ad esempio, uno screen reader potrebbe pronunciare "Udacity" come "oo-dacity", leggere un numero di telefono come un numero intero grande o leggere il testo in maiuscolo come se fosse un acronimo. È interessante notare che gli utenti di screen reader sono abbastanza abituati a questa peculiarità e la prendono in considerazione.
Alcuni sviluppatori cercano di migliorare questa situazione fornendo testo solo per screen reader scritto in modo fonologico. Ecco una semplice regola per l'ortografia fonetica: non farlo; peggiora solo il problema. Ad esempio, se un utente utilizza un display braille, la parola verrà scritta in modo errato, creando ulteriore confusione. Gli screen reader consentono di pronunciare le parole, quindi lascia che sia il lettore a controllare la propria esperienza e decidere quando è necessario.
I lettori possono utilizzare il rotore per visualizzare un elenco di punti di riferimento. Questo elenco aiuta i lettori a trovare i contenuti principali e un insieme di punti di riferimento di navigazione forniti dagli elementi landmark HTML.
HTML5 ha introdotto alcuni nuovi elementi che aiutano a definire la struttura semantica della pagina, tra cui header, footer, nav, article, section, main e
aside. Questi elementi forniscono indizi strutturali nella pagina senza forzare gli stili integrati (cosa che dovresti fare comunque con CSS).
Gli elementi strutturali semantici sostituiscono più blocchi div ripetitivi e
forniscono un modo più chiaro e descrittivo per esprimere in modo intuitivo la struttura della pagina
sia per gli autori che per i lettori.