L'attributo alt fornisce una alternativa testuale descrivendo il contenuto o la funzione di un'immagine. Serve utenti e strumenti che non possono vedere l'immagine.
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
L'attributo alt fornisce una alternativa testuale descrivendo il contenuto o la funzione di un'immagine. Serve utenti e strumenti che non possono vedere l'immagine.
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt ad alta voce, così un utente cieco sa cosa trasmette l'immagine. Senza di esso, sentono il nome del file o semplicemente "immagine" — inutile.alt invece di un'icona di immagine rotta.alt per comprendere e indicizzare le immagini (SEO delle immagini).<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
L'alt="" (vuoto, ma presente) è importante: dice ai screen reader "questa è decorativa, ignorala." Omettere alt completamente è diverso — allora il lettore potrebbe annunciare il nome del file.
alt è l'attributo di accessibilità singolo più importante per le immagini ed è un requisito legale secondo gli standard di accessibilità (WCAG).
Rende il contenuto percettibile agli utenti non vedenti, fornisce un fallback quando le immagini si rompono e aiuta la SEO — descrivere cosa l'immagine significa nel contesto, e usare alt="" per le immagini puramente decorative.