Scrivi alt text significativi per le immagini

Cosa controlla questo check

Scorre ogni elemento <img> della pagina e ispeziona l’attributo alt. Il check fallisce quando l’alt è uno di questi: un nome file (IMG_2837.jpg, hero-final-v2.png), un placeholder generico (image, picture, photo, img), un singolo carattere (x, .), o inizia con “Image of” / “Picture of” — la tecnologia assistiva annuncia già il ruolo come “grafica”, quindi premettere la descrizione è solo rumore ridondante.

Questo è il check complementare di Testo alternativo immagini, che controlla solo la presenza. Questo check valuta la qualità.

Perché è importante

Un alt text scadente peggiora attivamente l’esperienza.

• Gli utenti di screen reader lo sentono al posto di vedere l’immagine. “IMG underscore due otto tre sette punto jay-peg” è l’esito peggiore possibile — la tecnologia assistiva legge il nome del file lettera per lettera.
• I motori di ricerca usano l’alt text come segnale di ranking per la ricerca immagini. I nomi file come alt sprecano lo spazio.
• Gli estrattori AI (LLM multimodali che scansionano una pagina) citano l’alt text quando descrivono la pagina. Una pagina dove ogni alt è hero.jpg sembra di basso impegno sia agli umani sia all’AI.

La soluzione non è “aggiungi più parole”. È “descrivi l’immagine, nel suo contesto, in linguaggio semplice”.

Come risolvere

Apri ogni immagine segnalata e riscrivi l’alt per descrivere ciò che l’immagine trasmette nel contesto in cui appare. Stessa immagine, pagina diversa, alt diverso — è normale.

Immagini decorative (bordi del logo, divisori, pattern hero) — alt vuoto:

<img src="/divider.svg" alt="">

alt="" dice agli screen reader “salta questa; non porta significato”. Non omettere del tutto l’attributo — l’assenza di alt fa cadere alcuni reader sull’annuncio del nome del file.

Immagini informative — descrivi la funzione o il contenuto:

<!-- Bad -->
<img src="/charts/q3.png" alt="chart">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Image of the dashboard">

<!-- Good -->
<img src="/charts/q3.png" alt="Q3 revenue up 38% over Q2, driven by enterprise tier">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="MetricSpot dashboard showing five passing checks">

Immagini con link — descrivi la destinazione, non l’immagine:

<a href="/docs/">
  <img src="/icons/book.svg" alt="Documentation">
</a>

Immagini complesse (grafici, infografiche) — descrivi i dati e poi rimanda:

<img src="/q3-funnel.png" alt="Conversion funnel: 1000 visits → 230 signups → 28 paid (2.8%).">
<a href="/q3-funnel-full.txt">Full data table</a>

Pattern CMS / framework.

• WordPress — Libreria Media → clicca un’immagine → campo “Testo alternativo”. Verifica i post esistenti via Strumenti → Stato del sito → Immagini senza alt text.
• Astro / Next.js Image — <Image alt={...} /> è obbligatorio a livello di tipo; TypeScript rifiuta la build senza.
• React — scrivi una piccola regola di lint (jsx-a11y/alt-text da eslint-plugin-jsx-a11y) e fai fallire la CI su alt mancanti o simili a nomi file.

Verifica tu stesso. Apri la console di DevTools ed esegui:

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Tutto quello che appare nel risultato è un alt spazzatura.

Domande frequenti

Ogni immagine deve avere un alt text?

Sì, ma può essere vuoto (alt="") per quelle decorative. L’attributo stesso deve essere presente — è l’assenza a essere segnalata come violazione dagli strumenti.

Quanto deve essere lungo l’alt text?

Quanto serve, il più corto possibile. Una frase è tipica; un grafico può richiederne due. Evita il “limite” di 125 caratteri che potresti vedere citato — è una voce sui buffer degli screen reader, non un vincolo reale.

Devo includere la parola “image”?

No. Gli screen reader annunciano già il ruolo (“grafica”). Dire “Image of a dog” fa sì che il reader pronunci “grafica, image of a dog”. Scrivi semplicemente “Golden retriever puppy chewing a shoe”.