Ti è mai capitato di chiederti come le tecnologie per la disabilità, ad esempio uno screen reader, sanno cosa annunciare agli utenti? La risposta è che queste tecnologie si basano sugli sviluppatori che eseguono il markup delle loro pagine con HTML semantico. Ma cosa sono la semantica e come vengono usate dagli screen reader?
Convenienza e semantica
Prima di approfondire la semantica, è utile capire un altro termine: affordanza. Un'agevolazione è qualsiasi oggetto che offre o offre all'utente l'opportunità di compiere un'azione. Un esempio classico è la teiera:
Non è necessario un manuale di istruzioni per questa teiera, ma la sua struttura fisica comunica all'utente come deve essere usata. Ha un handle e, poiché hai visto altri oggetti in tutto il mondo con handle simili, puoi dedurre come dovresti prenderlo e utilizzarlo.
Quando sviluppiamo le interfacce utente grafiche, utilizziamo elementi come CSS per aggiungere affordanze visive alla nostra UI. Ad esempio, potresti assegnare a un pulsante un'ombra e un bordo in modo che assomigli a un pulsante reale.
Tuttavia, se l'utente non è in grado di vedere lo schermo, non gli verranno comunicate queste caratteristiche visive. Devi quindi assicurarti che la tua UI sia costruita in modo da trasmettere le stesse offerte alla tecnologia per la disabilità. Questa esposizione non visiva delle caratteristiche di un elemento UI è chiamata semantica.
Utilizza HTML semantico
Il modo più semplice per trasmettere una semantica corretta è usare elementi HTML con ricchi di semantici.
Con CSS, puoi applicare uno stile agli elementi <div> e <button> in modo che trasmettano le stesse caratteristiche visive, ma le due esperienze sono molto diverse quando si utilizza uno screen reader.
<div> è solo un elemento di raggruppamento generico,
pertanto uno screen reader annuncia solo i contenuti testuali di <div>.
<button> viene annunciato come un "pulsante", un indicatore molto più forte per l'utente che può interagire.
La soluzione più semplice e spesso migliore a questo problema è evitare del tutto controlli interattivi personalizzati.
Ad esempio, sostituisci un elemento <div> che funge da pulsante
con un elemento <button> effettivo.
Proprietà semantiche e albero dell'accessibilità
In generale, ogni elemento HTML avrà alcune delle seguenti proprietà semantiche:
- Un ruolo o tipo
- Un nome
- (Facoltativo) Un valore
- Uno state (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 enunciano il nome di un elemento seguito dal relativo ruolo, ad esempio "Registrati, pulsante". L'algoritmo che determina il nome di un elemento tiene conto, ad esempio, della presenza di contenuti testuali all'interno dell'elemento, dell'eventuale presenza di attributi come title o placeholder, dell'associazione o meno dell'elemento a un elemento <label> effettivo e del fatto che l'elemento abbia attributi ARIA come aria-label e aria-labelledby.
Alcuni elementi possono avere un value. Ad esempio, <input type="text"> potrebbe
avere un valore che riflette ciò che l'utente ha digitato nel campo di testo.
Alcuni elementi possono anche avere uno state, che trasmette 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 dell'accessibilità
Per ogni nodo nel DOM, il browser determina se il nodo è semanticamente "interessante" e lo aggiunge all'albero dell'accessibilità. Quando le tecnologie per la disabilità, come uno screen reader, forniscono un'interfaccia utente alternativa all'utente, spesso lo fanno tramite un albero dell'accessibilità.
Con DevTools di Chrome puoi controllare le proprietà semantiche di un elemento ed esplorarne la posizione nell'albero dell'accessibilità.
Passaggi successivi
Una volta che hai acquisito familiarità con la semantica e come favoriscono la navigazione con lo screen reader, non puoi fare a meno di osservare le pagine che crei in modo diverso. Nella sezione successiva fare un passo indietro e considerare come è possibile visualizzare l'intero profilo di una pagina utilizzando intestazioni e punti di riferimento efficaci.