Koppenstructuur en landmarks

Een gebruikelijke manier om met een schermlezer een pagina te lezen is van kop naar kop springen. Een pagina zonder h2-elementen leest dus als een boek zonder hoofdstukken.

Koppen zijn een inhoudsopgave

Ziende lezers scannen. Ze bekijken grote vette regels, vinden de gewenste sectie en beginnen daar te lezen. Schermlezergebruikers doen hetzelfde met koppen. MDN merkt op dat snel van kop naar kop springen een gebruikelijke techniek is om te ontdekken wat een pagina bevat en dat de meeste schermlezers alle koppen op de pagina kunnen opsommen. Dat werkt alleen met echte h1- tot h6-elementen. Een met CSS groot en vet gemaakte alinea lijkt op een kop maar wordt als gewone tekst aangekondigd.

WCAG 2.2 behandelt dit in succescriterium 1.3.1 Info en relaties, niveau A: visueel getoonde structuur moet ook in de code beschikbaar zijn. Criterium 2.4.6 Koppen en labels, niveau AA, voegt toe dat koppen het onderwerp van hun sectie moeten beschrijven. Een kop ‘Meer’ of ‘Sectie 2’ slaagt voor de eerste test en zakt voor de tweede.

Drie regels van MDN

Sla ten eerste geen niveaus over. Ga van h1 naar h2 naar h3. Wie direct na h1 een h4 hoort, vraagt zich af waar de ontbrekende niveaus zijn. Gebruik ten tweede bij voorkeur één h1 per pagina die de inhoud benoemt, net als het title-element. De HTML-standaard staat meerdere toe, maar MDN beschrijft één h1 als de gebruikelijke beste aanpak. Kies ten derde geen kopniveau op grootte. Als een h3 te klein oogt, verander de lettergrootte in CSS en behoud het niveau dat bij de structuur past.

Koppen schrijven die mensen kunnen gebruiken

Een koppenlijst is zo goed als haar woorden. Zet het nuttige woord eerst, want mensen die een lijst van twintig koppen scannen horen het begin en gaan verder: ‘Openingstijden’ werkt beter dan ‘Wanneer je ons kunt bezoeken’. Houd koppen kort en onderling verschillend, zodat twee secties nooit allebei ‘Details’ heten. Test daarna het overzicht. Het toegankelijkheidspaneel in browserontwikkelaarstools of de koppenlijst van een schermlezer toont alleen de koppen. Lees ze achter elkaar en vraag of ze als inhoudsopgave kloppen. Zo ja, dan profiteren ziende scanners ook.

Landmarks

Koppen verdelen de inhoud; landmarks verdelen de pagina in gebieden. De elementen header, nav, main en footer hebben elk een ingebouwde rol, zodat een schermlezer een gebiedenlijst kan aanbieden en direct naar de hoofdinhoud of navigatie kan springen. Een pagina heeft normaal één main. Met het juiste element krijg je die rollen gratis, de eerste ARIA-regel in actie: geen extra attributen nodig.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>