Rol Oriëntatiepunt

`complementary`

Een landmark voor inhoud die de hoofdinhoud ondersteunt maar op zichzelf betekenisvol is — zijbalken, gerelateerde-artikelvensters, aanvullende uitroepblokken. Het <aside>-element draagt deze rol wanneer het op het hoogste niveau staat.

Wanneer gebruiken

Gebruik <aside> voor een zijbalk op het hoogste niveau, een “Gerelateerde artikelen”-rail, een auteursbiografie naast een bericht of een “Wat is er nieuw”-paneel. Wanneer <aside> een direct kind is van <body> (of naast <main> staat), wordt het weergegeven als een complementary-landmark.

<aside> genest binnen een <article> wordt NIET gepromoveerd tot landmark — het blijft een generieke groep. Dit onderscheid is opzettelijk: een complementary-landmark is op paginaniveau; zijbalken binnen één artikel zijn dat niet.

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

De inhoud erin moet de hoofdinhoud ondersteunen maar zelfstandig kunnen staan — als het verwijderen ervan de pagina onvolledig maakt, is het waarschijnlijk niet aanvullend.

Wanneer labelen

Bij meerdere complementary-landmarks (een linker- EN een rechterkolom) dient elk een uniek aria-label of aria-labelledby te krijgen. Bij één complementary-landmark is een label optioneel — schermlezers kondigen het aan als “aanvullend”.

Gangbare labels: “Gerelateerde artikelen”, “Hulpmiddelen”, “Nieuwsbrief aanmelden”, “Recent bekeken”.

Veelvoorkomende fouten

<aside> gebruiken voor uitroepblokken binnen alinea’s van lopende tekst. Te gedetailleerd — vervuilt het landmarkmenu.
De secundaire links in de voettekst van de gehele site als complementary-landmark markeren. Voettekstnavigatie hoort in <nav> binnen <footer>.
Meerdere complementary-landmarks zonder labels.
role="complementary" plaatsen op een <section> die de hoofdinhoud van de pagina bevat. Gebruik in dat geval <main>.
<aside> binnen <article> plus een expliciet role="complementary" om landmark-blootstelling te forceren — gewoonlijk een teken dat de inhoud op paginaniveau thuishoort, niet binnen het artikel.

Voorbeeld

<main>
  <article>
    <h1>Designing for screen readers</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Related articles</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
    <li><a href="/articles/skip-links">Skip links done right</a></li>
  </ul>
</aside>