Il ruolo della semantica nella navigazione nelle pagine
Hai appreso le possibilità, la semantica e il modo in cui le tecnologie per la disabilità utilizzano l'albero dell'accessibilità per creare un'esperienza utente alternativa. Puoi notare che scrivere codice HTML semantico ed espressivo offre molta accessibilità con pochissimo sforzo, poiché molti elementi standard hanno integrato sia la semantica sia il comportamento di supporto.
In questa lezione ci occuperemo di alcuni aspetti semantici meno evidenti, molto importanti per gli utenti di screen reader, soprattutto per quanto riguarda la navigazione. In una pagina semplice con molti controlli ma pochi contenuti, è facile scansionare la pagina per trovare ciò di cui hai bisogno. 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, ma serve un modo per esplorarli in modo efficiente.
Gli sviluppatori spesso pensano erroneamente che gli screen reader siano noiosi e lenti da usare o che tutto sullo schermo debba essere facilmente individuabile affinché lo screen reader possa trovarlo. Spesso non è così.
Gli utenti di screen reader si affidano spesso a un elenco di intestazioni per trovare le informazioni. La maggior parte degli screen reader offrono modi semplici per isolare ed esaminare un elenco di intestazioni di pagina, una funzionalità importante chiamata rotore. Vediamo come possiamo usare le intestazioni HTML per supportare questa funzionalità.
Utilizzo efficace delle intestazioni
Innanzitutto, ripetiamo un punto precedente: le questioni relative all'ordine del DOM, non solo per l'ordine di messa a fuoco, ma anche per l'ordine dello screen reader. Mentre sperimenti con screen reader come VoiceOver, NVDA, JAWS e ChromeVox, vedrai che l'elenco di intestazioni segue l'ordine del DOM anziché l'ordine visivo.
Questo vale per gli screen reader in generale. Poiché gli screen reader interagiscono con l'albero dell'accessibilità e quest'ultimo si basa sull'albero DOM, l'ordine percepito da uno screen reader è quindi basato direttamente sull'ordine del DOM. Ciò significa che una struttura dei titoli appropriata è più importante che mai.
Nella maggior parte delle pagine ben strutturate, i livelli di intestazione sono nidificati per indicare le relazioni padre-figlio tra i blocchi di contenuti. L'elenco di controllo WebAIM fa ripetutamente riferimento a questa tecnica.
- 1.3.1 menzioni "Il markup semantico viene utilizzato per designare le intestazioni"
- 2.4.1 menzioni la struttura dei titoli come tecnica per aggirare blocchi di contenuti
- 2.4.6 affronta alcuni dettagli per la scrittura di titoli utili
- 2.4.10 Afferma che "le singole sezioni di contenuti sono definite utilizzando intestazioni, ove appropriato"
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 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 applicazioni complesse, questo può essere un buon modo per inserire intestazioni quando il design visivo non richiede o non ha spazio per un'intestazione visibile.
Altre opzioni di navigazione
Anche se le pagine con intestazioni efficaci aiutano gli utenti di screen reader a navigare, esistono altri elementi che possono utilizzare per spostarsi nella pagina, tra cui link, controlli dei moduli e punti di riferimento.
I lettori possono utilizzare la funzionalità rotore dello screen reader (un modo semplice per isolare ed eseguire la scansione di un elenco di intestazioni di pagina) per accedere a un elenco di link nella pagina. A volte, come su un wiki, ci sono molti link, quindi il lettore potrebbe cercare un termine all'interno dei link. Ciò limita gli hit ai link che contengono effettivamente il termine, piuttosto che a ogni occorrenza del termine nella pagina.
Questa funzionalità è utile solo se lo screen reader può trovare i link e il testo dei link è significativo. Ad esempio, di seguito sono riportati alcuni pattern comuni che rendono i link difficili da trovare.
- Anchor tag senza attributi
href. Spesso utilizzati nelle applicazioni a pagina singola, queste destinazioni dei link causano problemi per gli screen reader. Per saperne di più, consulta questo articolo sulle app a pagina singola. - Pulsanti implementati con link. In questo modo lo screen reader interpreterà i contenuti come un link e la funzionalità del pulsante andrà persa. In questi casi, sostituisci l'anchor tag con un pulsante reale e personalizzalo in modo 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 esposto correttamente alle tecnologie per la disabilità, assicurati che l'immagine abbia il testo dell'attributo
alt.
Un testo di link di scarsa qualità è un altro problema. Il testo cliccabile come "Scopri di più" o "Fai clic qui" non fornisce informazioni semantiche sulla posizione del link. Utilizza invece un testo descrittivo come "scopri di più sul design reattivo" 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 controllo del modulo. Con questo elenco, i lettori possono cercare elementi specifici e accedervi direttamente.
Un errore comune degli 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 abituati a questa peculiarità e lo prendono in considerazione.
Alcuni sviluppatori cercano di migliorare questa situazione fornendo testo solo per screen reader scritto foneticamente. Ecco una semplice regola per l'ortografia fonetica: non farlo, non fa altro che peggiorare il problema. Se, ad esempio, l'utente usa un display braille, la parola verrà scritta in modo errato, creando più confusione. Gli screen reader consentono di scrivere le parole ad alta voce, quindi lascia che sia il lettore a controllare l'esperienza e decidere quando è necessario.
I lettori possono utilizzare il rotore per visualizzare un elenco di punti di riferimento. Questo elenco consente ai lettori di trovare i contenuti principali e una serie di punti di riferimento di navigazione forniti da elementi 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 in modo specifico indizi strutturali nella pagina senza forzare l'applicazione di stili integrati (operazione che devi comunque eseguire 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 delle pagine
per autori e lettori.