"Quale nome di file vorresti che uno screen reader ti leggesse ad alta voce nell'orecchio 40 volte al giorno?" È una domanda un po' assurda, ma è esattamente ciò che accade quando in un'immagine significativa viene lasciato alt="image1.jpg" o, peggio, nessun testo alternativo. Questo articolo è una guida pratica per scrivere un testo alternativo che sia davvero d'aiuto: non solo presente, ma utile.
In breve: cosa tratta questa guida
Perché il testo alternativo errato è quasi altrettanto dannoso quanto il testo alternativo mancante
Secondo le WCAG 1.1.1, tutti i contenuti non testuali devono avere un'alternativa testuale, ma il requisito formale è solo metà della storia. "image1.jpg", "immagine" o "logo" soddisfano tecnicamente il requisito (c'è un attributo alt), ma non trasmettono informazioni reali. Un utente di screen reader che sente una stringa di "immagine... immagine... immagine23.png" non è meno frustrato di un utente vedente che guarda una serie di fotogrammi vuoti.
Come scrivere un buon testo alternativo
La regola guida: descrivi il messaggio dell'immagine nel contesto in cui appare, non una descrizione letterale di ciò che vedi. Una foto di persone attorno a un tavolo in una riunione di gruppo, che accompagna un articolo sulla collaborazione, potrebbe essere indicata come "Team che lavora insieme attorno a un tavolo" e non "Foto di persone". Per un diagramma o un grafico, descrivi l'aspetto che presenta il grafico: "Il grafico a barre che mostra un aumento del 40% delle vendite nel terzo trimestre" è significativamente migliore del "Grafico a barre".
- Breve e mirato: di solito sono sufficienti 1-2 frasi; non è necessario descrivere ogni dettaglio visivo.
- Salta "immagine di" o "immagine di": lo screen reader annuncia già che si tratta di un'immagine, quindi non è necessario ripeterla.
- Considera il testo circostante: la stessa immagine può ottenere testo alternativo diverso in contesti diversi.
Quando lasciare il testo alternativo intenzionalmente vuoto
Non tutte le immagini necessitano di una descrizione. È meglio taggare le immagini puramente decorative (linee di divisione grafiche, illustrazioni di sfondo, icone che ripetono semplicemente il testo vicino).alt=""(testo alternativo vuoto, non mancante) in modo che lo screen reader li salti completamente. La differenza tra "mancante" e "intenzionalmente vuoto" è fondamentale: mancante suona come un errore o legge il nome del file; intenzionalmente vuoto lo salta semplicemente in silenzio.
💡 Consiglio pratico
Un test veloce: se cancellassi completamente l'immagine dalla pagina, un utente che non può vederla perderebbe qualcosa? In caso contrario, probabilmente è decorativo e adatto a un alt vuoto.
Cosa fare con grafici e diagrammi complessi
Per un grafico di dati complesso, una tabella comparativa illustrata o un'infografica con diversi livelli di informazioni, un breve testo alternativo non è sufficiente: ci sono troppe informazioni da trasmettere. La soluzione: un breve testo alternativo che descriva l'argomento generale, accanto ad esso (nel testo normale che circonda l'immagine, non solo nell'attributo alt) una descrizione più dettagliata dei dati importanti o una tabella dati equivalente in cui uno screen reader può navigare.
Non sei sicuro di quale testo alternativo sia mancante o problematico sul tuo sito?
Il nostro strumento trova le immagini senza testo alternativo in tutti i documenti del tuo sito e le contrassegna in base alla priorità.
Rendi i tuoi documenti accessibili gratuitamente ←