Etichette e alternative di testo

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.

È facile controllare il nome accessibile di un elemento utilizzando DevTools di Chrome:

  1. Fai clic con il tasto destro del mouse su un elemento e scegli Ispeziona. Si aprirà il riquadro Elementi di DevTools.
  2. Nel riquadro Elementi, cerca il riquadro Accessibilità. Potrebbe essere nascosto dietro un simbolo ».
  3. Nel menu a discesa Proprietà calcolate, cerca la proprietà Nome.
Riquadro Accessibilità di DevTools che mostra il nome calcolato di un pulsante.

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.

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:

  1. Determina se l'immagine fornisce contenuti che altrimenti sarebbero difficili da ottenere leggendo il testo circostante.
  2. 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à.

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>

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 modulo mobile con un pulsante &quot;Prenota camera&quot;.

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:

Un pulsante con icona di allineamento a sinistra.

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>

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ù".

Non sufficientemente descrittivo
Check out our guide to web performance <a href="/guide">here</a>.
Contenuti utili.
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:

Il menu dei link di VoiceOver è stato completato con la parola &quot;qui&quot;.
Esempio di VoiceOver, uno screen reader per macOS, che mostra il menu di navigazione tramite link.

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 for dell'etichetta e fai riferimento a id dell'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:

Output di testo di VoiceOver che mostra &quot;Vuoi ricevere offerte promozionali?&quot;

TODO: DevSite - Valutazione di Pensa e controlla