Rol Oriëntatiepunt

`contentinfo`

Het sitewijde voettekst-landmark — auteursrechtinformatie, contactgegevens, juridische koppelingen. Het bovenste <footer>-element draagt deze rol automatisch. Slechts één contentinfo per pagina.

Wanneer gebruiken

Gebruik <footer> als een direct kind van <body>. Wanneer <footer> op het hoogste niveau staat, stelt de browser het automatisch bloot als een contentinfo-landmark. Wanneer het genest is binnen <article>, <section>, <main> of <aside>, is het slechts een generieke groep en geen landmark.

role="contentinfo" op een <div> is alleen geschikt wanneer <footer> niet gebruikt kan worden (legacy-CMS).

Er mag per pagina niet meer dan één contentinfo zijn. Als afzonderlijke artikelen hun eigen voetteksten hebben (naamregel, deelknoppen), gebruik dan een gewone <footer> genest in <article> — die zijn geen landmarks, wat het juiste resultaat is.

Wanneer labelen

Een enkel contentinfo heeft geen label nodig — schermlezers kondigen het aan als “inhoudsinformatie”. Als een label noodzakelijk lijkt, is dat gewoonlijk een teken dat er twee contentinfos zijn en één ervan geen voettekst op het hoogste niveau mag zijn.

Veelvoorkomende fouten

Twee <footer>-elementen op het hoogste niveau. Twee contentinfo-landmarks; schermlezergebruikers kunnen niet onderscheiden welke de echte is.
role="contentinfo" op een <footer> genest in <article> of <main>. De rol overschrijft het standaard niet-landmark-gedrag en voegt onnodige verwarring toe.
“Secundaire navigatie”-koppelingen in <footer> als platte lijst plaatsen. Wikkel ze in <nav aria-label="Voettekst"> zodat ze als navigatielandmark verschijnen.
Sitewijde cookiebanner binnen <footer> plaatsen — het is een dialoogvenster of een regio, geen onderdeel van contentinfo.
Lege <footer> in de DOM laten als lay-outplaatshouder — het contentinfo-landmark bestaat dan zonder inhoud.

Voorbeeld

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