Affinché uno screen reader presenti una UI pronunciata all'utente, elementi devono avere etichette o alternative di testo appropriate. Un'etichetta o un testo assegna a un elemento il suo nome accessibile, una delle proprietà chiave per esprimere la semantica degli elementi nell'albero dell'accessibilità.
Quando il nome di un elemento viene combinato con il suo ruolo, restituisce la contesto dell'utente, in modo che possa capire quale tipo di elemento sta interagendo come sono rappresentati sulla pagina. Se non è presente un nome, viene lo screen reader annuncia solo il ruolo dell'elemento. Immagina di tentare di navigare una pagina e la frase "button", "casella di controllo" "immagine" senza ulteriori contesto. Questo è il motivo per cui l'etichettatura e le alternative di testo sono fondamentali per una buona, un'esperienza accessibile.
Ispezionare 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 apre il riquadro DevTools Riquadro Elementi.
- Nel riquadro Elementi, cerca il riquadro Accessibilità. Potrebbe essere nascosto
dietro il simbolo
». - Nel menu a discesa Proprietà elaborate, cerca la proprietà Nome.
Sia che tu stia visualizzando un img con testo alt o un input con un
label, tutti questi scenari hanno lo stesso risultato: fornire una
il suo nome accessibile.
Verifica la presenza di 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 a immagini e oggetti . |
<input type="image"> elemento
|
Includere alternative di testo a immagini e oggetti . |
<object> elemento
|
Includere alternative di testo a immagini e oggetti . |
| Pulsanti | Assegna etichette a pulsanti e link |
| Link | Assegna etichette a pulsanti e link |
| Elementi del modulo | Etichetta gli elementi del modulo |
Etichetta documenti e frame
Ogni pagina deve avere una
title
che spiega brevemente l'argomento della pagina. L'elemento title fornisce
nome accessibile alla pagina. Quando uno screen reader accede alla pagina, si tratta della
il primo testo annunciato.
Ad esempio, la pagina seguente ha il titolo "Ricetta da forno rapido alla barretta d'acero di Maria":
<!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 iframe possano contenere il proprio elemento title interno,
lo screen reader di solito si ferma al limite del frame e annuncia il testo
il ruolo "frame" e il nome accessibile, fornito dall'attributo title. Questo
permette all'utente di decidere se inserire o ignorare il frame.
Includere alternative di testo a immagini e oggetti
Un img deve sempre essere accompagnato da un elemento
alt
per assegnare all'immagine il suo nome accessibile. Se l'immagine non viene caricata,
Il testo alt viene utilizzato come segnaposto per consentire agli utenti di capire quale fosse l'immagine
cercando di trasmettere.
Scrivere un buon testo in alt è un'operazione semplice, ma ci sono un paio di linee guida
che puoi seguire:
- Stabilisci se l'immagine fornisce contenuti che altrimenti sarebbero difficili da non leggere il testo circostante.
- In tal caso, presenta i contenuti nel modo più conciso possibile.
Se l'immagine funge da decorazione e non fornisce contenuti utili,
puoi assegnargli un attributo alt="" vuoto per rimuoverlo dall'accessibilità
albero di Natale.
Immagini come link e input
Un'immagine racchiusa in un link deve usare l'attributo alt di img per descrivere
la pagina a cui verrà indirizzato l'utente 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'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
Elementi <object>, che in genere vengono utilizzati per incorporamenti come Flash, PDF o
ActiveX: deve contenere anche testo alternativo. Simile alle immagini, questo testo è
se l'elemento non viene visualizzato. Il testo alternativo deve essere inserito all'interno
Elemento object come testo normale, ad esempio "Report annuale" sotto:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Assegna etichette a pulsanti e link
I pulsanti e i link sono spesso fondamentali per l'esperienza di un sito e sono è importante che entrambi abbiano nomi validi e accessibili.
Pulsanti
Un elemento button tenta sempre di calcolare il proprio nome accessibile utilizzando
contenuti testuali. Per i pulsanti che non fanno parte di form, scrivi una dichiarazione chiara
perché i contenuti di testo potrebbero essere tutto ciò di cui avete bisogno per creare un'immagine
nome.
<button>Book Room</button>
Un'eccezione comune a questa regola sono i pulsanti icona. Un pulsante icona potrebbe utilizzare un un'immagine o un carattere di icona per fornire il contenuto di testo del pulsante. Ad esempio: i pulsanti usati in un editor WYSIWYG (What You See Is What You Get, WYSIWYG) per formattare sono generalmente solo simboli grafici:
Quando lavori con i pulsanti con icona, può essere utile dare loro una descrizione esplicita
nome accessibile utilizzando l'attributo aria-label. aria-label sostituisce qualsiasi
contenuti testuali all'interno del pulsante, che ti consentono di descrivere chiaramente l'azione a
chiunque usi uno screen reader.
<button aria-label="Left align"></button>
Link
Come i pulsanti, i link ricevono il nome accessibile principalmente dal testo contenuti. Un ottimo trucco durante la creazione di un link è mettere l'elemento più significativo di testo all'interno del link stesso, invece di intercalari come "Qui" oppure "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 dei link sulla pagina. Se i link sono pieni di testo di riempimento ripetitivo, questi le scorciatoie 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 una destinazione dei clic per la casella di controllo, utile anche per gli utenti di mouse o touchscreen. Per associare su un'etichetta con un elemento, in uno dei seguenti modi:
- 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 all'elementoiddell'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 stato selezionato e ha il nome "Ricevi offerte promozionali?" come nell'esempio di VoiceOver riportato di seguito:
DA FARE: DevSite - Valutazione Think and Check