Je pagina heeft geen hoofdgebied: gebruik het main-element

Het main-element markeert de hoofdinhoud van je pagina, alles behalve je menu, header en footer. Het is onzichtbaar, maar schermlezers gebruiken het als herkenningspunt.

In het kud-rapport Je pagina heeft geen hoofdgebied

Waarom het uitmaakt

Met een main-element springt een schermlezergebruiker in één keer naar je inhoud. Zonder moet hij eerst langs je hele menu, op elke pagina opnieuw.

Het hoort bij nette, semantische HTML. Die helpt ook zoekmachines en leesmodi in browsers om je inhoud te herkennen.

Zo los je het op

Zet je hoofdinhoud in één main-element, tussen je header en footer.
Gebruik er maar één per pagina.
Gebruik ook header, nav en footer voor de andere delen van je pagina.
Voeg een skiplink toe, "Naar de inhoud", die naar je main springt. Die is handig voor toetsenbordgebruikers.

<a class="skip" href="#main">Naar de inhoud</a>
<header>...</header>
<main id="main">
  ...je inhoud...
</main>
<footer>...</footer>

Op jouw platform

WordPress: Moderne thema's hebben dit al. Oudere thema's en sommige paginabouwers gebruiken alleen div's; dan moet het in de themabestanden worden aangepast.

Veelgestelde vragen

Verandert dit iets aan hoe mijn site eruitziet?

Nee, main is onzichtbaar. Het verandert alleen hoe hulpmiddelen je pagina begrijpen.

Wat is een skiplink?

Een link die pas verschijnt als je met Tab begint, en die je direct naar de inhoud brengt, langs het menu.