Ti è mai capitato di chiederti in che modo sono presenti tecnologie per la disabilità, ad esempio lettore, sa cosa annunciare agli utenti? La risposta è che queste tecnologie fare affidamento sugli sviluppatori che eseguono il markup delle loro pagine con HTML semantico. Ma quali sono la semantica e come vengono usati dagli screen reader?
Vantaggi e semantica
Prima di approfondire la semantica, è utile comprendere un altro termine: abbonamenti. Un invito è qualsiasi oggetto che offre, o offre, al suo utente l'opportunità di eseguire un'azione. Un esempio classico è la bollitore:
Questa teiera non richiede un manuale di istruzioni. al suo design fisico comunica all'utente come deve essere gestito. Ha un handle e dato che hai visto altri oggetti al mondo con handle simili, puoi dedurre come dovresti prenderlo e usarlo.
Quando creiamo le Graphic User Interface, utilizziamo elementi come i CSS per aggiungere contenuti visivi gli inviti all'azione. Ad esempio, puoi assegnare a un pulsante un'ombra in modo che assomiglia a un pulsante reale nel mondo reale.
Ma se un utente non è in grado di vedere lo schermo, queste intuizioni visive non comunicarglielo. Devi quindi assicurarti che la UI costruiti in modo da poter trasmettere queste stesse "aziendenze" agli assistenti tecnologia. Questa esposizione non visiva degli elementi dell'interfaccia utente la sua semantica.
Usa HTML semantico
Il modo più semplice di trasmettere una semantica corretta è utilizzare un codice HTML semanticamente ricco elementi.
Con CSS, è possibile
per applicare uno stile agli elementi <div> e <button> in modo che trasmettano le stesse caratteristiche visive,
ma quando si usa uno screen reader le due esperienze sono molto diverse.
Un <div> è solo un elemento di raggruppamento generico,
quindi uno screen reader annuncia soltanto i contenuti testuali dell'<div>.
Il <button> viene annunciato come "pulsante",
indicano all'utente
che è qualcosa con cui può interagire.
Il modo più semplice
e spesso la soluzione migliore a questo problema.
è evitare del tutto i controlli interattivi personalizzati.
Ad esempio, sostituisci un <div> che ha la funzione di un pulsante
con un <button> effettivo.
Proprietà semantiche e albero dell'accessibilità
In generale, ogni elemento HTML presenta alcune delle seguenti caratteristiche proprietà:
- Un ruolo o un tipo.
- Un nome
- (Facoltativo) Un valore
- (Facoltativo) Uno stato
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 è l'etichetta calcolata. Gli screen reader annunciano
il nome di un elemento seguito dal suo ruolo, ad esempio "Registrati, pulsante." L'algoritmo
che determina il nome di un elemento, ad esempio la presenza di testo
contenuti all'interno dell'elemento, con o meno attributi come title
o placeholder, indipendentemente dal fatto che l'elemento sia associato o meno a un
<label> e se l'elemento ha attributi ARIA, come
aria-label e aria-labelledby.
Alcuni elementi possono avere un valore. Ad esempio, <input type="text"> potrebbe
contengono un valore che riflette ciò che l'utente ha digitato nel campo di testo.
Alcuni elementi possono anche avere uno stato, che indica il loro stato attuale.
Ad esempio, un elemento <select> può essere in uno stato espanso o in una
compresso, a seconda che sia aperto o chiuso.
L'albero dell'accessibilità
Per ogni nodo nel DOM, il browser determina se nodo è semanticamente "interessante" e la aggiunge al piano di gestione dell'accessibilità ad albero. Quando le tecnologie per la disabilità, come uno screen reader, forniscono un'interfaccia utente alternativa all'utente, spesso lo fa percorrendo questo albero dell'accessibilità.
Con DevTools di Chrome puoi esaminare la semantica di un elemento proprietà ed esplorare la sua posizione nell'albero dell'accessibilità.
Passaggi successivi
Dopo aver imparato un po' di semantica e come facilitano la navigazione con lo screen reader, non puoi fare a meno di esaminare le pagine che crei in modo diverso. Nella sezione successiva, faremo un passo indietro e considereremo come può essere comunicati utilizzando intestazioni e punti di riferimento efficaci.