Semantica e navigazione dei contenuti

Il ruolo della semantica nella navigazione nelle pagine

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Hai imparato di più su affordance, semantica e su come le tecnologie per la disabilità utilizzano la struttura ad albero dell'accessibilità per creare un'esperienza utente alternativa per i propri 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 incorporati.

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.

Spesso gli sviluppatori hanno 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 trovare 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 possiamo utilizzare le intestazioni HTML in modo efficace 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 vale 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 principali e secondari. 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 i 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 colloca deliberatamente alcune intestazioni fuori dallo schermo per renderle accessibili solo a screen reader e 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, può essere un buon modo per inserire le intestazioni quando il design visivo 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 riesce a 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 l'argomento 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. Per questi casi, sostituisci il tag anchor con un pulsante reale e applicagli lo 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. Tramite 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 in modo specifico indizi strutturali nella pagina senza forzare alcun stile integrato (cosa che dovresti fare comunque con il 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.