Alt text delle immagini

Cosa controlla questo check

Conta gli elementi <img> e quanti di essi hanno un attributo alt non vuoto. Riporta il rapporto.

Perché è importante

L’alt text serve tre tipi di pubblico:

• Gli screen reader leggono l’alt ad alta voce agli utenti non vedenti e ipovedenti. Senza, l’utente sente “immagine” o il nome del file — inutile. Inoltre è richiesto per legge nell’UE dall’Accessibility Act (giugno 2025).
• Google Immagini ordina le immagini in parte in base all’alt text. Un alt scritto bene è uno dei segnali più forti per la visibilità nelle ricerche immagini.
• I crawler IA non riescono (ancora) a comprendere in modo affidabile il contenuto delle immagini. Dipendono dall’alt per sapere cosa mostra l’immagine.

Ce n’è anche un quarto: quando un’immagine non si carica, l’alt è quel che l’utente vede al posto dell’icona di immagine rotta.

Come risolvere

Aggiungi un alt descrittivo a ogni immagine significativa:

<img src="/hero.webp" alt="Report di audit MetricSpot con punteggio 87/100 e breakdown per modulo" />

Regole:

• Descrivi cosa c’è nell’immagine, non “immagine di”. Gli screen reader già annunciano “immagine”.
• Sii specifico. alt="report" è inutile. alt="Report PDF MetricSpot con punteggio 87" è utile.
• Niente keyword stuffing. Non scrivere alt="audit SEO strumento SEO report SEO". Google penalizza e gli screen reader odiano.
• Per le immagini decorative usa alt="" (vuoto, non mancante). Gli screen reader saltano gli alt vuoti. Vale per pattern di sfondo, icone divisorie, ecc.

Aiuti dai framework:

• Next.js <Image>: alt è una prop obbligatoria.
• MDX/Markdown: l’alt sta tra le parentesi — ![questo è l'alt](immagine.jpg).

Domande frequenti

E i loghi?

I loghi che sono anche link (es. logo nell’header che porta alla home) dovrebbero descrivere la destinazione: alt="Home MetricSpot" o alt="MetricSpot". I loghi standalone nel footer possono usare alt="Logo MetricSpot".

Devo aggiungere alt alle immagini di sfondo in CSS?

Le immagini di sfondo CSS non sono accessibili agli screen reader. Se l’immagine veicola informazione, usa un <img> con alt. Se è puramente decorativa, lo sfondo CSS va bene.

L’attributo title è un sostituto?

No. title appare come tooltip al passaggio del mouse ma è ignorato dalla maggior parte degli screen reader e da molti dispositivi touch. Usa sempre alt.