Koppenhiërarchie

Koppenhiërarchie is de discipline waarbij <h1>-<h6>-elementen worden gebruikt om een consistente structuur van een pagina-inhoud te vormen. Goed gedaan geeft het schermlezergebruikers een gratis inhoudsopgave. Slecht gedaan — overgeslagen niveaus, puur decoratieve koppen, meerdere h1’s, generieke divs als koppen — maakt de pagina onbegrijpelijk voor gebruikers van hulptechnologie.

De basisstructuur

<h1>Artikeltitel (één per pagina)</h1>
  <h2>Hoofdsectie</h2>
    <h3>Subsectie</h3>
    <h3>Subsectie</h3>
  <h2>Hoofdsectie</h2>
    <h3>Subsectie</h3>
      <h4>Sub-subsectie</h4>

De regels:

1. Eén <h1> per pagina — de primaire paginatitel. Meerdere h1’s verwarren schermle­zers over de identiteit van de pagina.
2. Geen overgeslagen niveaus bij afdaling. Een <h2> kan worden gevolgd door een <h3> (één niveau dieper), maar niet door een <h4> (twee niveaus dieper). Een overgeslagen niveau geeft een schermlezer het signaal dat er iets tussen ontbreekt.
3. Koppen weerspiegelen inhoudsstructuur, geen visuele stijl. Als een stuk tekst groot oogt maar geen kop van nieuwe inhoud is, gebruik dan een gestylede alinea, geen kop.
4. Geen lege koppen. <h2></h2> is betekenisloos. Vul het in of verwijder het.

Waarom schermle­zers dit belangrijk vinden

De meest voorkomende schermlezernavigatie-operatie is “spring naar volgende kop” — de H-toets in JAWS en NVDA, de rotormodus “Koppen” in VoiceOver, de koppen-leesbesturing in TalkBack.

Een gebruiker die een lang artikel opent, drukt herhaaldelijk op H om een indruk te krijgen van de structuur voordat hij ook maar iets leest. Als de koppen coherent zijn, krijgt hij een gratis overzicht van het stuk. Als de koppen puur decoratief zijn of niveaus overslaan, krijgt hij ruis.

Wat er in productie misgaat

• Geen <h1>. De pagina heeft geen primaire kop. Schermle­zers kondigen de paginatitel aan vanuit <title>, maar de in-pagina kopennavigatie heeft geen anker. Veel voorkomend op slecht gestructureerde CMS-pagina’s waar de artikeltitel als gestylede tekst wordt weergegeven, maar nooit als <h1> is gemarkeerd.
• Meerdere <h1>’s. “Herotitel” en “eerste sectietitel” zijn beide gemarkeerd als <h1>. Schermlezergebruikers horen twee h1’s en kunnen niet bepalen welke de paginatitel is.
• Overgeslagen niveaus. <h1> → <h3> omdat het ontwerp geen tekst van <h2>-grootte wilde. Schermlezernavigatie leest “ontbrekend kopniveau.”
• Divs gestyled als koppen. <div class="hed-xl">Sectietitel</div>. De schermle­zer krijgt geen kop. Oplossing: gebruik het juiste <hN>, style met CSS.
• Koppen gebruikt voor opmaak. Een <h2> op een zijbalklabel plaatsen zodat het er visueel als een kop uitziet, terwijl het label in inhoudstermen geen kop is. Gebruik een gestylede alinea.

Hoe koppenhiërarchie te auditeren

Drie benaderingen:

1. Kopenlijst van schermlezer. Open Insert+F7 in NVDA of VO+U → Koppen. De weergegeven lijst moet logisch zijn als overzicht van de pagina. Als dat niet zo is, herstel de opmaak.
2. HeadingsMap-browserextensie. Rendert de koppenstructuur van de pagina visueel. Niveaus en hiaten zijn onmiddellijk zichtbaar.
3. axe-core-scan. Detecteert ontbrekende h1, overgeslagen niveaus (in sommige configuraties) en lege koppen.

Waarom één h1 per pagina een betwist punt is

HTML5 suggereerde oorspronkelijk dat geneste <section>-elementen hun eigen koppenomgeving creëerden, waardoor meerdere <h1>’s mogelijk waren. Browsers en schermle­zers hebben dit gedrag nooit geïmplementeerd. De WCAG Working Group van het W3C is teruggekeerd naar “één h1 per pagina” als de geldende richtlijn. De meeste moderne stijlgidsen en toegankelijkheidsaudits handhaven de één-h1-regel.