Ti sei mai chiesto come le tecnologie per la disabilità, come uno screen reader, sappiano cosa annunciare agli utenti? La risposta è che queste tecnologie si basano sul markup delle pagine con HTML semantico da parte degli sviluppatori. Ma cosa sono la semantica e come viene utilizzata dagli screen reader?
Affordance e semantica
Prima di entrare nel dettaglio della semantica, è utile comprendere le affordance. Un'affordance è qualsiasi oggetto che offre all'utente l'opportunità di eseguire un'azione. Un esempio classico è la teiera:
Questa teiera non ha bisogno di un manuale di istruzioni. Il suo design fisico indica all'utente come deve essere utilizzato. Ha una maniglia e, poiché hai visto altri oggetti nel mondo con maniglie simili, puoi dedurre come prenderlo e usarlo.
Quando creiamo interfacce utente grafiche, utilizziamo CSS per aggiungere affordance visive alla nostra interfaccia. Ad esempio, puoi aggiungere un'ombra e un bordo a un pulsante in modo che assomigli a un pulsante reale.
Tuttavia, per gli utenti che non riescono a vedere lo schermo, queste affordance visive non vengono trasmesse. Pertanto, devi assicurarti che la tua interfaccia sia costruita in modo da trasmettere queste stesse affordance alla tecnologia assistiva. Questa esposizione non visiva delle affordance di un elemento dell'interfaccia utente è chiamata semantica.
Scrivere codice HTML semantico
Il modo più semplice per trasmettere una semantica corretta è utilizzare elementi HTML semanticamente ricchi.
Utilizzando CSS, è possibile applicare uno stile agli 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>.
Il <button> viene annunciato come "pulsante", un segnale molto più forte per l'utente
che indica che si tratta di un elemento con cui può interagire.
Spesso, la soluzione migliore a questo problema è evitare del tutto i controlli interattivi personalizzati. Ad esempio, sostituisci un <div> che funge da pulsante
con un <button> effettivo.
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 "button", "input" o
anche solo "group" per elementi come div e span.
Il nome di un elemento è la sua etichetta calcolata. Gli screen reader in genere annunciano
il nome di un elemento seguito dal suo ruolo, ad esempio "Registrati, pulsante". L'algoritmo
che determina il nome di un elemento tiene conto di fattori come la presenza di contenuti
di testo 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 potrebbero avere un valore. Ad esempio, <input type="text"> potrebbe
avere un valore che riflette ciò che l'utente ha digitato nel campo di testo.
Alcuni elementi potrebbero avere anche uno stato, che indica il loro stato attuale.
Ad esempio, un elemento <select> può essere in stato espanso o
compresso, a seconda che sia aperto o chiuso.
L'albero di accessibilità
Per ogni nodo nel DOM, il browser determina se il nodo è semanticamente "interessante" e lo aggiunge all'albero di accessibilità. Quando una tecnologia per la disabilità, come uno screen reader, fornisce un'interfaccia utente alternativa all'utente, spesso lo fa attraversando questo albero di accessibilità.
Con Chrome DevTools, puoi ispezionare le proprietà semantiche di un elemento ed esplorarne la posizione nell'albero dell'accessibilità.
Passaggi successivi
Una volta che avrai acquisito familiarità con la semantica e il modo in cui aiuta la navigazione con lo screen reader, non potrai fare a meno di guardare le pagine che crei in modo diverso. Nella prossima sezione, faremo un passo indietro e vedremo come l'intera struttura di una pagina può essere trasmessa utilizzando intestazioni e punti di riferimento efficaci.