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 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)

Il modo più semplice per controllare 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 ovunque e seleziona Visualizza sorgente pagina (o premi Ctrl+U / Cmd+U).
3. Usa Ctrl+F / Cmd+F per cercare <img.
4. Per ogni tag 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 necessitare di attenzione. Nota che alt="" viene utilizzato intenzionalmente per immagini decorative che non hanno significato — questo è valido e corretto secondo WCAG.

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

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 degli strumenti per sviluppatori 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 dover 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

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 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à delle 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 riassuntivo degli errori, rendendo facile vedere a colpo d'occhio quante immagini nella pagina non hanno il testo alternativo.

Metodo 4: Utilizza Alt Audit per un controllo dell'intero sito

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

Alt Audit scansiona il tuo intero sito e genera un rapporto 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. Questo 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.

Cosa rende un buon testo alternativo?

Una volta identificate le immagini a cui manca il testo alternativo, vorrai scrivere descrizioni efficaci. Ecco come appare 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 su 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 indicare agli screen reader di saltarla.

Errori comuni del testo alternativo da evitare

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

• Attributo alt completamente mancante: Alcuni vecchi sistemi CMS 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: Caricare 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 di 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.