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.

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

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

address {
  font-style: normal;
}

Quali dati servano dipende dalla forma giuridica: vedi dati aziendali per forma giuridica.

Blocco link legali

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

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

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.