Per consentire a uno screen reader di presentare un'interfaccia utente vocale, gli elementi significativi devono avere etichette o alternative di testo appropriate. Un'alternativa di etichetta o testo fornisce a un elemento il suo nome accessibile, una delle proprietà chiave per esprimere la semantica dell'elemento nell'albero dell'accessibilità.
Quando il nome di un elemento viene combinato con il ruolo dell'elemento, fornisce all'utente un contesto che gli permette di capire con quale tipo di elemento sta interagendo e come è rappresentato sulla pagina. Se non c'è un nome, uno screen reader annuncia solo il ruolo dell'elemento. Immagina di cercare di navigare in una pagina e ascoltare i termini "pulsante", "casella di controllo" o "immagine" senza alcun contesto aggiuntivo. È per questo che le alternative di etichettatura e testo sono fondamentali per un'esperienza positiva e accessibile.
Esaminare il nome di un elemento
È facile controllare il nome accessibile di un elemento utilizzando gli strumenti DevTools di Chrome:
- Fai clic con il tasto destro del mouse su un elemento e scegli Ispeziona. Si apre il riquadro Elementi di DevTools.
- Cerca il riquadro Accessibilità nel riquadro Elementi. Potrebbe essere nascosta
dietro un simbolo
». - Nel menu a discesa Proprietà calcolate, cerca la proprietà Nome.
Che tu stia esaminando un img con testo alt o un input con un
label, tutti questi scenari avranno lo stesso risultato: assegnare a un
elemento il suo nome accessibile.
Controlla se mancano nomi
Esistono diversi modi per aggiungere un nome accessibile a un elemento, a seconda del suo tipo. Nella tabella seguente sono elencati i tipi di elementi più comuni che richiedono nomi accessibili e link a spiegazioni su come aggiungerli.
| Tipo di elemento | Come aggiungere un nome |
|---|---|
| Documento HTML | Etichettare documenti e frame |
Elementi <frame> o <iframe>
|
Etichettare documenti e frame |
| Elementi immagine | Includi alternative di testo per immagini e oggetti |
<input type="image"> elemento
|
Includi alternative di testo per immagini e oggetti |
<object> elemento
|
Includi alternative di testo per immagini e oggetti |
| Pulsanti | Pulsanti e link delle etichette |
| Link | Pulsanti e link delle etichette |
| Elementi del modulo | Etichettare gli elementi del modulo |
Etichetta documenti e frame
Ogni pagina dovrebbe avere un elemento title che spieghi brevemente l'argomento della pagina. L'elemento title assegna alla pagina un nome accessibile. Quando uno screen reader entra nella pagina, questo
è il primo testo che viene annunciato.
Ad esempio, il titolo della pagina seguente è "Ricetta rapida di Mary's Maple Bar":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Allo stesso modo, qualsiasi elemento frame o iframe deve avere attributi title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Mentre i contenuti di iframe possono includere il proprio elemento title interno, uno screen reader di solito si ferma al limite del frame e annuncia il ruolo dell'elemento, "frame" e il suo nome accessibile, fornito dall'attributo title. Questo consente all'utente di decidere se entrare nel frame o aggirarlo.
Includi alternative di testo per immagini e oggetti
Un elemento img deve sempre essere accompagnato da un attributo
alt
per conferire all'immagine il suo nome accessibile. Se l'immagine non viene caricata, il testo alt viene utilizzato come segnaposto in modo che gli utenti abbiano un'idea di ciò che l'immagine stava cercando di trasmettere.
Scrivere un testo alt efficace è un po' come un normale testo, ma puoi seguire un paio di linee guida:
- Determina se l'immagine fornisce contenuti che sarebbero altrimenti difficili da recuperare dalla lettura del testo circostante.
- Se è così, comunica i contenuti nel modo più conciso possibile.
Se l'immagine funge da decorazione e non fornisce contenuti utili, puoi assegnarle un attributo alt="" vuoto per rimuoverla dall'albero dell'accessibilità.
Immagini come link e input
Un'immagine inserita in un link deve utilizzare l'attributo alt di img per descrivere la pagina alla quale l'utente verrà indirizzato se fa clic sul link:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Analogamente, se un elemento <input type="image"> viene utilizzato per creare un pulsante
immagine, questo dovrebbe contenere testo alt che descrive l'azione che si verifica quando
l'utente fa clic sul pulsante:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Oggetti incorporati
Anche gli elementi <object>, che vengono generalmente utilizzati per incorporamenti come Flash, PDF o ActiveX, devono contenere testo alternativo. Come nel caso delle immagini, questo testo
viene visualizzato se l'elemento non riesce a essere visualizzato. Il testo alternativo viene inserito nell'elemento
object come testo normale, ad esempio "Report annuale" di seguito:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etichetta pulsanti e link
Pulsanti e link sono spesso fondamentali per l'esperienza di un sito ed è importante che entrambi abbiano nomi accessibili e validi.
Pulsanti
Un elemento button tenta sempre di calcolare il suo nome accessibile utilizzando i suoi
contenuti di testo. Per i pulsanti che non fanno parte di un form, per creare un nome facilmente accessibile potrebbe essere sufficiente scrivere un'azione chiara in quanto contenuto di testo.
<button>Book Room</button>
Un'eccezione comune a questa regola sono i pulsanti con le icone. Un pulsante icona può utilizzare il carattere di un'immagine o un'icona per fornire i contenuti testuali del pulsante. Ad esempio, i pulsanti utilizzati in un editor WYSIWYG (What You See Is What You Get) per formattare il testo sono in genere solo simboli grafici:
Quando lavori con i pulsanti icona, può essere utile assegnare loro un nome esplicito
accessibile utilizzando l'attributo aria-label. aria-label sostituisce qualsiasi contenuto di testo all'interno del pulsante, consentendoti di descrivere chiaramente l'azione a chiunque utilizzi uno screen reader.
<button aria-label="Left align"></button>
Link
Analogamente ai pulsanti, i link prendono il nome accessibile principalmente dai contenuti testuali. Un buon trucco durante la creazione di un link è inserire la porzione di testo più significativa nel link stesso, anziché inserire intercalari come "Qui" o "Leggi di più".
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Ciò è particolarmente utile per gli screen reader che offrono scorciatoie per elencare tutti i link sulla pagina. Se i link sono pieni di testo riempitivo ripetitivo, le scorciatoie da tastiera diventano molto meno utili:
Etichetta gli elementi del modulo
Esistono due modi per associare un'etichetta a un elemento del modulo, ad esempio una casella di controllo. Entrambi i metodi fanno sì che il testo dell'etichetta diventi anche un target dei clic per la casella di controllo, il che è utile anche per gli utenti di mouse o touchscreen. Per associare un'etichetta a un elemento:
- Posiziona l'elemento di input all'interno di un elemento di etichetta
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- In alternativa, utilizza l'attributo
fordell'etichetta e fai riferimento al valoreiddell'elemento.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Se la casella di controllo è stata etichettata correttamente, lo screen reader può segnalare che l'elemento ha il ruolo di casella di controllo, è nello stato selezionato e ha il nome "Ricevi offerte promozionali?" come nell'esempio di VoiceOver riportato di seguito:
DA FARE: Sito per sviluppatori - Test Pensa e verifica