# Immagini decorative e informative

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

<!-- Fonte: https://sitoanorma.it/docs/accessibilita/immagini -->
<!-- Aggiornato: 2026-08-15 -->

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

```html
<!-- 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.

| Contesto | `alt` sbagliato | `alt` corretto |
|----------|-----------------|----------------|
| Foto prodotto in scheda | "immagine" | "Scarpa da running blu, vista laterale" |
| Logo che linka alla home | "logo" | "Acme, vai alla home page" |
| Grafico di andamento | "grafico" | "Fatturato in crescita da 1,2 a 1,8 M€ tra 2023 e 2025" |
| Icona busta accanto all'email | "busta" | `alt=""` (l'email è già scritta accanto) |

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:

```html
<!-- 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:

```html
<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:

```html
<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.