Come scrivere buoni testi alternativi
I testi alternativi rendono le immagini accessibili alle persone che non possono vederle. Qui impari le regole, vedi esempi concreti e scopri quando un testo alternativo vuoto è la scelta giusta.
A cosa servono i testi alternativi
Un testo alternativo (alt) è l'equivalente testuale di un'immagine. Si scrive nell'attributo HTML alt dell'elemento img e diventa visibile quando l'immagine stessa non è disponibile, e udibile quando qualcuno non può vederla.
- Screen reader: le persone cieche o con grave ipovisione ascoltano le pagine web ad alta voce. Senza testo alternativo sentono solo il nome del file o la parola «grafica»: l'informazione dell'immagine va persa.
- Immagini disattivate o non caricate: con connessioni lente, errori di caricamento o immagini disattivate, il browser mostra il testo alternativo.
- La SEO come effetto collaterale: i motori di ricerca usano i testi alternativi per capire il contenuto delle immagini. È un bonus gradito, ma non l'obiettivo. Chi riempie i testi alternativi di parole chiave danneggia le persone per cui sono davvero pensati.
I testi alternativi sono inoltre uno dei requisiti più antichi dell'accessibilità: il criterio di successo 1.1.1 «Contenuti non testuali» appartiene al livello di conformità A, il più basilare delle WCAG. Eppure la loro assenza è da anni tra gli errori più frequenti del web.
Le regole di base
La funzione prima della descrizione
Chiediti prima di tutto: che ruolo svolge l'immagine in questo punto? Un buon testo alternativo trasmette l'informazione o la funzione dell'immagine, non ogni dettaglio visibile. La foto della direzione aziendale in un comunicato stampa ha bisogno di nomi e contesto, non di una descrizione del colore delle cravatte.
Decide il contesto
La stessa immagine può avere bisogno di testi alternativi completamente diversi a seconda di dove compare. La foto di un melo significa una cosa in un blog di giardinaggio («Giovane melo della varietà Elstar con tutore di legno») e una del tutto diversa nella pagina del team di un'azienda frutticola («Il nostro frutteto durante la raccolta autunnale»). Scrivi sempre il testo alternativo per la pagina concreta, mai «di riserva» per l'immagine in sé.
Lunghezza: breve, ma completo
Come regola generale funzionano bene tra 80 e 125 caratteri: una o due frasi concise. Non è un limite tecnico, ma una questione di riguardo: gli screen reader leggono il testo alternativo tutto in una volta, senza la possibilità di fare pause che offre il testo scorrevole. Ciò che richiede più spazio va in una descrizione lunga (vedi sotto).
Niente «immagine di…»
Gli screen reader annunciano già le immagini come grafiche. Formule come «immagine di», «la foto mostra» o «grafica:» risultano quindi ridondanti. Eccezione: se il tipo di rappresentazione è rilevante di per sé («dipinto a olio», «radiografia», «screenshot»), può essere indicato.
Esempi buoni e cattivi
| Situazione | Male | Bene |
|---|---|---|
| Foto di prodotto nel negozio online | «IMG_4823.jpg» oppure «scarpa» | «Scarpone da trekking blu con fodera a membrana, vista laterale» |
| Foto del team nella pagina «Chi siamo» | «Immagine del nostro team» | «Il team di dodici persone davanti alla sede dell'azienda a Verona» |
| Diagramma nella relazione annuale | «Diagramma» | «Grafico a barre: il fatturato è cresciuto del 18 per cento nel 2025, fino a 2,4 milioni di euro» |
| Icona a lente d'ingrandimento come pulsante di ricerca | «Lente d'ingrandimento» | «Cerca» |
| Motivo a onde decorativo come separatore | «Motivo a onde blu come separatore decorativo di pagina» | Testo alternativo vuoto: alt="" |
Immagini decorative: alt vuoto invece di ometterlo
Non tutte le immagini trasportano informazioni. Cornici ornamentali, pattern di sfondo, foto simboliche che creano solo atmosfera senza legame con il contenuto: tutto questo uno screen reader può saltarlo completamente. A tal fine l'immagine riceve un attributo alt vuoto: alt="".
Importante: un alt="" vuoto è una cosa completamente diversa da un attributo alt assente. Se l'attributo manca del tutto, molti screen reader leggono al suo posto il nome del file: «DSC-zero-zero-quattro-sette-trattino-basso-final-v2-punto-jpg». L'attributo vuoto, invece, dice espressamente: «Questa immagine puoi ignorarla».
In caso di dubbio aiuta un test semplice: alla pagina mancherebbe un'informazione se l'immagine sparisse? Se la risposta è no, è decorativa.
Immagini con link: descrivi la destinazione
Se un'immagine è allo stesso tempo un link, il compito del testo alternativo cambia: deve descrivere dove porta il link o quale azione attiva, non ciò che si vede. Un logo linkato nell'intestazione riceve quindi «Vai alla pagina iniziale» o il nome dell'azienda, non «logo con onda blu». Una miniatura che porta a un articolo ha come testo alternativo il titolo dell'articolo. E se accanto all'immagine c'è già un link testuale con la stessa destinazione, l'immagine del link può avere alt="", così chi usa uno screen reader non sente il link due volte.
Grafiche complesse e diagrammi
Le infografiche, i diagrammi, gli organigrammi o le mappe non stanno in 125 caratteri. Qui si applica un procedimento a due livelli:
- Testo alternativo breve con il tema e il messaggio principale: «Grafico a linee: le visite sono triplicate tra il 2023 e il 2026».
- Descrizione lunga con tutti i dati rilevanti: idealmente come testo normale subito sotto la grafica, come blocco espandibile o come tabella di dati. Ne beneficiano, tra l'altro, tutte le persone, non solo chi usa uno screen reader.
Offrire i dati di un diagramma come tabella HTML è spesso la soluzione più pulita: le tabelle permettono agli screen reader una navigazione precisa; un blocco di testo letto tutto di fila, no.
Loghi, icone e testo dentro le immagini
- Loghi: il testo alternativo è il nome dell'azienda o del prodotto — «Wave Tools», non «logo». La parola «logo» può essere aggiunta se aiuta a orientarsi.
- Icone con funzione: descrivi l'azione («Apri il menu», «Carrello»), non il simbolo («tre righe», «carrellino»).
- Icone accanto al testo: se l'etichetta è già lì accanto, l'icona è decorativa:
alt="". - Testo dentro l'immagine: come principio, il testo deve stare nella pagina come testo vero, non dentro le grafiche. Se non si può evitare (per esempio nella locandina di un evento), il testo completo deve figurare nel testo alternativo o in una descrizione lunga: parola per parola, non riassunto a grandi linee.
Testi alternativi in WordPress
WordPress offre campi per i testi alternativi in due punti:
- Libreria media: ogni immagine ha lì un campo «Testo alternativo». Quello che scrivi lì viene usato come valore predefinito quando inserisci di nuovo l'immagine in un contenuto. Le immagini già inserite non cambiano retroattivamente.
- Editor a blocchi: nel blocco immagine puoi regolare il testo alternativo nelle impostazioni del blocco, sotto «Testo alternativo», per ogni uso concreto: proprio la cosa giusta, perché decide il contesto. Il valore del blocco prevale su quello della libreria media.
Per le immagini decorative, in WordPress lascia semplicemente il campo vuoto: l'editor a blocchi scriverà allora correttamente alt="" nell'HTML. La didascalia dell'immagine (caption), tra l'altro, non sostituisce il testo alternativo: viene mostrata a tutti e svolge un'altra funzione.
Come può aiutare l'IA e dove sono i suoi limiti
L'attuale IA per le immagini descrive le foto con una precisione sorprendente ed è un aiuto reale quando nella libreria media ci sono centinaia di immagini senza testo alternativo. Riconosce soggetti, numero di persone, atmosfera e spesso persino il testo dentro l'immagine, e consegna in pochi secondi una bozza utilizzabile.
Quello che l'IA non può leggere nell'immagine è il contesto: vede «donna con laptop in un ufficio luminoso», ma non sa che si tratta della tua nuova direttrice generale e che l'immagine illustra la sua presentazione. Non riconosce nemmeno se un'immagine è decorativa in questa pagina concreta o se, essendo un link, dovrebbe descrivere la destinazione.
Consiglio pratico: usa l'IA come prima bozza, non come risultato finale. Rivedi ogni testo alternativo generato e completa ciò che solo tu sai: nomi, occasioni, denominazioni di prodotto, la funzione dell'immagine nella pagina. Così combini la velocità della macchina con la conoscenza della persona.
Il modo migliore per verificare se i tuoi testi alternativi funzionano nella pratica è un giro con lo screen reader e con gli strumenti di verifica automatici: come farlo te lo mostra la nostra guida Come testare l'accessibilità del tuo sito.
Wave Access genera testi alternativi assistiti dall'IA direttamente in WordPress: per i nuovi caricamenti e per l'intera libreria media, con te come ultima istanza.
Scopri Wave Access →