Vai al contenuto

Verificatore Alt Text Immagini

Risposta breve

Trova le immagini prive di testo alternativo e controlla gli attributi alt esistenti.

Cosa non fa: Controlla se il testo alternativo è presente, vuoto o un nome di file, non se descrive bene l’immagine, e non include immagini aggiunte da script o impostate come sfondo CSS.

Gratuito · Senza registrazione · Funziona nel browser
100% nel tuo browser — i contenuti non lasciano mai il tuo dispositivo.

Cosa fa

Analizza ogni <img> sulla pagina e convalida la presenza dell'alt text, il rilevamento delle immagini decorative tramite `alt=""` vuoto, e i pattern di alt uguale al nome del file (alt text che ripete semplicemente il nome del file dell'immagine). Restituisce un elenco delle immagini che richiedono attenzione.

Perché è importante

L'alt text è il modo in cui gli utenti di screen reader scoprono cosa mostra un'immagine, e il criterio WCAG 1.1.1 richiede un'alternativa testuale per ogni immagine significativa. Google usa anche l'alt text, insieme alla pagina che lo circonda, per capire le immagini per Google Immagini. L'alt text mancante fa fallire il primo gruppo e lascia meno indizi al secondo.

Come funziona

  1. Inserisci l'URL di una pagina o incolla il suo HTML

  2. Leggiamo ogni elemento <img> e il suo attributo alt dall'HTML

  3. Eseguiamo le regole di qualità: alt mancante, alt vuoto (decorativo) e alt uguale al nome del file

  4. Restituiamo la copertura dell'alt text più un elenco delle immagini prive di un alt text corretto

Esempio di input e output

INPUT
url: https://web.dev/articles/vitals
OUTPUT
immagini: 9
  con alt: 8
  alt vuoto (decorative): 1
  senza alt: 0                              OK
  alt = nome del file: 0                    OK

Copertura: 100%

Come leggere il risultato

Immagini (9 nell'esempio)
Ogni elemento <img> nell'HTML inviato dal tuo server. Le immagini di sfondo CSS, disegnate in SVG o aggiunte dopo da uno script non vengono contate.
Senza alt (0)
Immagini senza alcun attributo alt. I lettori di schermo allora spesso leggono il nome del file o dicono solo «immagine», e il criterio WCAG 1.1.1 non è rispettato. È questo numero che abbassa il punteggio.
Alt vuoto (1)
Immagini con alt="". È corretto per un'immagine puramente decorativa e sbagliato per una che porta informazioni. Lo strumento non può distinguerle, quindi mostra il numero senza giudizio: controlla ciascuna.
L'alt è solo il nome del file
Un testo alternativo che ripete il nome del file, come «hero-banner-2» o «IMG_0423», non dice niente a nessuno. Riceve un avviso anche se l'attributo è presente.
Copertura (100%)
La quota di immagini con un attributo alt, vuoto o no. Il 100% significa che non ne manca nessuno; non significa che ogni testo sia buono, perché lo strumento non può giudicare se un alt descrive la sua immagine.
Immagini da correggere
Sotto i numeri, il report elenca fino a otto immagini senza alt per nome di file, così le trovi nel modello o nella libreria multimediale.

Chi lo usa

  • Responsabile e-commerce

    Controlla le pagine prodotto per immagini senza alt text o con il nome del file come alt text, un'impostazione predefinita comune nei cataloghi.

  • Auditor di accessibilità

    Controlla la copertura dell'alt text secondo WCAG 1.1.1 pagina per pagina ed elenca ogni immagine senza attributo alt.

  • Redattore di contenuti

    Controlla ogni pagina che pubblichi per individuare le immagini caricate senza alt text prima che si accumulino.

Problemi comuni e come risolverli

  1. Immagini di contenuto senza alt

    Scrivi ciò che l'immagine mostra e che conta in questa pagina: «Scarpa da trail rossa, vista laterale» in una scheda prodotto, l'andamento di un grafico in un report. Resta su una frase; le descrizioni più lunghe vanno nel testo o in una didascalia.

    <img src="/signups.png" alt="Bar chart: sign-ups doubled from March to June">
<img src="/divider.svg" alt="">

  2. Il CMS aggiunge immagini senza alt

    La maggior parte dei sistemi di contenuto ha un campo alt nella libreria multimediale: rendilo obbligatorio per i redattori e stampalo nel modello invece di omettere l'attributo. Per le immagini decorative, fai scrivere al modello alt="" in modo esplicito.

  3. Icone e loghi

    Un'icona accanto a un'etichetta di testo è decorativa: alt="". Un'icona che è l'unico contenuto di un pulsante o di un link ha bisogno di un alt che nomini l'azione («Cerca», «Chiudi menu»). Un logo che porta alla home ha bisogno del nome dell'organizzazione, non di «logo».

    <a href="/"><img src="/logo.svg" alt="Example Ltd – home"></a>
<button type="button"><img src="/icons/search.svg" alt="Search"></button>
<img src="/icons/check.svg" alt=""> In stock

  4. Alt pieno di parole chiave

    Le linee guida di Google sulle immagini sconsigliano di riempire gli attributi alt di parole chiave. Descrivi l'immagine; cita l'argomento una volta, in modo naturale, quando è davvero nell'immagine.

  5. Grafici e immagini complesse

    Dai all'alt un breve riassunto, come «Grafico a barre: le iscrizioni sono raddoppiate da marzo a giugno», e metti i dati completi nel testo della pagina o in una tabella accanto, così tutti possono averli.

Domande frequenti

Quando l'alt text dovrebbe essere vuoto?
Per le immagini decorative che non aggiungono valore informativo (motivi di sfondo, divisori). Usa `alt=""` così gli screen reader le saltano. Non omettere mai completamente l'attributo.
Cosa rende buono un alt text?
Una breve frase che descrive cosa mostra l'immagine e perché è lì. Evita "immagine di" o "foto di", e usa una parola chiave solo dove descrive davvero l'immagine.
Come usa Google l'alt text?
Google usa l'alt text, insieme al contenuto della pagina, per capire cosa mostra un'immagine, il che lo aiuta a mostrarla in Google Immagini. Gli assistenti AI che leggono una pagina possono usarlo allo stesso modo.
E le didascalie delle figure?
Le didascalie (`<figcaption>`) completano l'alt text ma non lo sostituiscono. Entrambe dovrebbero descrivere l'immagine; l'alt è per gli screen reader, la didascalia è per chi vede.

Fonti

La documentazione su cui si basano questo strumento e le spiegazioni di questa pagina.

Strumenti gratuiti su questo tema

Guide su questo tema

Dati di ricerca su questo tema

Strumenti correlati in Analisi SEO

Vedi tutti gli strumenti Analisi SEO