Affinché uno screen reader possa presentare all'utente un'interfaccia utente vocale, gli elementi significativi devono avere etichette o alternative di testo appropriate. Un'etichetta o un testo alternativo conferisce a un elemento il suo nome accessibile, una delle proprietà chiave per esprimere la semantica dell'elemento nell'albero di accessibilità.
Quando il nome di un elemento viene combinato con il suo ruolo, fornisce all'utente il contesto per capire con quale tipo di elemento sta interagendo e come viene rappresentato nella pagina. Se un nome non è presente, lo screen reader annuncia solo il ruolo dell'elemento. Immagina di navigare in una pagina e di sentire "pulsante", "casella di controllo", "immagine" senza alcun contesto aggiuntivo. Per questo motivo, le etichette e le alternative di testo sono fondamentali per un'esperienza buona e accessibile.
Controllare il nome di un elemento
Puoi controllare il nome accessibile di un elemento in Chrome DevTools:
- Fai clic con il tasto destro del mouse su un elemento e scegli Ispeziona. Si aprirà il riquadro Elementi di DevTools.
- Nel riquadro Elementi, cerca il riquadro Accessibilità. Potrebbe essere nascosto
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 portano allo stesso risultato: assegnare a un
elemento il suo nome accessibile.
Controllare i nomi mancanti
Esistono diversi modi per aggiungere un nome accessibile a un elemento, a seconda del tipo. La tabella seguente elenca i tipi di elementi più comuni che richiedono nomi e link accessibili alle 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"> elementi
|
Includi alternative di testo per immagini e oggetti |
<object> elementi
|
Includi alternative di testo per immagini e oggetti |
| Pulsanti | Pulsanti ed etichette dei link |
| Link | Pulsanti ed etichette dei link |
| Elementi del modulo | Etichettare gli elementi del modulo |
Etichettare documenti e frame
Ogni pagina deve avere un elemento
title
che spieghi brevemente l'argomento della pagina. L'elemento title fornisce
alla pagina il suo nome accessibile. Quando uno screen reader entra nella pagina, questo è il
primo testo annunciato.
Ad esempio, la pagina seguente ha il titolo "Mary's Maple Bar Fast-Baking Recipe":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Allo stesso modo, tutti gli elementi frame o iframe devono avere attributi title:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Sebbene i contenuti di un iframe possano contenere 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. In questo modo
l'utente può decidere se entrare nel frame o bypassarlo.
Includere alternative di testo per immagini e oggetti
Un img deve sempre essere accompagnato da un attributo
alt
per assegnare all'immagine il nome accessibile. Se l'immagine non viene caricata, il
testo alt viene utilizzato come segnaposto, in modo che gli utenti possano capire cosa
stava cercando di comunicare l'immagine.
Scrivere un buon testo alt è un'arte, ma ci sono alcune linee guida
che puoi seguire:
- Determina se l'immagine fornisce contenuti che altrimenti sarebbero difficili da ottenere dalla lettura del testo circostante.
- In questo caso, trasmetti 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 racchiusa in un link deve utilizzare l'attributo alt di img per descrivere
la pagina a cui 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>
Allo stesso modo, se un elemento <input type="image"> viene utilizzato per creare un pulsante
immagine, deve contenere il 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>, in genere utilizzati per incorporamenti come Flash, PDF o ActiveX, devono contenere un testo alternativo. Come per le immagini, questo testo viene
visualizzato se il rendering dell'elemento non va a buon fine. Il testo alternativo viene inserito all'interno dell'elemento
object come testo normale, ad esempio "Report annuale" di seguito:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etichettare pulsanti e link
I pulsanti e i link sono spesso fondamentali per l'esperienza di un sito ed è importante che entrambi abbiano nomi accessibili.
Pulsanti
Un elemento button tenta sempre di calcolare il proprio nome accessibile utilizzando i propri
contenuti di testo. Per i pulsanti che non fanno parte di un form, scrivere un'azione chiara come contenuto di testo potrebbe essere tutto ciò che ti serve per creare un nome accessibile e valido.
<button>Book Room</button>
Un'eccezione comune a questa regola sono i pulsanti icona. Un pulsante con icona può utilizzare un'immagine o un carattere icona per fornire i contenuti di testo 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 con icone, può essere utile assegnare loro un nome accessibile
esplicito 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
Come i pulsanti, i link ottengono il nome accessibile principalmente dal contenuto di testo. Un buon trucco quando crei un link è inserire il testo più significativo nel link stesso, anziché parole di riempimento come "Qui" o "Leggi altro".
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 della pagina. Se i link sono pieni di testo segnaposto ripetitivo, queste scorciatoie diventano molto meno utili:
Etichettare 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 di 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 etichetta
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- In alternativa, utilizza l'attributo
fordell'etichetta e fai riferimento all'attributoiddell'elemento.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Quando la casella di controllo è stata etichettata correttamente, lo screen reader può segnalare che l'elemento ha il ruolo di casella di controllo, è selezionato e si chiama "Ricevi offerte promozionali?", come in questo esempio di VoiceOver:
