Rol Oriëntatiepunt

`main`

Het landmark voor hoofdinhoud — de primaire inhoud van de pagina, exclusief herhaalde kopteksten, navigatie en voetteksten. Het element <main> draagt deze rol automatisch. Precies één main per pagina.

Wanneer te gebruiken

Gebruik het element <main>. Het is het belangrijkste landmark op de pagina — schermlezersgebruikers springen doorgaans als eerste naar main om navigatie en kopteksten over te slaan.

role="main" op een <div> is alleen geschikt wanneer <main> niet kan worden gebruikt (voornamelijk een CMS-beperking). Beide vormen moeten voldoen aan dezelfde regel: precies één main per pagina. Meerdere mains verbreken de “ga naar hoofdinhoud”-functionaliteit, en veel schermlezers tonen alleen de eerste.

Het main-landmark moet alles bevatten wat uniek is voor de huidige pagina, en mag de site-header, primaire navigatie of voettekst niet bevatten. Plaats die in <header>-, <nav>- en <footer>-elementen naast <main>, niet erbinnen.

Wanneer een label toe te voegen

Eén enkele main heeft geen label nodig — schermlezers kondigen het aan als “main”. Voeg aria-label alleen toe als de pagina meerdere mains heeft (wat niet zou mogen) of als het nodig is om het hoofdinhoudsgebied van een SPA te onderscheiden van een vorige weergave.

De koppeling “Ga naar hoofdinhoud” moet verwijzen naar <main id="main"> (of welke id dan ook) met <a href="#main"> bovenaan de pagina — dit is WCAG 2.4.1’s techniek voor het omzeilen van blokken.

Veelvoorkomende fouten

Twee <main>-elementen op dezelfde pagina. De meest voorkomende oorzaak: een SPA die een nieuwe weergave’s <main> inlijnt zonder de vorige te verwijderen.
Pagina zonder <main>. Schermlezersgebruikers kunnen de header niet overslaan.
<main> geplaatst binnen <header> of <footer>. De landmarkhiërarchie is onjuist.
Sitewijde navigatie binnen <main> plaatsen. Die herhaalt zich over pagina’s en hoort thuis in <header>/<nav>, niet in de unieke inhoud van de pagina.
De koppeling “Ga naar hoofdinhoud” verwijst naar een id die niet bestaat.

Voorbeeld

<body>
  <a href="#main" class="visually-hidden focus-visible">Ga naar hoofdinhoud</a>
  <header>…</header>
  <main id="main">
    <h1>Waarom één main-landmark per pagina</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>