Rol Oriëntatiepunt

`banner`

Het sitewijde header-landmark — bevat doorgaans het logo, de primaire navigatie en zoeken. Het bovenste <header>-element draagt deze rol automatisch. Slechts één banner per pagina.

Wanneer gebruiken

Gebruik <header> als direct kind van <body> (of <html> in een fragment op het hoogste niveau). Wanneer <header> op het hoogste niveau staat, legt de browser het automatisch bloot als banner-landmark. Wanneer <header> is genest binnen <article>, <section>, <main> of <aside>, is het slechts een generieke groep, geen landmark.

role="banner" op een <div> is alleen passend wanneer <header> niet kan worden gebruikt — bijvoorbeeld in een CMS dat landmark-tags verwijdert.

Er mag niet meer dan één banner per pagina zijn. Als er een tweede header is die niet de siteheader is (een sectie-header, een commentaarreeks-header), gebruik dan een gewone <header> genest binnen de bijbehorende sectie, niet op het hoogste niveau.

Wanneer een label toevoegen

Als een pagina meerdere landmarks van hetzelfde type heeft (zeldzaam voor banner, gebruikelijk voor navigatie), voeg dan aria-label toe om ze te onderscheiden. Een enkele banner heeft geen label nodig — schermlezers kondigen hem aan als “banner”.

Veelvoorkomende fouten

Meerdere <header>-elementen bovenaan de pagina, elk verheven tot een banner-landmark. Schermlezers tonen twee “banner”-vermeldingen in het landmark-menu en de gebruiker kan niet bepalen welke de echte header is.
role="banner" op een <header> die is genest binnen <main> of <article>. De rol overschrijft het standaard niet-landmark-gedrag en verontreinigt de landmark-navigatie.
Sitelogo buiten <header> geplaatst, zodat het buiten het banner-landmark valt.
Plakkerige navigatie weergegeven als een aparte <div role="banner"> naast de originele <header> — twee banners.
Banner met lege inhoud (alleen decoratieve randen) — het landmark verschijnt nog steeds in de landmark-navigatie van schermlezers maar bevat niets.

Voorbeeld

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>