Come scrivere buoni testi alternativi per le immagini (accessibilità e SEO)

Il testo alternativo è la breve descrizione di un'immagine memorizzata nell'attributo alt dell'elemento img, ed è l'intervento di accessibilità con il maggiore impatto che la maggior parte dei siti web possa fare. Gli screen reader lo leggono ad alta voce ai visitatori ciechi e ipovedenti, i browser lo mostrano quando un'immagine non si carica e i motori di ricerca ci contano per capire cosa mostra un'immagine. È anche una questione giuridica: il criterio di successo WCAG 1.1.1 richiede un'alternativa testuale per tutti i contenuti non testuali al livello di conformità A, cioè il livello minimo, e leggi come l'European Accessibility Act si fondano esattamente su questi criteri. La buona notizia è che scrivere bene un testo alternativo è un'abilità da minuti, non da settimane. Le regole stanno su un foglietto: descrivi ciò che conta dell'immagine nel suo contesto, resta su una frase concisa, evita espressioni come immagine di, dai alle immagini puramente decorative un attributo alt vuoto e non omettere mai del tutto l'attributo. Questa guida percorre ogni regola con esempi, mostra dove vive il testo alternativo in WordPress e si chiude spiegando come trovare tutte le immagini del tuo sito che ne sono ancora prive.

Cos'è il testo alternativo e chi ne dipende?

Nel codice HTML, il testo alternativo è un attributo dell'elemento immagine:

<img src="lighthouse.jpg" alt="Faro a strisce bianche e rosse su una costa rocciosa al tramonto">

A consumarlo sono tre tipi di pubblico, e pensare a loro spiega quasi tutte le regole che seguono. Chi usa uno screen reader ascolta il testo alternativo al posto dell'immagine, quindi per queste persone quel testo è l'immagine. Circa 2,2 miliardi di persone nel mondo convivono con una qualche forma di disabilità visiva secondo l'OMS, e lo screen reader è il modo in cui una quota consistente di loro naviga. I browser mostrano il testo quando l'immagine non riesce a caricarsi, cosa che accade ancora ogni giorno su connessioni lente e deploy sbagliati. E i crawler dei motori di ricerca, che non vedono le immagini come le vediamo noi, usano l'attributo alt come principale segnale testuale sul contenuto dell'immagine.

L'obbligo formale arriva dal criterio di successo WCAG 1.1.1 Non-text Content. Si colloca al livello di conformità A, il che significa che un sito senza alternative testuali fallisce l'asticella più bassa della conformità in materia di accessibilità, per quanto bene sia fatto tutto il resto.

Come scrivere un buon testo alternativo: cinque regole che coprono quasi tutto

Il testo alternativo è scrittura e, come ogni scrittura, migliora con qualche vincolo. Queste cinque regole ti accompagnano attraverso quasi ogni immagine:

• Descrivi contenuto e scopo, non i pixel. Chiediti cosa comunica l'immagine in questo contesto, poi scrivi quello. La stessa foto di una persona al portatile può essere Operatore dell'assistenza che risponde alle chat dei clienti su una pagina di supporto e Lavoro dal tavolo della cucina in un articolo sul lavoro da remoto.
• Sii specifico, ma fermati a ciò che è rilevante. Cane dice meno di Cucciolo di Golden Retriever che rincorre una palla su un prato. Ma se l'articolo parla di cura del prato, la razza può contare meno dell'erba rovinata.
• Resta attorno a una frase. Una linea guida molto usata sono circa 125 caratteri, una convenzione che deriva dai vecchi screen reader che spezzavano i testi più lunghi in blocchi. Non è un limite rigido, ma è un buon vincolo che costringe alla sintesi. Metti davanti le parole importanti.
• Evita immagine di e foto di. Gli screen reader annunciano già l'elemento come immagine, quindi quelle formule sono pura ripetizione. Dire il tipo aggiunge valore solo quando conta: dipinto di, screenshot di e grafico di orientano chi ascolta.
• Per le immagini collegate o funzionali, descrivi la destinazione o l'azione. Un logo che rimanda alla homepage dovrebbe dire Nome azienda, homepage, non descrivere la grafica del logo. Un pulsante a icona che avvia una ricerca dovrebbe dire Cerca. La funzione batte l'aspetto ogni volta che un'immagine fa qualcosa.

Un caso particolare merita una frase a sé: le immagini che contengono testo. Le WCAG scoraggiano in partenza il testo incorporato nelle immagini, ma dove esiste, per esempio in un banner promozionale, il testo alternativo deve includerlo, perché è invisibile a chiunque si affidi all'alternativa.

Testi alternativi buoni e cattivi: esempi a confronto

Nota lo schema nella colonna dei testi deboli: nomi di file, parole singole e descrizioni di pixel invece che di significato. La riga del grafico mostra il divario più ampio. Per chi usa uno screen reader, chart non comunica nulla, mentre una sintesi di una riga del dato rilevato sostituisce l'intero elemento visivo. Se un grafico è troppo complesso per una riga, riassumi nel testo alternativo il messaggio principale e fornisci i dati completi in una tabella lì vicino.

Immagini decorative: quando il testo alternativo vuoto è corretto

Non tutte le immagini portano un significato. Divisori ornamentali, forme astratte di sfondo e foto stock che aggiungono soltanto atmosfera sono decorazione, e il markup corretto per loro è un attributo alt vuoto:

<img src="divider-ornament.svg" alt="">

L'attributo vuoto è un segnale deliberato che dice agli screen reader di saltare completamente l'immagine, che è esattamente ciò che di fatto fa un visitatore vedente. È molto diverso dall'omettere l'attributo: senza alcun attributo alt, molti screen reader ripiegano sull'annuncio del nome del file e il visitatore si sente leggere in mezzo a una frase grafica barra divisore trattino ornamento trattino v2 punto svg. Ecco perché gli strumenti di verifica dell'accessibilità segnalano gli attributi alt mancanti come errori mentre considerano validi quelli vuoti. Il W3C offre un utile albero decisionale per l'attributo alt per i casi limite davvero incerti.

Un test pragmatico per capire se è decorativa: immagina l'immagine sparita. Se la pagina non perde nessuna informazione e nessuna funzione, l'alt vuoto è la scelta giusta. Se sparisce qualcosa di significativo, descrivila.

Come aggiungere il testo alternativo in WordPress

WordPress prevede un campo per il testo alternativo di ogni immagine, e raggiungerlo richiede tre clic:

• Nell'editor a blocchi: seleziona il blocco immagine e il campo Testo alternativo compare nella barra laterale delle impostazioni del blocco, sotto Impostazioni. È questo il valore che finisce nell'HTML della pagina.
• Nella libreria media: apri un'immagine qualsiasi e compila il campo Testo alternativo nei dettagli dell'allegato. Questo valore viene usato come predefinito quando in futuro l'immagine verrà inserita da qualche parte.
• Per le immagini in evidenza: il testo alternativo proviene dal valore salvato nella libreria media per quell'immagine, quindi le miniature degli articoli ereditano ciò che è memorizzato lì.

Una stranezza di WordPress è responsabile di parecchia confusione e merita un avviso evidenziato: aggiornare il testo alternativo nella libreria media non modifica le immagini già inserite negli articoli. L'editor a blocchi copia il testo alternativo nel contenuto dell'articolo al momento dell'inserimento e da quel momento la copia è indipendente. Se correggi i testi alternativi nella libreria media e ti chiedi perché le pagine non siano cambiate, il motivo è questo. Gli inserimenti esistenti vanno modificati negli articoli stessi, oppure con uno strumento di search-replace se la mole lo richiede.

Già che sei nel flusso di lavoro dei media: il campo del testo alternativo non è il campo titolo e non è la didascalia. Il titolo è per lo più interno, la didascalia è il testo visibile sotto l'immagine e solo l'attributo alt serve agli screen reader e ai crawler. Compilare il campo sbagliato è il modo più comune in cui i siti finiscono con belle didascalie e attributi alt vuoti.

Testo alternativo e SEO: cosa dice davvero Google

La documentazione di Google sulla SEO delle immagini è inequivocabile: un testo alternativo descrittivo è un fattore di posizionamento per Google Images e aiuta Google a capire sia l'immagine sia la pagina attorno a essa. Per i negozi e i siti di contenuti, la ricerca per immagini è un canale di traffico reale e l'attributo alt ne è la leva più diretta. Lo stesso documento contiene un avvertimento altrettanto inequivocabile: riempire gli attributi alt di parole chiave produce un'esperienza utente negativa e può portare a considerare il tuo sito come spam.

La traduzione pratica: scrivi il testo alternativo pensando prima a chi ascolta e, se il tema della pagina rientra naturalmente nella descrizione, inseriscilo una volta. Scarpa da running Nike Air Zoom blu, vista laterale è un buon testo alternativo che per inciso contiene le parole che un acquirente cercherebbe. scarpe running comprare scarpe running economiche migliori scarpe running 2026 è spam travestito da attributo alt. Nomi di file descrittivi (scarpa-running-blu.jpg invece di IMG_4032.jpg) e un testo circostante coerente con l'immagine completano il quadro, ma il testo alternativo resta il segnale più forte che controlli completamente.

Come trovare le immagini senza testo alternativo sul tuo sito

Scrivere buoni testi alternativi comincia dal sapere dove mancano, e ci sono strumenti per ogni scala. Per una singola pagina la risposta può darla direttamente il browser: apri la console degli strumenti per sviluppatori ed esegui una riga che elenca tutti i colpevoli.

// Elenca tutte le immagini senza attributo alt nella pagina corrente
document.querySelectorAll('img:not([alt])').forEach((img) => console.log(img.src));

Per un controllo pagina per pagina con riscontro visivo, lo strumento gratuito WAVE di WebAIM evidenzia ogni attributo alt mancante o sospetto direttamente sulla pagina renderizzata, e Lighthouse in Chrome include il controllo nel suo audit di accessibilità. La portata del problema è ben documentata: l'analisi annuale WebAIM Million sul milione di homepage più visitate trova anno dopo anno i testi alternativi mancanti tra le carenze di accessibilità più comuni, su circa la metà di tutte le homepage esaminate. Qualunque cosa tu trovi sul tuo sito, sei in ottima compagnia e, a differenza della maggior parte dei problemi di accessibilità, questo si risolve immagine per immagine, in pochi minuti.

Come InspectWP controlla i tuoi testi alternativi

Un report di InspectWP conta le immagini di una pagina analizzata e riporta, nella sezione SEO, quante hanno un attributo alt e quante ne sono prive, segnalando le mancanze come avviso. Questo ti dà l'inventario degli alt mancanti di un sito WordPress senza aprire gli strumenti per sviluppatori e, dato che i report possono girare secondo una pianificazione, intercetta anche le regressioni che avvengono inevitabilmente quando si pubblicano nuovi contenuti di fretta. Unisci il conteggio del report alle regole di scrittura di questa guida e la strada è breve: trova le immagini, descrivi ciò che conta, lascia la decorazione muta e vuota, e ne trarranno vantaggio sia chi usa uno screen reader sia il tuo traffico dalla ricerca per immagini.