Come verificare se un'immagine ha il testo alternativo (4 metodi semplici)

Perché il testo alternativo è importante

Il testo alternativo (testo alternativo) è una breve descrizione scritta aggiunta a un'immagine in HTML tramite l'attributo alt. Serve a due scopi fondamentali: consente agli screen reader di descrivere le immagini agli utenti ipovedenti e fornisce ai motori di ricerca il contesto per comprendere cosa raffigura un'immagine.

Secondo il report WebAIM Million 2025, il 95,9% delle pagine principali presenta errori WCAG rilevabili e la mancanza di testo alternativo rimane l'errore di accessibilità più comune riscontrato sul web. Per i proprietari di siti, ciò significa che la maggior parte dei siti web ha immagini che gli screen reader non possono descrivere e che i motori di ricerca non possono comprendere.

Secondo le WCAG 1.1.1 (Contenuto non testuale), tutte le immagini significative devono avere un testo alternativo descrittivo per raggiungere la conformità di Livello A. La mancanza di testo alternativo o un testo alternativo vuoto su immagini informative è una delle violazioni di accessibilità più comuni riscontrate oggi sul web.

Quindi, come si verifica effettivamente se un'immagine ha il testo alternativo? Ecco quattro metodi affidabili.

Metodo 1: Ispeziona il codice sorgente della pagina (Visualizza sorgente)

Come visualizzo il codice sorgente della pagina per trovare il testo alternativo?

Il modo più semplice per verificare il testo alternativo è visualizzare il codice HTML grezzo di una pagina web:

1. Apri la pagina nel tuo browser.
2. Fai clic con il pulsante destro del mouse in un punto qualsiasi e seleziona Visualizza sorgente pagina (o premi Ctrl+U / Cmd+U).
3. Usa Ctrl+F / Cmd+F per cercare <img.
4. Per ogni tag di immagine, cerca l'attributo alt. Ad esempio: <img src="photo.jpg" alt="Una donna che legge un libro in una biblioteca">

Se l'attributo alt è completamente assente, o se è presente ma vuoto (alt=""), quell'immagine potrebbe richiedere attenzione. Nota che alt="" viene utilizzato intenzionalmente per immagini decorative che non hanno significato — questo è valido e corretto secondo le WCAG.

Metodo 2: Utilizza gli strumenti per sviluppatori del browser (Ispeziona elemento)

Come appare l'attributo alt in DevTools?

Per un approccio più rapido e visivo, utilizza gli strumenti per sviluppatori integrati nel tuo browser:

1. Fai clic con il pulsante destro del mouse direttamente sull'immagine che desideri controllare.
2. Seleziona Ispeziona o Ispeziona elemento.
3. Il pannello DevTools si aprirà con l'HTML dell'immagine evidenziato.
4. Cerca l'attributo alt nel tag <img> evidenziato.

Questo metodo è particolarmente utile quando si desidera controllare rapidamente un'immagine specifica senza cercare nell'intero codice sorgente della pagina. Puoi anche passare il mouse sopra l'elemento immagine nel pannello Elementi per vedere un'anteprima, e il valore alt sarà visibile inline.

Metodo 3: Utilizza lo strumento di accessibilità WAVE

Come WAVE evidenzia la mancanza di testo alternativo?

L' estensione del browser WAVE di WebAIM è uno degli strumenti di test di accessibilità gratuiti più utilizzati. Quando la attivi su qualsiasi pagina web, WAVE scansiona l'intera pagina e sovrappone icone colorate direttamente sul contenuto. Un'icona rossa su un'immagine indica un attributo alt mancante, che è una violazione WCAG critica. Un'icona verde significa che l'immagine ha il testo alternativo presente. Un'icona gialla segnala una potenziale preoccupazione, come un testo alternativo che appare sospettosamente lungo, duplicato o contenente solo un nome di file. L'estensione fornisce anche un riepilogo nella barra laterale che mostra il conteggio totale di errori, avvisi ed elementi strutturali, offrendoti un'istantanea immediata dell'accessibilità dell'intera pagina senza dover ispezionare una singola riga di codice.

Lo strumento di valutazione dell'accessibilità web WAVE (disponibile come estensione gratuita per browser o su wave.webaim.org) fornisce una sovrapposizione visiva sulla tua pagina che segnala i problemi di accessibilità, inclusa la mancanza di testo alternativo.

1. Installa l'estensione del browser WAVE (Chrome o Firefox).
2. Naviga alla pagina che desideri controllare.
3. Fai clic sull'icona dell'estensione WAVE.
4. WAVE sovrapporrà icone sulla pagina — un'icona rossa contrassegnata da un punto esclamativo indica un errore di testo alternativo mancante su un'immagine.
5. Fai clic su qualsiasi icona per maggiori dettagli sul problema specifico.

WAVE visualizza anche un conteggio riepilogativo degli errori, il che rende facile vedere a colpo d'occhio quante immagini nella pagina non hanno il testo alternativo.

Metodo 4: Utilizza Alt Audit per un controllo su tutto il sito

Posso controllare il testo alternativo su tutto il mio sito web contemporaneamente?

I tre metodi sopra descritti sono ottimi per controllare singole immagini o pagine, ma cosa succede se devi controllare l'intero sito web contemporaneamente? È qui che entra in gioco Alt Audit.

Alt Audit scansiona l'intero sito e genera un report completo di ogni immagine a cui manca il testo alternativo, ha un attributo alt vuoto (dove non dovrebbe esserlo) o ha un testo alternativo che potrebbe essere troppo corto, troppo lungo o generato automaticamente. Ciò consente di risparmiare ore di lavoro manuale e fornisce un elenco di azioni prioritarie per risolvere i problemi di accessibilità.

Con Alt Audit, puoi:

• Scansionare migliaia di immagini su tutto il tuo dominio in pochi minuti.
• Vedere esattamente quali pagine e immagini non hanno il testo alternativo.
• Utilizzare suggerimenti basati sull'IA per generare automaticamente testo alternativo descrittivo.
• Monitorare i tuoi progressi nel tempo mentre risolvi i problemi.

Confronto rapido: Tutti e 4 i metodi

Ogni metodo serve a uno scopo diverso. Utilizza questa tabella per scegliere l'approccio giusto per la tua situazione.

Per i controlli di singole pagine, DevTools o WAVE sono le opzioni più veloci. Per siti con centinaia o migliaia di immagini, un crawler automatizzato come Alt Audit consente di risparmiare ore di lavoro manuale scansionando ogni pagina e segnalando ogni immagine che necessita di attenzione. Lo strumento prioritizza i problemi per gravità, in modo da poter risolvere prima i problemi più impattanti e monitorare i progressi nel tempo. Questo è particolarmente prezioso per le agenzie che gestiscono più siti di clienti o negozi di e-commerce con grandi cataloghi di prodotti, dove il controllo manuale sarebbe impraticabile.

Cosa rende un buon testo alternativo?

Una volta identificate le immagini a cui manca il testo alternativo, vorrai scrivere descrizioni efficaci. Ecco come dovrebbe essere un buon testo alternativo:

• Sii descrittivo e specifico: "Cucciolo di golden retriever che gioca tra le foglie autunnali" è molto meglio di "cane" o "foto".
• Sii conciso: Punta a meno di 125 caratteri. Gli screen reader potrebbero troncare testi alternativi più lunghi.
• Non iniziare con "Immagine di" o "Foto di": Gli screen reader annunciano già che si tratta di un'immagine. Descrivi semplicemente ciò che mostra.
• Rifletti il contesto: La stessa immagine potrebbe richiedere un testo alternativo diverso a seconda del contenuto circostante. Un grafico in una pagina di dati dovrebbe descrivere l'andamento dei dati, non solo "grafico a barre".
• Usa alt vuoto per immagini decorative: Se un'immagine è puramente decorativa e non aggiunge informazioni, usa alt="" per dire agli screen reader di saltarla.

Errori comuni del testo alternativo da evitare

Un audit WCAG 1.1.1 (Contenuto non testuale) su migliaia di siti rivela ripetutamente gli stessi schemi. Evitare questi errori comuni può migliorare sia il tuo punteggio di accessibilità che la tua visibilità sui motori di ricerca.

Quando controlli le tue immagini, fai attenzione a questi errori frequenti:

• Attributo alt completamente mancante: Alcuni sistemi CMS più vecchi o plugin di terze parti potrebbero generare tag <img> senza alcun attributo alt.
• Nome del file come testo alternativo: Un testo alternativo come "IMG_4823.jpg" o "banner-image-v2-final.png" non è utile a nessuno.
• Riempimento di parole chiave: Riempire il testo alternativo con parole chiave a scopo SEO ("migliori scarpe economiche compra scarpe online scarpe economiche") è una cattiva pratica di accessibilità e potrebbe essere penalizzato dai motori di ricerca.
• Testo alternativo identico su immagini diverse: Se più immagini in una pagina hanno lo stesso testo alternativo, gli utenti degli screen reader non saranno in grado di distinguerle.

Inizia a controllare il tuo testo alternativo oggi stesso

Che tu sia uno sviluppatore, un content manager o uno specialista SEO, sapere come verificare se un'immagine ha il testo alternativo è un'abilità fondamentale per creare siti web accessibili e ad alte prestazioni.

Per una soluzione rapida, completa e scalabile, Alt Audit ti offre una visibilità completa sulla copertura del testo alternativo del tuo sito — in modo da poter risolvere i problemi più velocemente e rimanere conforme agli standard WCAG.

Domande frequenti

Cos'è il testo alternativo e perché è importante?

Il testo alternativo (testo alternativo) è una descrizione testuale aggiunta al tag HTML di un'immagine utilizzando l'attributo alt. Serve a due scopi: consente agli screen reader di descrivere le immagini agli utenti con disabilità visive e aiuta i motori di ricerca a comprendere il contenuto delle immagini per l'indicizzazione e il posizionamento. Secondo le WCAG 1.1.1, tutte le immagini non decorative su un sito web devono avere un testo alternativo descrittivo per essere considerate accessibili.

Come controllo il testo alternativo in Chrome?

Il modo più veloce è fare clic con il pulsante destro del mouse su qualsiasi immagine e selezionare "Ispeziona" per aprire Chrome DevTools. Il tag <img> sarà evidenziato nel pannello Elementi e potrai vedere direttamente l'attributo alt. Se non esiste alcun attributo alt, l'immagine non ha il testo alternativo. Puoi anche premere Ctrl+U (Cmd+U su Mac) per visualizzare l'intero codice sorgente della pagina e cercare i tag <img> per rivedere tutte le immagini contemporaneamente.

Cosa devo fare se mancano le immagini del testo alternativo?

Innanzitutto, determina se ogni immagine è decorativa o significativa. Le immagini decorative (bordi, spaziatori, motivi di sfondo) dovrebbero utilizzare un attributo alt vuoto (alt="") in modo che gli screen reader le saltino. Per le immagini significative, scrivi una descrizione concisa di ciò che l'immagine mostra nel contesto. Mantieni le descrizioni sotto i 125 caratteri, evita frasi come "immagine di" o "foto di" e concentrati sulle informazioni che l'immagine trasmette piuttosto che sul suo aspetto visivo.

Posso automatizzare il controllo del testo alternativo per tutto il mio sito web?

Sì. Metodi manuali come Visualizza sorgente e DevTools funzionano bene per singole pagine, ma sono impraticabili per siti con centinaia o migliaia di immagini. Strumenti automatizzati come Alt Audit scansionano l'intero dominio, identificano ogni immagine a cui manca il testo alternativo, segnalano descrizioni deboli o generate automaticamente e danno priorità ai problemi per gravità. Questo approccio consente di risparmiare ore di ispezione manuale e garantisce che nessuna pagina venga trascurata.

Il testo alternativo influisce sulla SEO?

Sì. I motori di ricerca non possono "vedere" direttamente le immagini. Si basano sul testo alternativo per comprendere cosa raffigura un'immagine e come si relaziona al contenuto circostante. Un testo alternativo ben scritto aiuta le immagini ad apparire nei risultati di ricerca di immagini di Google e fornisce segnali di pertinenza aggiuntivi per la pagina. Secondo ricerche di settore, le pagine con testo alternativo delle immagini ottimizzato possono registrare miglioramenti misurabili nel traffico organico di ricerca per immagini e nei posizionamenti generali delle pagine.

Qual è la differenza tra testo alternativo vuoto e testo alternativo mancante?

Testo alternativo mancante significa che l'attributo alt non esiste affatto sul tag <img> (<img src="photo.jpg">). Questa è una violazione WCAG perché gli screen reader spesso leggono il nome del file, creando un'esperienza scadente. Il testo alternativo vuoto (alt="") è intenzionale e valido. Indica agli screen reader di saltare completamente l'immagine, che è l'approccio corretto per immagini puramente decorative che non aggiungono alcun valore informativo alla pagina.