Alt Text Checker

Incolla l'URL della tua pagina nel campo Page URL, imposta l'interruttore decorativo e fai clic su Verifica alt text. Lo strumento recupera la pagina, analizza ogni elemento <img> e restituisce ogni immagine con la sua classificazione alt: mancante, decorativa, buona o sospetta. Ottieni anche una percentuale di copertura (alt buoni più decorativi diviso il totale delle immagini) e un'esportazione CSV. Manualmente, puoi fare clic destro su un'immagine, scegliere Ispeziona e leggere l'attributo alt nel riquadro HTML, ma quell'approccio richiede 30 secondi per immagine e manca le immagini lazy-loaded che si caricano sotto il fold. Questo checker scansiona tutte le immagini in un passaggio, incluse quelle dentro i tag <picture> e <figure>. Per i siti con centinaia di immagini per pagina, il risparmio di tempo è reale. Usa il website-metadata-checker dopo per confermare che i meta tag corrispondono al tuo audit di immagini.

Sì, l'alt text è visibile nel sorgente della pagina anche se non viene visualizzato sullo schermo per gli utenti voyeur in condizioni normali. I browser mostrano l'alt text in tre situazioni: quando un'immagine non si carica (link rotto, CDN bloccato), quando un utente passa il mouse in alcuni browser più vecchi, e quando un utente di screen reader naviga nella pagina. Gli sviluppatori vedono l'alt text in DevTools ispezionando l'elemento <img>. I crawler dei motori di ricerca lo leggono direttamente dall'HTML. Per audire l'alt text su larga scala, incolla l'URL in questo checker e ottieni ogni valore alt sulla pagina in una vista, più una miniatura di ogni immagine in modo che tu possa individuare le discrepanze tra ciò che l'immagine mostra e ciò che l'alt dice. Per una singola immagine, fai clic destro e scegli Ispeziona, quindi leggi l'attributo alt= sul tag <img>.

L'alt text serve principalmente alle persone con disabilità visive che utilizzano screen reader, inclusi utenti che sono ciechi, hanno bassa visione o hanno condizioni come la degenerazione maculare che rendono il contenuto dell'immagine illeggibile. Gli screen reader come NVDA, JAWS e VoiceOver leggono l'attributo alt ad alta voce quando incontrano un'immagine. Senza alt text, lo screen reader salta l'immagine interamente o legge il nome file, che di solito è privo di significato. L'alt text aiuta anche gli utenti con disabilità cognitive aggiungendo contesto di testo al contenuto visivo, e gli utenti su connessioni lente che caricano le pagine senza immagini. Il Criterio di successo 1.1.1 (Livello A) di WCAG 2.1 richiede alternative di testo per tutte le immagini non decorative, rendendo l'alt text un requisito di accessibilità di base in tutto il mondo. Il rapporto 2024 WebAIM Million ha rilevato che il 54% delle pagine iniziali aveva alt text mancante su almeno un'immagine, il fallimento WCAG più comune in tutti i top 1 milione di siti.

Fai clic destro sull'immagine sulla pagina web e seleziona Ispeziona (o Ispeziona elemento in alcuni browser). Nel riquadro HTML che appare, cerca l'attributo alt dentro il tag immagine (<img>). Il valore alt si trova tra virgolette, ad esempio alt="Black leather Chelsea boot, side profile". Se l'attributo è assente, l'immagine non ha alt text. Se vedi alt="", l'alt è intenzionalmente vuoto (decorativo). Per una singola immagine, Ispeziona è veloce. Per una pagina intera con 30 o 50 immagini, aprire Ispeziona su ognuna richiede dieci minuti. Questo checker scansiona ogni immagine in un passaggio e restituisce un CSV con URL immagine, valore alt e classificazione. Usa Ispeziona per spot-check e questo strumento per audit completi di pagina prima di spedire un redesign o dopo una migrazione CMS.

Usa questo checker per un audit completo di pagina, oppure verifica le singole immagini con DevTools del browser. Per l'audit completo, inserisci l'URL della tua pagina, imposta l'interruttore decorativo su Sì se desideri che gli alt vuoti conformi a WCAG contino come buoni, e fai clic su Verifica alt text. L'output mostra ogni immagine con il suo valore alt, una classificazione (mancante / decorativa / buona / sospetta) e un punteggio di copertura. Per le singole immagini, fai clic destro e scegli Ispeziona, quindi leggi l'attributo alt= sul tag <img>. Per le piattaforme sociali come Instagram o LinkedIn, l'alt text è modificabile nel flusso di creazione dei post ma non sempre visibile dopo la pubblicazione. Per le immagini in WordPress o Webflow, il campo alt si trova nella libreria dei media o nelle impostazioni dei blocchi. Esegui un check di pagina completo prima di pubblicare e dopo ogni migrazione CMS per catturare gli alt che vengono rimossi durante i cambi di template.

L'alt text vive nel sorgente HTML di qualsiasi pagina web ed è visibile attraverso diversi metodi. In un browser, fai clic destro su un'immagine e seleziona Ispeziona, quindi leggi l'attributo alt= sul tag <img>. In Microsoft Office, fai clic destro su un'immagine e seleziona Visualizza alt text, oppure seleziona l'immagine e scegli Formato immagine quindi Alt text. In Google Docs, fai clic destro e scegli Alt text. In WordPress, il campo alt si trova nella libreria dei media e nell'editor di blocchi. In Webflow, si trova nel pannello delle impostazioni dell'immagine. Per un audit completo di pagina su ogni immagine contemporaneamente, incolla l'URL in questo checker e l'output mostra ogni valore alt più una miniatura di ogni immagine. Gli screen reader affiorano anche il testo alt quando gli utenti navigano il contenuto della pagina, che è lo scopo originale dell'attributo.

L'autore o il creatore dell'immagine è la persona giusta per scrivere l'alt text perché comprende il contesto e il motivo per cui l'immagine è stata aggiunta. Un fotografo che scatta un'immagine di prodotto sa se l'angolo, il colore o il dettaglio è più importante. Uno scrittore che incorpora un grafico in un post del blog sa quale punto dati il grafico illustra. Affidare la scrittura del testo alt a uno sviluppatore o consulente di accessibilità dopo il fatto perde quel contesto. In un team di contenuti, il flusso di lavoro dovrebbe mettere i campi alt text direttamente nel flusso di pubblicazione (CMS, strumento di design) in modo che l'autore scriva l'alt nel momento in cui carica l'immagine. Usa questo checker come passaggio di controllo qualità finale per catturare gli alt che l'autore ha saltato o scritto male. Per i siti con 1.000+ immagini, considera un ciclo di audit trimestrale: 25% delle pagine ogni trimestre, prioritizzando i top 100 URL che generano traffico.

Salta l'alt text descrittivo solo quando l'immagine è puramente decorativa e non aggiunge informazioni, come un GIF spacer, un pattern di sfondo, una linea di divisione o un'icona decorativa accanto a testo che dice la stessa cosa. In questi casi, imposta alt="" (stringa vuota) e idealmente aggiungi role="presentation" in modo che gli screen reader sappiano saltare l'immagine piuttosto che indovinare. Non omettere mai completamente l'attributo alt; l'alt mancante forza gli screen reader ad annunciare il nome file, che di solito è rumore. Salta anche il testo alt sulle immagini di sfondo CSS, che gli screen reader ignorano di default. Il rapporto 2024 WebAIM Million ha rilevato che l'11% delle immagini decorative aveva un testo alt verboso che avrebbe dovuto essere vuoto, creando affaticamento dello screen reader. Questo checker segnala entrambi i gap: alt mancanti su immagini di contenuto e alt verbosi su probabili decorativi.

Ctrl+Shift+R (Cmd+Shift+R su Mac) esegue un hard refresh in Chrome, ricaricando la pagina e bypassando la cache del browser. Forza Chrome a riscarcare ogni asset, incluse immagini, CSS e JavaScript, invece di estrarre da copie cachate. Questo è importante per l'audit dell'alt text in due modi. Primo, se hai aggiornato gli attributi alt tramite il tuo CMS ma la pagina mostra ancora gli alt vecchi in DevTools, un hard refresh forza l'HTML nuovo a caricarsi. Secondo, se le immagini non si renderizzano e sospetti un problema di caching piuttosto che un link rotto effettivo, un hard refresh conferma se l'immagine si carica davvero. Dopo un hard refresh, riesegui questo checker per audire la pagina appena recuperata. Lo strumento stesso recupera una copia nuova della pagina ad ogni esecuzione, quindi non è affetto dalla cache del tuo browser, ma i spot-check di DevTools lo sono.

Il Criterio di successo 1.1.1 (Contenuto non testuale, Livello A) di WCAG 2.1 richiede che tutto il contenuto non testuale abbia un'alternativa testuale che serva uno scopo equivalente, con eccezioni specifiche per il contenuto decorativo, i controlli e i CAPTCHA. Per le immagini, questo significa che ogni tag <img> significativo ha bisogno di un attributo alt non vuoto che descriva l'immagine. Le immagini decorative hanno bisogno di alt="". Le immagini CAPTCHA hanno bisogno di alt text che descrive lo scopo, non il puzzle. WCAG 2.2 mantiene questo criterio invariato. Le azioni legali ADA negli Stati Uniti frequentemente citano l'alt text mancante come un fallimento primario, con oltre 4.000 azioni legali di accessibilità web intentate nel 2023 solo. Il rapporto 2024 WebAIM Million ha rilevato che il 54% dei top homepage aveva alt text mancante. Questo checker valuta ogni immagine rispetto alla regola WCAG e ti fornisce un punteggio di copertura in modo che tu sappia se la pagina passa il Livello A su questo criterio prima di un audit formale.

Mira a 5-125 caratteri per alt, con la maggior parte dei buoni alt che atterrano nella gamma 40-80 caratteri. Gli screen reader tagliano gli alt dopo circa 125 caratteri in alcune implementazioni, e l'algoritmo di ricerca di immagini di Google sembra smettere di ponderare il contenuto oltre quella lunghezza. Qualsiasi cosa sotto i 5 caratteri è solitamente troppo vaga (pensa "logo" o "icon"). Qualsiasi cosa oltre i 200 caratteri legge come keyword stuffing o descrive un dettaglio che l'utente non ha richiesto. Per immagini complesse come infografiche, grafici o diagrammi, usa un alt breve (sotto i 125 caratteri) più una descrizione più lunga nel paragrafo circostante o tramite l'attributo aria-describedby. Questo checker segnala gli alt sotto i 5 caratteri come sospetti e gli alt oltre i 200 caratteri come troppo lunghi, quindi vedi entrambi gli estremi in un passaggio di audit singolo.

Usa alt="" quando l'immagine è puramente decorativa e non aggiunge informazioni che il solo testo perde. Gli esempi includono GIF spacer, divisori ornamentali, pattern di sfondo, icone decorative accanto a testo che dice la stessa cosa e abbellimenti in stile CSS. Abbina alt="" con role="presentation" per essere esplicito riguardo all'intento decorativo. La stringa vuota dice agli screen reader di saltare l'immagine pulitamente. Perdere completamente l'attributo alt (nessun alt= affatto) forza gli screen reader ad annunciare il nome file, che è il risultato sbagliato per le immagini decorative. La guida di audit 2024 WCAG.com nota che l'11% delle immagini decorative portano alt verbosi che dovrebbero essere vuoti, e l'8% delle immagini significative portano alt vuoti che dovrebbero essere descrittivi. Attiva il campo Tratta alt='' vuoto come decorativo intenzionale per controllare come questo checker gestisce i vuoti alti ambigui sul tuo sito.

Nome file come alt (alt="IMG_2847.jpg" o alt="screen-shot-2024-01-15.png") dice agli screen reader di leggere letteralmente il nome file carattere per carattere, che suona come rumore e non comunica nulla riguardo all'immagine. Fornisce anche a Google Image Search nulla di utile per fare ranking, poiché i nomi file alfanumerici casuali non portano alcun contenuto semantico. Lo studio 2024 di Ahrefs sulla ricerca di immagini ha rilevato che le pagine con alt di nome file su più del 20% delle immagini si classificano il 40% più basso in Google Image Search rispetto alle pagine con alt descrittivi su ogni immagine. Questo checker segnala i pattern di nome file (IMG_, DSC_, screen-shot, .jpg nel valore alt, ecc.) come sospetti in modo che tu possa correggerli rapidamente. Sostituisci alt="IMG_2847.jpg" con ciò che l'immagine effettivamente mostra: alt="Black leather Chelsea boot, side profile". La correzione richiede 10 secondi per immagine e recupera sia il valore di accessibilità che il valore SEO di immagine.

Google legge il testo alt in due posti: come segnale di ranking primario per Google Image Search, e come contesto di contenuto per la pagina circostante nella ricerca web regolare. Per la ricerca di immagini, Google classifica le immagini in parte da quanto bene il testo alt corrisponda alla query di ricerca, insieme al nome file, al testo circostante e ai segnali di qualità dell'immagine. Per la ricerca web, Google usa il testo alt per comprendere di cosa parla una pagina quando le immagini portano contenuto significativo (grafici, foto di prodotto, infografiche). Uno studio 2024 di Ahrefs su 1,2 milioni di risultati di ricerca di immagini ha rilevato che le pagine con alt descrittivi su ogni immagine above-the-fold si classificano dal 30-50% più in alto in Google Image Search rispetto alle pagine con alt mancanti o nome file. Google non penalizza direttamente il testo alt mancante nei ranking di ricerca web regolari, ma gli alt mancanti forfettano il traffico di ricerca di immagini e indeboliscono i segnali di rilevanza topicale. Usa questo checker più il website-metadata-checker per un audit SEO completo on-page.

Alt text (alt="...") è l'alternativa testuale per il contenuto dell'immagine, letta dagli screen reader e utilizzata dai motori di ricerca per il ranking di immagini. L'attributo title (title="...") è testo supplementare mostrato come tooltip al passaggio del mouse in alcuni browser, ed è in gran parte ignorato dagli screen reader e dai motori di ricerca. Alt è richiesto da WCAG. Title è opzionale e spesso inutile poiché gli utenti mobile non possono passare il mouse, e molti screen reader desktop lo saltano. Se hai qualcosa di utile da dire riguardo a un'immagine, mettilo nell'alt o nel paragrafo circostante, non nel title. Il sondaggio 2024 di WebAIM degli utenti di screen reader ha rilevato che il 73% dei rispondenti ha preferito l'alt text rispetto agli attributi title per le informazioni dell'immagine. Questo checker audita solo l'attributo alt, poiché il title raramente vale la pena ottimizzare. Focalizza il tuo sforzo sulla scrittura di alt forti e sul salto dei title a meno che tu non abbia una ragione specifica per usarli.

Gli screen reader come NVDA, JAWS e VoiceOver annunciano le immagini leggendo l'attributo alt ad alta voce, con prefisso della parola "immagine" o "grafica" a seconda dello screen reader. Per <img alt="Black leather Chelsea boot">, NVDA annuncia "grafica, Black leather Chelsea boot". Per <img alt=""> abbinato a role="presentation", lo screen reader salta l'immagine interamente. Per <img> senza l'attributo alt affatto, la maggior parte degli screen reader ricade nella lettura del nome file o dell'URL, che suona come "grafica, I M G underscore 2 8 4 7 dot J P G". Il sondaggio 2024 di WebAIM degli screen reader ha rilevato che il 67% dei rispondenti ha valutato il testo alt mancante o scadente come una "barriera molto seria" all'uso del web, classificandolo al di sopra delle etichette di modulo mancanti e della navigazione da tastiera rotta. Esegui questo checker prima di qualsiasi rilascio per catturare gli alt mancanti e sospetti prima che gli utenti di screen reader li incontrino.

Il buon alt text è breve (40-80 caratteri tipici, 125 max), descrive ciò che l'immagine mostra in linguaggio semplice, e aggiunge informazioni non già nel testo circostante. Inizia con l'elemento visivo più importante. Per una foto di prodotto: "Red Adidas Samba, three-quarter view". Per un grafico: "Bar chart showing 40% revenue growth Q1 to Q4 2024". Per un ritratto: "Sarah Chen, CEO of Acme, smiling at camera". Salta frasi come "image of" o "picture of" poiché gli screen reader annunciano già l'immagine. Salta il nome file. Salta il keyword stuffing. Per le immagini decorative, usa alt="" con role="presentation". Per immagini complesse come infografiche, scrivi un alt breve e metti la descrizione completa nel paragrafo circostante o in un elemento aria-describedby. Questo checker segnala gli alt sotto i 5 caratteri, oltre i 200 caratteri, tutto maiuscole, singola parola e pattern di nome file in modo che tu possa riscrivere quelli deboli in un passaggio.