Alt text delle immagini: cos’è e come scriverlo

L’alt text, o testo alternativo, comunica con parole lo scopo di un’immagine quando questa non può essere vista o interpretata visivamente. È essenziale per l’accessibilità e può aiutare i motori di ricerca a comprendere le immagini, ma non è un campo da riempire meccanicamente con una keyword.

La stessa immagine può richiedere testi alternativi diversi in pagine diverse, oppure un attributo vuoto se è puramente decorativa. La domanda corretta non è quindi «che cosa vedo nella foto?», ma «quale informazione o funzione svolge qui questa immagine?».

Cos’è l’alt text delle immagini?

Nel codice HTML, il testo alternativo è il valore dell’attributo alt dell’elemento img:

<img src="grafico-vendite.png" alt="Le vendite crescono da 120 a 185 unità tra gennaio e marzo">

“Alt tag” è un’espressione molto usata, ma tecnicamente imprecisa: alt è un attributo, mentre img è l’elemento HTML. Il valore può essere letto dalle tecnologie assistive, visualizzato in alcune condizioni quando l’immagine non si carica e usato dai motori di ricerca insieme al contenuto della pagina e ad altri segnali.

Il criterio 1.1.1 delle WCAG 2.2 richiede che i contenuti non testuali abbiano un’alternativa che svolga uno scopo equivalente, con eccezioni e trattamenti specifici per controlli, contenuti complessi e decorazioni. L’alt text non è quindi una didascalia nascosta né una descrizione fotografica fine a sé stessa: è una alternativa funzionale e contestuale.

Per inquadrare questo requisito nel progetto complessivo puoi leggere la guida sull’accessibilità dei siti web.

A che cosa serve il testo alternativo?

Un alt text appropriato permette a chi usa uno screen reader di ricevere l’informazione o la funzione trasmessa dall’immagine. È utile anche quando la risorsa non viene caricata e fornisce ai sistemi automatici un contesto testuale.

• Accessibilità: rende disponibili informazioni visive a persone cieche o ipovedenti e riduce l’ambiguità delle immagini funzionali.
• Robustezza: conserva una descrizione o una funzione comprensibile se l’immagine non è disponibile.
• Ricerca: aiuta Google a comprendere il soggetto dell’immagine insieme al testo vicino, al nome del file e al contesto della pagina.
• Qualità editoriale: obbliga a chiarire perché l’immagine è stata inserita e quale contributo porta al contenuto.

Non tutte le immagini richiedono lo stesso alt text

La decisione guidata del W3C sull’attributo alt distingue le immagini in base allo scopo. Questa classificazione evita due errori opposti: lasciare senza alternativa un’immagine informativa oppure costringere chi usa uno screen reader ad ascoltare descrizioni inutili di elementi decorativi.

Immagini informative

Una foto, un’illustrazione o un’icona è informativa quando aggiunge un significato necessario a comprendere la pagina. L’alt text deve esprimere l’informazione essenziale nel contesto, non elencare ogni dettaglio visibile.

Immagine: una crepa attraversa il display di uno smartphone mostrato in una guida alla riparazione.

alt="Crepa diagonale sul display, dall’angolo superiore al bordo destro"

In una pagina dedicata invece alla fotografia commerciale, la stessa immagine potrebbe richiedere informazioni su inquadratura, luce o stile. Il file è identico, la funzione editoriale no.

Immagini decorative

Se un’immagine serve soltanto a creare atmosfera, separare sezioni o ripetere un’informazione già espressa accanto, deve poter essere ignorata dalle tecnologie assistive. Per un elemento img si usa un attributo vuoto:

<img src="onda-decorativa.svg" alt="">

alt="" non equivale a omettere l’attributo. Il valore vuoto segnala intenzionalmente che l’immagine non porta informazione; se l’attributo manca, alcuni screen reader possono annunciare il nome del file o comportarsi in modo meno prevedibile. Quando possibile, le decorazioni pure possono essere gestite con CSS.

Immagini funzionali: link e pulsanti

Quando un’immagine è l’unico contenuto di un link o di un pulsante, il testo alternativo deve descrivere la destinazione o l’azione, non il suo aspetto.

<a href="/carrello/">
  <img src="icona-carrello.svg" alt="Vai al carrello">
</a>

Se nello stesso controllo è già presente un’etichetta testuale accessibile, descrivere di nuovo l’icona può creare una ripetizione. Va valutato il nome accessibile dell’intero controllo, non il singolo elemento isolato.

Immagini contenenti testo

Quando parole importanti compaiono soltanto nell’immagine, l’alternativa deve comunicarle. È comunque preferibile usare testo HTML reale: si adatta meglio allo schermo, può essere ingrandito, tradotto, selezionato e letto dalle tecnologie assistive.

Per un logo, il nome dell’organizzazione è spesso sufficiente. Se il logo è anche il solo contenuto del link alla homepage, l’alt text può esprimere insieme identità e destinazione, per esempio Marco Loprete, homepage.

Grafici, mappe e diagrammi complessi

Un breve attributo alt non può sostituire una tabella con molti valori, un diagramma di processo o una mappa ricca di informazioni. In questi casi usa un alt text sintetico che identifichi il contenuto e fornisci la descrizione completa nei paragrafi vicini, in una tabella o in una pagina collegata.

alt="Grafico dell’andamento mensile delle richieste; dati completi nella tabella seguente"

L’alternativa lunga deve permettere di ricavare la stessa conclusione importante dell’elemento visivo. Trascrivere soltanto il titolo del grafico non è sufficiente.

Come scrivere un buon alt text

Prima di scrivere, prova a immaginare che l’immagine non sia disponibile. Che cosa perderebbe la persona che sta leggendo la pagina? La risposta individua il contenuto essenziale dell’alternativa.

1. Determina lo scopo: informa, permette un’azione, mostra dati, ripete il testo vicino o decora?
2. Leggi il contesto: titolo, paragrafo, didascalia e destinazione del link influenzano ciò che serve comunicare.
3. Conserva l’informazione essenziale: descrivi ciò che una persona deve sapere, non tutto ciò che potresti osservare.
4. Scrivi una frase naturale e concisa: evita elenchi di parole, abbreviazioni oscure e costruzioni pensate solo per i motori di ricerca.
5. Elimina le ripetizioni: non duplicare parola per parola una didascalia o un testo adiacente se questo non aggiunge utilità.
6. Prova la pagina senza l’immagine: verifica se l’alternativa mantiene informazione o funzione e se il flusso resta comprensibile.

Bisogna iniziare con “immagine di” o “foto di”?

Di solito no: lo screen reader annuncia già la presenza di un’immagine. Specificare il mezzo è utile soltanto quando è rilevante, per esempio per distinguere una fotografia storica da una ricostruzione, un dipinto da un oggetto reale o uno screenshot dall’interfaccia effettiva.

L’alt text deve stare entro 125 caratteri?

Non esiste un limite WCAG universale di 125 caratteri. Il testo dovrebbe essere il più breve possibile senza perdere lo scopo equivalente. Se servono molte informazioni, non comprimere un intero grafico nell’attributo: usa un’alternativa breve e aggiungi una descrizione estesa nel contenuto della pagina.

Alt text e SEO delle immagini

Google dichiara di usare l’alt text insieme agli algoritmi di visione artificiale e al contenuto della pagina per comprendere il soggetto di un’immagine. Questo rende l’attributo utile per la ricerca per immagini, ma non giustifica il keyword stuffing.

La regola più sicura è semplice: scrivi prima per comunicare la funzione dell’immagine. Se una parola chiave descrive davvero il soggetto ed è coerente con il contesto, comparirà naturalmente. Se la inserisci soltanto per ripetere la query principale, l’alternativa diventa meno utile e può apparire manipolativa.

Alt text	Valutazione
foto immagine SEO alt text immagini SEO sito web	Accumulo di keyword, non descrive uno scopo
Campo Testo alternativo nella Libreria media di WordPress	Descrive uno screenshot nel contesto di una guida
alt=""	Corretto se l’immagine è solo decorativa o ridondante

L’ottimizzazione non si esaurisce nell’attributo alt. Contano anche qualità e pertinenza della pagina, testo vicino, nome del file, formato, dimensioni, caricamento e disponibilità dell’immagine ai crawler. La guida su come ottimizzare le immagini per la SEO approfondisce questi elementi, mentre la guida definitiva alla SEO li colloca nella strategia complessiva.

Alt text, titolo, didascalia e descrizione non sono sinonimi

Campo	Funzione principale	È sempre visibile?
Alt text	Alternativa testuale associata all’immagine	No
Titolo dell’allegato	Nome gestionale del media in WordPress; il suo uso pubblico dipende dal tema o dal blocco	No
Didascalia	Testo visibile che commenta, attribuisce o contestualizza l’immagine	Sì, se inserita e mostrata
Descrizione	Testo esteso associato all’allegato, usato solo in alcuni contesti o template	Dipende dal sito
Nome del file	Identifica la risorsa e può offrire un indizio leggero sul soggetto	Normalmente nell’URL del file

Non copiare automaticamente lo stesso testo in tutti i campi. Una didascalia può citare autore e fonte; l’alt text deve comunicare l’informazione o la funzione necessaria a chi non vede l’immagine.

Come aggiungere l’alt text in WordPress

Quando inserisci un blocco Immagine nell’editor, selezionalo e compila il campo Testo alternativo nelle impostazioni. Puoi anche valorizzare il campo dell’allegato nella Libreria media. Per il flusso complessivo di pubblicazione consulta la guida su come creare un sito con WordPress.

1. apri o inserisci l’immagine nel contenuto;
2. determina il suo scopo nella pagina;
3. scrivi l’alternativa nel campo dedicato oppure lasciala intenzionalmente vuota se l’immagine è decorativa;
4. salva e controlla il codice HTML reso nel frontend;
5. prova il contenuto con strumenti automatici e, per le pagine importanti, con uno screen reader.

Attenzione alle immagini già inserite. In base al blocco, al tema e al modo in cui il media è stato incorporato, modificare il testo alternativo nella Libreria media può non aggiornare automaticamente ogni copia già presente nei contenuti. Verifica la pagina effettiva: il dato che conta è il valore alt restituito nel suo HTML.

La stessa immagine riutilizzata in più pagine può avere funzioni differenti. Evita quindi processi che impongono un’unica descrizione globale senza considerare il contesto editoriale.

Casi tecnici da controllare

• Immagini collegate: se il link non contiene altro testo, l’alt deve descrivere la destinazione o l’azione.
• Icone SVG: l’alternativa può essere fornita con testo visibile o proprietà accessibili appropriate; l’attributo alt appartiene all’elemento img, non a un SVG inline.
• Background CSS: non possiede un attributo alt. Va bene per una decorazione; un’informazione essenziale non dovrebbe esistere soltanto nello sfondo.
• Immagini responsive: le varianti definite con srcset rappresentano in genere lo stesso contenuto e condividono l’alternativa dell’elemento img.
• Gallerie: descrivi ciò che distingue le immagini, evitando una sequenza di alternative identiche e prive di informazione.
• Lingue diverse: traduci l’alt text e adattalo al contenuto localizzato, come qualsiasi altro testo utile alla comprensione.
• Testo generato con AI: usalo al massimo come proposta da revisionare. Un sistema può riconoscere gli oggetti ma non conoscere lo scopo editoriale, la destinazione di un link o il dettaglio importante per la pagina.

Come controllare gli alt text di un sito

Un controllo automatico può individuare attributi mancanti, valori sospetti e immagini prive di nome accessibile. Non può però stabilire da solo se una descrizione comunica lo scopo giusto o se un’immagine è davvero decorativa.

• Ispezione del browser: mostra il valore effettivo dell’attributo alt nel frontend.
• Lighthouse, axe DevTools o WAVE: evidenziano diversi problemi di accessibilità e aiutano a fare un primo censimento.
• Screen reader: VoiceOver su macOS e iOS oppure NVDA su Windows permettono di ascoltare il flusso reale della pagina.
• Crawler SEO: può esportare immagini, URL sorgente e valori alt per individuare assenze, duplicazioni e testi molto sospetti.
• Revisione umana: determina se l’alternativa è corretta nel contesto e se informazioni complesse sono disponibili anche in forma testuale.

Per siti grandi conviene classificare prima i template e i tipi di immagine: loghi, icone funzionali, immagini prodotto, grafici, fotografie editoriali e decorazioni. Correggere soltanto i campi vuoti senza distinguere queste categorie produce spesso descrizioni inutili o duplicate.

Errori comuni

• Compilare ogni alt con la keyword principale, anche quando non descrive l’immagine.
• Descrivere le decorazioni, aumentando il rumore per chi usa uno screen reader.
• Lasciare senza nome le immagini funzionali, rendendo incomprensibili link e pulsanti.
• Usare il nome del file come alternativa, per esempio IMG_4821.jpg.
• Duplicare la didascalia anche quando lo screen reader la leggerà subito dopo.
• Inserire tutti i dati di un grafico nell’attributo invece di fornire una descrizione lunga strutturata.
• Affidarsi soltanto a un punteggio automatico, senza verificare il significato e il flusso della pagina.

Domande frequenti

Ogni immagine deve avere un testo alternativo?

Ogni elemento img dovrebbe essere gestito intenzionalmente. Le immagini informative e funzionali richiedono un’alternativa utile; quelle puramente decorative devono normalmente avere alt="" per essere ignorate dalle tecnologie assistive.

L’alt text può essere uguale al titolo dell’immagine?

Può capitare, ma i due campi hanno scopi diversi. Non copiarli automaticamente: scrivi l’alt text in base al ruolo dell’immagine nella pagina.

L’alt text deve contenere la keyword?

Solo se la parola descrive naturalmente il soggetto o la funzione. L’obiettivo principale resta offrire un’alternativa utile; ripetere keyword non pertinenti peggiora l’esperienza e non è una buona pratica SEO.

Una didascalia sostituisce sempre l’alt text?

No. Se la didascalia comunica già tutta l’informazione e l’immagine è ridondante, può essere corretto usare un alt vuoto. In altri casi alt e didascalia svolgono funzioni complementari. La decisione dipende dal contenuto effettivo e dalla relazione programmatica fra gli elementi.

In sintesi

Un buon alt text non nasce da una formula né da un conteggio di caratteri. Nasce dalla funzione dell’immagine: descrive l’informazione essenziale, comunica la destinazione di un controllo, rimanda a una spiegazione estesa per i contenuti complessi oppure resta vuoto quando l’immagine è decorativa. Questo approccio migliora l’accessibilità e offre ai motori di ricerca un contesto più affidabile.

Vuoi verificare accessibilità e qualità tecnica delle immagini del tuo sito? Contattaci per valutare il progetto.