Testo alternativo

Definizione — Il testo alternativo (attributo alt) rende comprensibili immagini e icone a chi non le vede o usa lettori di schermo. È obbligatorio per WCAG 1.1.1 Non-text Content (A) e contribuisce a SEO, accesso da dispositivi vocali e contesti a bassa banda. Lo scopo è trasmettere lo stesso significato che l’immagine veicola visivamente.

Linee guida di scrittura

• Informative: descrivi sinteticamente il contenuto o la funzione — “Grafico delle vendite Q1-Q4 2024”.
• Funzionali (link/bottoni): descrivi l’azione — alt="Cerca", alt="Invia modulo".
• Decorative: usa alt="" (vuoto) e/o CSS background; l’elemento può avere role="presentation" o aria-hidden="true" se non focusabile.
• Complesse (infografiche, mappe): riassunto nel alt + descrizione estesa vicino (es. link “Descrizione dettagliata”).
• Icone: se c’è una label visibile adiacente, l’icona può essere aria-hidden="true".

Esempi

<!-- Immagine informativa -->
<img class="img-fluid w-100" src="/img/grafico.png" alt="Andamento vendite trimestrali 2022-2024">

<!-- Bottone con icona -->
<button type="submit">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg> Cerca
</button>

<!-- Immagine decorativa -->
<img class="img-fluid w-100" src="/img/decorazione.svg" alt="" aria-hidden="true">

<!-- Figura complessa con descrizione estesa -->
<figure>
  <img class="img-fluid w-100" src="/img/mappa.png" alt="Mappa del percorso accessibile nel museo">
  <figcaption><a class="text-primary" href="#desc-mappa">Descrizione dettagliata</a></figcaption>
</figure>
<div id="desc-mappa">…testo esteso…</div>

Buone pratiche

• Evita “immagine di”, “foto di” se non utile; vai al punto del significato.
• Non duplicare nel alt testi già adiacenti (titolo/figcaption) se la combinazione è sufficiente.
• Non usare immagini di testo: preferisci testo reale; se inevitabile, il alt deve riportare il testo.
• Per <svg> autonome, fornisci <title> (e opzionalmente <desc>) o incapsula la descrizione in aria-labelledby.

Errori comuni

• alt mancante su immagini informative o con testo.
• alt generici (“immagine”, “logo”) che non aggiungono significato; meglio “Logo AccessiWeb”.
• Decorazioni con alt descrittivi: creano rumore per gli screen reader.
• Icone con role="img" ma già etichettate da testo vicino → doppio annuncio.

WCAG correlate

• 1.1.1 Non-text Content (A), 1.4.x per immagini di testo, 2.5.3 Label in Name (per controlli con icona).