Ti sei mai chiesto come le tecnologie per la disabilità, come uno screen reader, sanno cosa annunciare agli utenti? La risposta è che queste tecnologie si basano sul markup delle pagine da parte degli sviluppatori con HTML semantico. Ma che cosa sono la semantica e come la utilizzano gli screen reader?
Possibilità e semantica
Prima di approfondire la semantica, è utile comprendere un altro termine: affordance. Un'affordance è un oggetto che offre all'utente la possibilità di eseguire un'azione. Un esempio classico è la teiera:
Questa teiera non ha bisogno di un manuale di istruzioni, ma il suo design fisico trasmette all'utente come deve essere utilizzata. Ha un manico e, poiché hai visto altri oggetti con manici simili, puoi dedurre come sollevarlo e utilizzarlo.
Quando creiamo interfacce utente grafiche, utilizziamo elementi come il CSS per aggiungere affordance visuali alla nostra UI. Ad esempio, puoi applicare a un pulsante un'ombra interna e un bordino in modo che assomigli a un pulsante reale.
Tuttavia, se un utente non è in grado di vedere lo schermo, queste affordance visive non verranno comunicate. Pertanto, devi assicurarti che l'interfaccia utente sia costruita in modo da trasmettere le stesse funzionalità alla tecnologia di assistenza. Questa esposizione non visiva delle affordance di un elemento dell'interfaccia utente è chiamata semantica.
Utilizza HTML semantico
Il modo più semplice per trasmettere una semantica corretta è utilizzare elementi HTML semanticamente avanzati.
Con CSS è possibile impostare gli stili degli elementi <div> e <button> in modo che trasmettano le stesse affordance visive, ma le due esperienze sono molto diverse quando si utilizza uno screen reader.
Un <div> è solo un elemento di raggruppamento generico, quindi uno screen reader annuncia solo il contenuto di testo del <div>.
<button> viene annunciato come "pulsante",
un segnale molto più forte per l'utente che si tratta di un elemento con cui può interagire.
La soluzione più semplice e spesso migliore a questo problema è evitare del tutto i controlli interattivi personalizzati.
Ad esempio, sostituisci un <div> che agisce come un pulsante con un <button> reale.
Proprietà semantiche e albero di accessibilità
In generale, ogni elemento HTML avrà alcune delle seguenti proprietà semantiche:
- Un ruolo o un tipo
- Un nome
- Un valore (facoltativo)
- Uno stato (facoltativo)
Il ruolo di un elemento ne descrive il tipo, ad esempio "pulsante", "input" o anche solo "gruppo" per elementi come div e span.
Il nome di un elemento è la relativa etichetta calcolata. Gli screen reader di solito annunciano il nome di un elemento seguito dal suo ruolo, ad esempio "Registrati, pulsante". L'algoritmo
che determina il nome di un elemento prende in considerazione fattori come la presenza di contenuti text
all'interno dell'elemento, la presenza o meno di attributi come title
o placeholder, l'associazione o meno dell'elemento a un elemento
<label> effettivo e la presenza o meno di attributi ARIA come
aria-label e aria-labelledby.
Alcuni elementi possono avere un valore. Ad esempio, <input type="text"> può avere un valore che riflette ciò che l'utente ha digitato nel campo di testo.
Alcuni elementi possono anche avere uno stato, che ne indica lo stato attuale.
Ad esempio, un elemento <select> può essere in uno stato espandito o collegato, a seconda che sia aperto o chiuso.
L'albero di accessibilità
Per ogni nodo del DOM, il browser determina se il nodo è semanticamente "interessante" e lo aggiunge alla struttura ad albero dell'accessibilità. Quando una tecnologia per la disabilità, come uno screen reader, fornisce un'interfaccia utente alternativa all'utente, spesso lo fa esaminando questa struttura ad albero di accessibilità.
Con Chrome DevTools puoi ispezionare le proprietà semantiche di un elemento e esplorarne la posizione nella struttura ad albero di accessibilità.
Passaggi successivi
Una volta che conosci un po' di semantica e il modo in cui aiuta la navigazione con gli screen reader, non puoi fare a meno di guardare le pagine che crei in modo diverso. Nella sezione successiva, faremo un passo indietro e vedremo come trasmettere l'intera struttura di una pagina utilizzando intestazioni e punti di riferimento efficaci.