Il testo alternativo è la versione testuale di un'immagine. Lo leggono i lettori di schermo usati da persone cieche o ipovedenti, lo mostra il browser quando l'immagine non si carica, lo usano i motori di ricerca per capire il contenuto. In HTML si scrive nell'attributo alt, ed è richiesto dal primo criterio delle WCAG, l'1.1.1 sui contenuti non testuali.
Scriverlo non è difficile, ma richiede di rispondere a una domanda che spesso si salta: a cosa serve questa immagine, in questo punto della pagina?
Funzione prima che aspetto
Lo stesso scatto può richiedere testi alternativi diversi a seconda del contesto. Prendiamo la foto di una persona seduta a una scrivania con un portatile:
- in un articolo sul lavoro da remoto, che illustra genericamente il tema, può bastare «Persona che lavora al portatile da casa», o può persino essere considerata decorativa;
- in una pagina «Chi siamo», l'informazione utile è chi è: «Giulia Rossi, responsabile dell'assistenza clienti»;
- in una scheda prodotto di una scrivania, conta l'oggetto: «Scrivania in rovere chiaro da 120 cm con cassetto laterale».
Il testo alternativo non descrive l'immagine in astratto: trasmette l'informazione che l'immagine porta in quel contesto.
I casi principali
Immagini informative
Foto, illustrazioni e schemi che aggiungono un contenuto. Il testo deve essere breve, in genere una frase, e trasmettere l'essenziale. Non serve cominciare con «Immagine di» o «Foto di»: il lettore di schermo annuncia già che si tratta di un'immagine.
Immagini funzionali
Icone e immagini che sono link o pulsanti. Qui il testo alternativo descrive l'azione, non il disegno. Un'icona a forma di lente in un campo di ricerca non è «lente d'ingrandimento», è «Cerca». Il logo in alto che riporta alla pagina iniziale può essere «Pagina iniziale» o il nome dell'organizzazione, a seconda delle convenzioni del sito.
Immagini decorative
Separatori, sfondi, illustrazioni puramente estetiche, foto generiche che ripetono ciò che il testo dice già. Vanno marcate con un attributo vuoto:
<img src="onda-decorativa.svg" alt="">
L'attributo vuoto dice al lettore di schermo di ignorare l'immagine. Omettere del tutto l'attributo è diverso e peggiore: alcuni lettori di schermo, in mancanza di alternative, leggono il nome del file, con risultati come «IMG underscore 4521 punto jpg».
Immagini con testo
Se un'immagine contiene parole, come un banner o la foto di un cartello, il testo alternativo deve riportarle. Meglio ancora, quando è possibile, è evitare il testo dentro le immagini e scriverlo come vero testo HTML, che si ingrandisce, si traduce e si adatta allo schermo.
Grafici e immagini complesse
Un grafico a barre con dodici valori non si riassume in una riga. In questi casi il testo alternativo dà il messaggio principale, per esempio «Grafico delle vendite mensili: crescita costante fino a giugno, poi calo in estate», e i dati completi vanno messi altrove, in una tabella o in una descrizione estesa vicino al grafico. La tabella è utile a tutti, non solo a chi usa un lettore di schermo.
Esempi a confronto
| Contesto | Da evitare | Meglio |
|---|---|---|
| Icona carrello nell'intestazione | «carrello.png» | «Carrello, 3 articoli» |
| Foto del relatore in un evento | «Uomo che sorride» | «Luca Bianchi, relatore dell'incontro» |
| Mappa della sede | «Mappa» | «Mappa: la sede è in piazza Duomo, accanto alla fermata della metropolitana» |
| Freccia decorativa | «freccia» | alt="" |
| Pulsante di chiusura a forma di X | «X» | «Chiudi» |
Errori frequenti
- Riempire il testo di parole chiave pensando alla SEO: per chi ascolta diventa un elenco senza senso.
- Ripetere la didascalia: se sotto la foto c'è già una didascalia che dice tutto, il testo alternativo può essere più breve o vuoto, per evitare che il lettore di schermo legga due volte la stessa cosa.
- Descrizioni troppo lunghe per immagini semplici: chi ascolta deve sorbirsi tutto prima di andare avanti.
- Generare il testo in automatico senza rileggerlo: gli strumenti che descrivono le immagini possono aiutare come bozza, ma non conoscono il contesto e a volte sbagliano.
- Dimenticare le immagini di sfondo CSS che portano informazioni: non hanno un attributo
alt, quindi l'informazione va resa in altro modo.
Un metodo rapido
Quando si scrive un testo alternativo, aiuta immaginare di dover descrivere la pagina a voce a qualcuno al telefono. Che cosa diresti di questa immagine? Se la risposta è «niente, è solo decorazione», l'attributo va lasciato vuoto. Se è una frase, quella frase è il tuo testo alternativo.
In sintesi
- Il testo alternativo trasmette la funzione dell'immagine nel suo contesto, non il suo aspetto in astratto.
- Per icone e immagini cliccabili si descrive l'azione: «Cerca», «Chiudi», «Pagina iniziale».
- Le immagini decorative vogliono
alt="", mai l'attributo assente. - Grafici e schemi complessi richiedono un riassunto breve più i dati completi in una tabella o in un testo vicino.
