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 assegnano a un elemento il relativo 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 relativo ruolo, fornisce all'utente il contesto necessario per capire con quale tipo di elemento sta interagendo e come è rappresentato nella pagina. Se non è presente un nome, lo screen reader annuncia solo il ruolo dell'elemento. Immagina di provare a navigare in una pagina e di sentire "pulsante", "casella di controllo", "immagine" senza alcun altro contesto. Ecco perché le etichette e le alternative di testo sono fondamentali per un'esperienza buona e accessibile.
Controllare il nome di un elemento
È facile controllare il nome accessibile di un elemento utilizzando DevTools di Chrome:
- 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 visualizzando un img con il testo alt o un input con un
label, tutti questi scenari hanno lo stesso risultato: assegnare a un
elemento il nome accessibile.
Controlla se ci sono 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 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 | Includere alternative di testo per immagini e oggetti |
Elementi <input type="image">
|
Includere alternative di testo per immagini e oggetti |
Elementi <object>
|
Includere alternative di testo per immagini e oggetti |
| Pulsanti | Etichettare pulsanti e link |
| Link | Etichettare pulsanti e link |
| Elementi del modulo | Etichettare gli elementi del modulo |
Etichettare documenti e frame
Ogni pagina deve avere un elemento
title
che spieghi brevemente di cosa tratta la pagina. L'elemento title assegna alla pagina il nome accessibile. Quando uno screen reader accede alla pagina, questo è il primo testo che viene annunciato.
Ad esempio, la pagina seguente ha il titolo "Ricetta veloce per barrette di acero di Mary":
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Analogamente, 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 un proprio elemento title interno, solitamente uno screen reader si ferma al confine del frame e annuncia il ruolo dell'elemento ("frame") e il relativo nome accessibile, fornito dall'attributo title. In questo modo, l'utente può decidere se inserire il frame o ignorarlo.
Includi testo alternativo per immagini e oggetti
Un attributo 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 per consentire agli utenti di capire cosa stava cercando di comunicare l'immagine.
Scrivere un buon testo alt è un po' un'arte, ma ci sono alcune linee guida che puoi seguire:
- Determina se l'immagine fornisce contenuti che altrimenti sarebbero difficili da ottenere leggendo il testo circostante.
- In questo caso, comunica i contenuti nel modo più conciso possibile.
Se l'immagine ha solo una funzione decorativa e non fornisce contenuti utili, puoi assegnare un attributo alt="" vuoto per rimuoverla dall'albero di 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>
Analogamente, se viene utilizzato un elemento <input type="image"> per creare un pulsante con immagine, deve contenere un testo alt che descriva 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
Gli elementi <object>, che in genere vengono utilizzati per gli elementi incorporati come Flash, PDF o ActiveX, devono contenere anche un testo alternativo. Come per le immagini, questo testo viene visualizzato se il rendering dell'elemento non riesce. 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 ben accessibili.
Pulsanti
Un elemento button tenta sempre di calcolare il proprio nome accessibile utilizzando i suoi contenuti di testo. Per i pulsanti che non fanno parte di un form, scrivere un'azione chiara come contenuto del testo potrebbe essere tutto ciò che ti serve per creare un nome ben accessibile.
<button>Book Room</button>
Un'eccezione comune a questa regola sono i pulsanti con icone. 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 utilizzi i pulsanti con icone, può essere utile assegnare loro un nome esplicito e 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
Come per i pulsanti, i link ottengono il nome accessibile principalmente dal testo. Un bel trucco per creare un link è inserire il testo più significativo nel link stesso, anziché parole di riempimento 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>.
Questo è particolarmente utile per gli screen reader che offrono scorciatoie per elencare tutti i link presenti nella pagina. Se i link sono pieni di testo di riempimento 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 con mouse o touchscreen. Per associare un'etichetta a un elemento:
- Inserisci 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 aiddell'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, è in uno stato selezionato e si chiama "Vuoi ricevere offerte promozionali?", come nell'esempio di VoiceOver riportato di seguito:
TODO: DevSite - Valutazione di Pensa e controlla