# Footer: dati e link legali

> Cosa mettere nel footer di ogni pagina, cioè dati identificativi e blocco dei link legali, con il markup semantico corretto.

<!-- Fonte: https://sitoanorma.it/docs/footer/dati-obbligatori -->
<!-- Aggiornato: 2026-08-15 -->

Il footer è l'elemento che risolve più obblighi con meno lavoro: essendo globale, soddisfa in un colpo solo l'esposizione dei dati su ogni pagina (inclusa la home, che è ciò che conta per la P.IVA) e la raggiungibilità delle pagine legali.

## Dati identificativi

```html
<footer>
  <address>
    <p>Acme S.r.l.</p>
    <p>Via Roma 1, 20121 Milano (MI)</p>
    <p>
      P. IVA 01234567890 ·
      REA MI-1234567 ·
      Cap. soc. € 10.000 i.v.
    </p>
    <p><a href="mailto:info@acme.it">info@acme.it</a></p>
  </address>
</footer>
```

`<address>` è l'elemento corretto per i recapiti del titolare della pagina, non per un indirizzo postale qualsiasi. Ricorda di normalizzare lo stile:

```css
address {
  font-style: normal;
}
```

Quali dati servano dipende dalla forma giuridica: vedi [dati aziendali per forma giuridica](/docs/dati-aziendali/cosa-esporre).

## Blocco link legali

I link alle pagine legali devono essere raggiungibili **da ogni pagina**. Il footer è il posto naturale.

```html
<nav aria-label="Link legali">
  <ul>
    <li><a href="/privacy">Privacy Policy</a></li>
    <li><a href="/cookie">Cookie Policy</a></li>
    <li><a href="/note-legali">Note legali</a></li>
    <li><a href="/accessibilita">Dichiarazione di accessibilità</a></li>
    <li>
      <button type="button" data-azione="preferenze-cookie">
        Preferenze cookie
      </button>
    </li>
  </ul>
</nav>
```

Note sul markup:

- `aria-label` sul `<nav>` è necessario perché la pagina contiene più navigazioni (principale, footer, legali): senza etichetta uno screen reader le annuncia tutte come "navigazione".
- La revoca del consenso è un'**azione**, non una destinazione: va usato un `<button>`, non un link. Compare solo se il sito usa cookie non tecnici.
- La lista `<ul>` non è decorativa: comunica il numero di voci a chi naviga con screen reader.

## Un errore che vediamo spesso

Un footer che linka pagine legali **inesistenti**. Succede quando si copia un template o si disattiva una pagina senza togliere il link.

Il risultato è peggiore dell'assenza del link: il sito dichiara di avere una privacy policy e restituisce un 404. Vale la pena presidiarlo con un test:

```ts
test("ogni link legale del footer risponde", async () => {
  const html = await render("/");
  const href = [...html.matchAll(/href="(\/[^"]*)"/g)].map((m) => m[1]);
  for (const url of href) {
    expect(await esiste(url)).toBe(true);
  }
});
```

## Cosa verificare

- [ ] Il footer compare su tutte le pagine, home inclusa.
- [ ] Contiene i dati richiesti dalla forma giuridica.
- [ ] Tutti i link legali puntano a pagine esistenti.
- [ ] Il `<nav>` dei link legali ha un `aria-label`.
- [ ] Il pulsante di revoca cookie c'è se e solo se il sito usa cookie non tecnici.