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. Come puoi notare, la scrittura di codice HTML semantico ed espressivo offre molta accessibilità con uno sforzo minimo, dato che molti elementi standard hanno sia la semantica che il comportamento di supporto integrati.
In questa lezione ci occuperemo di alcuni aspetti semantici meno ovvi 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 non molti contenuti, è facile scansionare la pagina per trovare ciò di cui hai bisogno. Tuttavia, in una pagina ricca di contenuti, ad esempio una voce di Wikipedia o un aggregatore di notizie, non è pratico leggere tutto dall'alto verso il basso; è necessario un modo per spostarsi in modo efficiente tra i contenuti.
Gli sviluppatori spesso hanno la convinzione errata che gli screen reader siano noiosi e lenti da usare o che tutto ciò che compare sullo schermo debba essere attivato dallo screen reader per trovarli. 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 analizzare un elenco di intestazioni di pagina, una funzionalità importante chiamata rotore. Vediamo come usare efficacemente le intestazioni HTML per supportare questa funzionalità.
Utilizzare le intestazioni in modo efficace
Innanzitutto, ribadiamo un punto precedente: le pratiche dell'ordine DOM, non solo per l'ordine di messa a fuoco, ma anche per l'ordine degli screen reader. Quando sperimenti con gli screen reader come VoiceOver, NVDA, JAWS e ChromeVox, scoprirai che l'elenco delle intestazioni segue l'ordine DOM anziché quello visivo.
Questo è vero 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 si basa quindi direttamente sull'ordine DOM. Ciò significa che una struttura di intestazioni 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 menziona la struttura delle intestazioni come tecnica per aggirare blocchi di contenuti
- 2.4.6 spiega alcuni dettagli per scrivere intestazioni utili
- 2.4.10 afferma che "le singole sezioni di contenuti sono designate mediante 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 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
Anche se le pagine con intestazioni efficaci aiutano gli utenti di screen reader, esistono altri elementi che è possibile utilizzare per spostarsi nella pagina, ad esempio link, controlli modulo 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. In questo modo, gli hit 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, ecco alcuni pattern comuni che rendono i link difficili da trovare.
- Tag anchor senza attributi
href. Spesso utilizzati nelle applicazioni a pagina singola, questi target dei link causano problemi agli screen reader. Per scoprire di più, consulta questo articolo sulle app a pagina singola. - Pulsanti implementati con i link. Di conseguenza, lo screen reader interpreta il contenuto come un link e la funzionalità del pulsante viene persa. In questi casi, sostituisci l'anchor tag con un pulsante reale e applicagli lo stile appropriato.
- Immagini utilizzate come contenuti di link. A volte, le immagini collegate possono
essere inutilizzabili per gli screen reader. Per garantire che il link sia esposto correttamente alle
tecnologia assistiva, assicurati che l'immagine abbia il testo dell'attributo
alt.
Un testo di link di scarsa qualità rappresenta un altro problema. Il testo cliccabile, come "Scopri di più" o "Fai clic qui", non fornisce informazioni semantiche sulla destinazione del link. Per aiutare gli screen reader a fornire un contesto significativo sui link, utilizza un testo descrittivo come "scopri di più sul responsive design" o "guarda questo tutorial su tela".
Il rotore può anche recuperare un elenco di controlli modulo. Con questo elenco, i lettori possono cercare articoli specifici e accedervi direttamente.
Un errore comune degli screen reader è la pronuncia. Ad esempio, uno screen reader potrebbe pronunciare "Udacity" come "oo-dacity" o 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 stranezza e ne tengono conto.
Alcuni sviluppatori cercano di migliorare questa situazione fornendo solo testo scritto foneticamente per lo screen reader. Ecco una semplice regola per l'ortografia fonetica: non farlo, ma peggiora il problema. Se, ad esempio, un utente sta usando un display braille, la parola sarà scritta in modo errato, generando maggiore confusione. Gli screen reader consentono di pronunciare le parole, quindi lascia che sia il lettore a controllare la propria esperienza e a 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 un insieme di punti di riferimento di navigazione forniti da elementi di punti di riferimento 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 specificamente indizi strutturali nella pagina
senza forzare gli stili integrati (cosa che dovresti fare comunque con CSS).
Gli elementi semantici strutturali sostituiscono più blocchi div ripetitivi e offrono un modo più chiaro e descrittivo per esprimere in modo intuitivo la struttura della pagina sia per gli autori che per i lettori.