Ruolo Punto di riferimento

`contentinfo`

Il landmark footer a livello di sito — copyright, contatti, link legali. L'elemento <footer> di primo livello assume automaticamente questo ruolo. Un solo contentinfo per pagina.

Quando utilizzarlo

Si utilizzi <footer> come figlio diretto di <body>. Quando <footer> si trova al livello principale, il browser lo espone automaticamente come landmark contentinfo. Quando è annidato all’interno di <article>, <section>, <main> o <aside>, è semplicemente un gruppo generico, non un landmark.

role="contentinfo" su un <div> è appropriato solo quando non è possibile utilizzare <footer> (CMS legacy).

Non deve esserci più di un contentinfo per pagina. Se i singoli articoli hanno i propri footer (riga autore, pulsanti di condivisione), si utilizzi <footer> annidato dentro <article> — questi non sono landmark, il che è il risultato corretto.

Quando etichettarlo

Un singolo contentinfo non ha bisogno di un’etichetta — gli screen reader lo annunciano come «informazioni sul contenuto». Se un’etichetta sembra necessaria, è di solito un segnale che si hanno due contentinfo e uno di essi non dovrebbe essere un footer di primo livello.

Errori comuni

Due elementi <footer> al livello principale. Due landmark contentinfo; gli utenti di screen reader non riescono a distinguere quale sia quello reale.
role="contentinfo" su un <footer> annidato dentro <article> o <main>. Il ruolo sovrascrive il comportamento predefinito di non-landmark e aggiunge rumore.
Inserire i link di «navigazione secondaria» in <footer> come lista piatta. Si racchiudano in <nav aria-label="Footer"> così appaiono come landmark di navigazione.
Banner cookie a livello di sito inserito dentro <footer> — si tratta di un dialog o una region, non fa parte di contentinfo.
<footer> vuoto lasciato nel DOM come segnaposto di layout — il landmark contentinfo esiste senza contenuto.

Esempio

<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <nav aria-label="Footer">
      <a href="/about">Chi siamo</a>
      <a href="/privacy">Privacy</a>
      <a href="/contact">Contatti</a>
    </nav>
    <p>&copy; 2026 Disability World</p>
  </footer>
</body>