Il ruolo della semantica nella navigazione nelle pagine
Hai imparato cos'è la semantica e le indizi, nonché come le tecnologie per la disabilità utilizzano nell'albero dell'accessibilità per creare un'esperienza utente alternativa. Come puoi notare, la scrittura di codice HTML espressivo e semantico offre accessibilità con il minimo sforzo, in quanto molti elementi standard hanno sia la semantica e il comportamento di supporto integrati.
In questa lezione ci occuperemo di alcuni aspetti semantici meno ovvi, agli utenti di screen reader, soprattutto per quanto riguarda la navigazione. In una semplice pagina con molti controlli ma non molti contenuti, è facile scansionare la pagina per trovare di cui hai bisogno. Ma su una pagina ricca di contenuti, ad esempio una voce di Wikipedia o una notizia non è pratico leggere tutto dall'alto verso il basso; tu devono trovare un modo per navigare tra i contenuti in modo efficiente.
Gli sviluppatori spesso hanno la convinzione errata che gli screen reader siano noiosi e lenti o che tutti gli elementi sullo schermo debbano essere attivati lettore per trovarlo. Spesso non è così.
Gli utenti di screen reader si affidano spesso a un elenco di intestazioni per individuare le informazioni. Più alta gli screen reader offrono modi semplici per isolare e scansionare un elenco di intestazioni di pagina, un una funzionalità importante chiamata rotore. Vediamo come utilizzare le intestazioni HTML in modo efficace per supportare questa funzionalità.
Utilizzare le intestazioni in modo efficace
Innanzitutto, ribadiamo un punto precedente: Ordine DOM importanti, non solo per ma per l'ordine dello screen reader. Quando fai esperimenti con gli screen reader come VoiceOver, NVDA, JAWS e ChromeVox, l'elenco delle intestazioni l'ordine DOM anziché l'ordine visivo.
Questo è vero per gli screen reader in generale. Poiché gli screen reader interagiscono l'albero dell'accessibilità, che si basa sull'albero DOM, l'ordine percepito da uno screen reader si basa quindi direttamente sull'ordine DOM. Questo è che una struttura di intestazioni appropriata è più importante che mai.
Nella maggior parte delle pagine strutturate, i livelli di intestazione sono nidificati per indicare relazioni padre-figlio tra i blocchi di contenuti. Il WebAIM elenco di controllo fa ripetutamente riferimento a questo tecnica.
- 1.3.1 menziona "Il markup semantico è utilizzato per designare le intestazioni"
- 2.4.1 menziona la struttura delle intestazioni come tecnica per aggirare blocchi di contenuti
- 2.4.6 illustra 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 appositamente accessibile solo agli screen reader e alle 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 le intestazioni quando il design visivo non richiede né lascia spazio per un'intestazione visibile.
Altre opzioni di navigazione
Anche se le pagine con intestazioni efficaci aiutano gli utenti di screen reader, ci sono altri elementi utilizzabili per spostarsi nella pagina, tra cui link, modulo controlli e punti di riferimento.
I lettori possono utilizzare la funzione rotore dello screen reader (un modo semplice per isolare e esegui la scansione di un elenco di intestazioni di pagina) per accedere a un elenco di link nella pagina. A volte, come su un wiki, sono presenti molti link, quindi il lettore potrebbe cercare un all'interno dei link. In questo modo, gli hit vengono limitati ai link che contengono anziché ogni singola occorrenza del termine nella pagina.
Questa funzionalità è utile solo se lo screen reader riesce a trovare i link e i link di testo sia significativo. Ad esempio, di seguito sono riportati alcuni pattern comuni che rendono i link difficili da trovare.
- Tag anchor senza attributi
href. Spesso utilizzati nelle pagine singole applicazioni, questi target dei link causano problemi agli screen reader. Puoi Scopri di più in questo articolo sulle app a pagina singola. - Pulsanti implementati con i link. Per questo motivo lo screen reader interpretare i contenuti come link e la funzionalità del pulsante viene persa. Per in questi casi, sostituisci l'anchor tag con un pulsante reale e applicagli uno stile in modo 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 a
tecnologie per la disabilità, assicurati che nell'immagine sia presente il testo dell'attributo
alt.
Un testo di link di scarsa qualità rappresenta un altro problema. Testo cliccabile come "scopri di più" o "fai clic su qui" non fornisce informazioni semantiche sulla posizione del link. Utilizza invece Testo descrittivo, ad esempio "scopri di più sul reattivo design" o "visualizza questa tela tutorial" per aiutare gli screen reader a fornire un contesto significativo sui link.
Il rotore può anche recuperare un elenco di controlli modulo. Utilizzando questo elenco, i lettori possono cercare elementi specifici e accedere direttamente a questi.
Un errore comune degli screen reader è la pronuncia. Ad esempio, una schermata reader potrebbe pronunciare "Udacity" "oo-dacity" oppure leggi un numero di telefono come 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 la apprezzano considerazione.
Alcuni sviluppatori cercano di migliorare questa situazione fornendo servizi scritto foneticamente. Ecco una semplice regola per l'ortografia fonetica: non farlo: non fa altro che peggiorare il problema. Se, ad esempio, un utente utilizza un display braille, la parola sarà scritta in modo errato, con un conseguente aumento confusione. Gli screen reader consentono di pronunciare le parole, quindi lasciale allo di 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 trova i contenuti principali e una serie di punti di riferimento di navigazione forniti da HTML elementi di riferimento.
In HTML5 sono stati introdotti alcuni nuovi elementi che aiutano a definire la struttura semantica
della pagina, inclusi 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 semantici strutturali sostituiscono più blocchi div ripetitivi, e
Fornire un modo più chiaro e descrittivo per esprimere in modo intuitivo la struttura della pagina
sia per gli autori che per i lettori.