Immagini decorative e informative

Come distinguere immagini decorative e informative ai fini dell'accessibilità, scrivere un testo alternativo utile e gestire grafici e icone.

Le immagini sono il punto in cui l’accessibilità tocca direttamente il markup. La regola è semplice ma va applicata a ogni immagine: stabilire se è informativa o decorativa e trattarla di conseguenza.

La distinzione

• Informativa: trasmette un contenuto (un grafico, la foto di un prodotto, un’icona che veicola significato). Richiede un testo alternativo che ne riporti l’informazione.
• Decorativa: puramente estetica (uno sfondo, un divisore, un’onda grafica). Non aggiunge informazione e va ignorata dagli screen reader, con alt="".

La domanda guida: se l’immagine sparisse, l’utente perderebbe un’informazione? Sì → informativa. No → decorativa.

Markup

<!-- Informativa: alt che riporta l'informazione -->
<img src="grafico-vendite.png"
     alt="Vendite in crescita del 20% nel 2025 rispetto al 2024" />

<!-- Decorativa: alt vuoto, ignorata dagli screen reader -->
<img src="onda-sfondo.svg" alt="" />

Attenzione: alt="" (vuoto) e alt assente non sono equivalenti. Con alt="" lo screen reader salta l’immagine; senza attributo alt, molti screen reader leggono il nome del file, che è quasi sempre inutile o incomprensibile.

Per le immagini puramente decorative inserite via CSS (background-image) il problema non si pone: non sono nell’albero di accessibilità.

Scrivere un buon testo alternativo

Il testo alternativo non descrive l’immagine: veicola la stessa informazione che l’immagine veicola in quel contesto.

Regole pratiche:

• non iniziare con “immagine di”: lo screen reader annuncia già che è un’immagine;
• non ripetere il testo già presente accanto all’immagine: crea un doppione fastidioso;
• lo stesso file può avere alt diversi in pagine diverse: dipende dal contesto, non dal file.

Icone e pulsanti

Un pulsante con sola icona ha bisogno di un nome accessibile, altrimenti viene annunciato come “pulsante” e basta:

<!-- Icona SVG inline dentro un pulsante -->
<button type="button" aria-label="Chiudi">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
</button>

aria-hidden="true" sull’SVG evita che il contenuto grafico venga annunciato; aria-label sul pulsante fornisce il nome. Se accanto all’icona c’è già del testo visibile, l’icona va nascosta e basta:

<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Elimina
</button>

Immagini complesse

Per grafici e infografiche l’alt breve spesso non basta. L’informazione va resa disponibile anche senza vedere l’immagine:

<figure>
  <img src="ripartizione-fatturato.png"
       alt="Ripartizione del fatturato 2025 per area: dettaglio nella tabella seguente" />
  <figcaption>Ripartizione del fatturato 2025</figcaption>
</figure>

<table>
  <caption>Fatturato 2025 per area geografica</caption>
  <thead>
    <tr><th scope="col">Area</th><th scope="col">Fatturato</th></tr>
  </thead>
  <tbody>
    <tr><td>Nord</td><td>820.000 €</td></tr>
    <tr><td>Centro</td><td>410.000 €</td></tr>
    <tr><td>Sud e isole</td><td>270.000 €</td></tr>
  </tbody>
</table>

La tabella dei dati è quasi sempre l’alternativa migliore a un grafico: è utile a tutti, non solo a chi usa uno screen reader.

Testo dentro le immagini

Evitalo. Il testo in un’immagine non è selezionabile, non si adatta allo zoom, non rispetta le preferenze di contrasto e non è traducibile. Se è inevitabile (un logo), il criterio WCAG 1.4.5 lo tollera; per tutto il resto va usato testo reale, eventualmente sovrapposto all’immagine via CSS.

Cosa verificare

• Ogni immagine ha un attributo alt (anche vuoto, se decorativa).
• Le informative hanno un alt che veicola l’informazione, non il nome del file.
• Le decorative hanno alt="", non un alt descrittivo.
• I pulsanti con sola icona hanno un nome accessibile.
• Grafici e infografiche hanno un’alternativa testuale estesa.
• Nessuna informazione importante è solo dentro un’immagine.