Come scrivere buoni alt text per le immagini

A cosa serve l’alt text

L’alt text è l’alternativa testuale di un’immagine, scritta nell’attributo alt. Gli screen reader lo leggono ad alta voce, i display braille lo mostrano e il browser lo visualizza quando l’immagine non si carica. Anche i motori di ricerca possono usarlo. Lo standard web per l’accessibilità, le WCAG, chiede un’alternativa testuale che svolga la stessa funzione dell’immagine (criterio di successo 1.1.1, livello A).

L’idea chiave: l’alt text non è una didascalia, e nemmeno una descrizione dell’immagine fine a sé stessa. Dice cosa aggiunge l’immagine alla pagina. La stessa foto può richiedere alt text diversi su due pagine, o nessuno.

Quattro tipi di immagini

• Le immagini informative aggiungono significato: una foto, un’icona accanto a un numero di telefono, un diagramma. Scrivi un breve alt text che trasmetta quel significato.
• Le immagini funzionali stanno dentro link e pulsanti. L’alt text nomina l’azione o la destinazione, non l’immagine: 'Cerca' per una lente d’ingrandimento, 'Stampa questa pagina' per l’icona di una stampante.
• Le immagini decorative non aggiungono nulla: un bordo, uno spaziatore, un ornamento, o un’immagine che ripete solo il testo accanto. Dagli un attributo alt vuoto (alt="") così gli screen reader le saltano, oppure mettile nel foglio di stile come sfondo.
• Le immagini di testo sono l’ultima risorsa. Se ne serve una, l’alt text ripete le parole dell’immagine. Un logo che non è un link riceve il nome dell’organizzazione.

Come scrivere un buon alt text

1. 1Chiediti perché l’immagine è sulla pagina. Cosa perderebbe un visitatore se non ci fosse?
2. 2Scrivi ciò che conta per quello scopo, in un’espressione o in una frase.
3. 3Comincia dal contenuto. Uno screen reader di solito annuncia che si tratta di un’immagine, quindi 'immagine di' o 'foto di' raramente aiuta.
4. 4Non ripetere ciò che il testo accanto all’immagine dice già. Se dice tutto, l’immagine è decorativa e riceve un alt vuoto.
5. 5Leggi l’alt text ad alta voce senza guardare la pagina. Ha senso da solo?

Errori comuni

• Nessun attributo alt. Alcuni screen reader leggono allora il nome del file.
• Un nome di file o un codice come alt text, per esempio 'IMG_2041.jpg'.
• La stessa serie di parole chiave su molte immagini. L’alt text è innanzitutto per le persone.
• Una lunga descrizione di un’immagine puramente decorativa.
• Descrivere l’aspetto dell’immagine di un pulsante invece della sua azione. Un pulsante di ricerca non è 'lente d’ingrandimento', è 'Cerca'.

Quanto deve essere lungo?

Il criterio WCAG 1.1.1 non indica un numero di caratteri. Il consiglio del W3C è di tenerlo breve, idealmente un’espressione o una frase. Per grafici e altre immagini complesse, dai l’informazione completa come testo sulla pagina e tieni breve l’alt text. Se ti serve più di una frase, probabilmente l’immagine porta un contenuto che va nel testo della pagina.

Controlla il tuo sito

Per trovare le immagini senza un alt text utile, esegui su una pagina il Controllore alt text gratuito. Per ottenere proposte per molte immagini, usa lo strumento Testi alt. Una proposta automatica può non cogliere ciò che conta sulla tua pagina, quindi leggi ogni testo e cambialo quando non si adatta allo scopo dell’immagine.

Gli strumenti di Do4U aiutano a scrivere, non a decidere: se un’immagine è informativa, funzionale o decorativa lo sai meglio tu. Ricontrolla dopo grandi modifiche al tuo sito.