Koppen

Waarom koppen zo belangrijk zijn

Koppen zijn het belangrijkste navigatiemiddel voor schermlezergebruikers. Uit het WebAIM-onderzoek blijkt dat 67% van de schermlezergebruikers koppen gebruikt als primaire manier om door een pagina te navigeren. Ze drukken op de H-toets om van kop naar kop te springen, net zoals een ziende gebruiker de pagina scant op vetgedrukte titels.

Als je koppen niet goed zijn opgebouwd – of helemaal ontbreken – dan is je pagina voor deze gebruikers een muur van tekst zonder structuur.

Twee aparte eisen

WCAG stelt twee verschillende eisen aan koppen, en die worden vaak door elkaar gehaald:

1. SC 1.3.1 (Informatie en relaties) – koppen moeten in de code als kop zijn gemarkeerd. Gebruik <h1> t/m <h6>, geen gestylede <div> of <p>.
2. SC 2.4.6 (Koppen en labels) – koppen moeten het onderwerp van de content beschrijven. Een kop die “Sectie 3” zegt, is technisch correct gemarkeerd maar inhoudelijk nietszeggend.

Dit zijn twee aparte criteria. Je kunt aan het ene voldoen en het andere overtreden.

De regels voor een goede koppenstructuur

Gebruik echte kopelementen

Een schermlezer herkent alleen <h1> t/m <h6> als koppen. Een <div class="heading"> of <p><strong>Titel</strong></p> ziet er visueel misschien uit als een kop, maar is onzichtbaar in de koppenlijst.

<div class="section-title">Onze diensten</div>

<h2>Onze diensten</h2>

Eén h1 per pagina

Elke pagina heeft precies een <h1>. Dat is de hoofdkop die het onderwerp van de pagina beschrijft. Alle andere koppen vallen daaronder.

Sla geen niveaus over

Koppen vormen een hierarchie, vergelijkbaar met een inhoudsopgave. Spring niet van <h1> naar <h3> zonder een <h2> ertussen.

<h1>Webshop</h1>
  <h3>Dameskleding</h3>
  <h3>Herenkleding</h3>
    <h5>Broeken</h5>

<h1>Webshop</h1>
  <h2>Dameskleding</h2>
  <h2>Herenkleding</h2>
    <h3>Broeken</h3>

Gebruik koppen niet voor visueel effect

Soms wordt een <h3> gebruikt puur omdat de tekst kleiner moet zijn dan een <h2>. Dat is de verkeerde reden. Het kopniveau bepaalt de positie in de hierarchie, niet de tekstgrootte. Pas de styling aan met CSS.

Maak koppen beschrijvend

Een kop moet duidelijk maken waar de sectie over gaat. Vermijd vage koppen als “Meer informatie”, “Sectie 2” of “Details”.

<h2>Meer informatie</h2>
<h2>Details</h2>
<h2>Overig</h2>

<h2>Levertijden en verzendkosten</h2>
<h2>Retourbeleid</h2>
<h2>Veelgestelde vragen</h2>

Veelgemaakte fouten

• Kop die geen kop is – visueel groot en vet, maar in de code een <div> of <p>
• Niveaus overslaan – van <h2> naar <h4> springen
• Meerdere h1’s – twee of meer <h1>’s op dezelfde pagina
• Kop voor styling – een <h4> gebruiken omdat het lettertype kleiner moet
• Vage koppen – “Lees meer”, “Klik hier”, “Informatie”

WCAG-succescriteria

Verder lezen

• SC 1.3.1: Kopniveaus – wanneer een overgeslagen kopniveau een probleem is
• Zo controleer je de koppenstructuur van je website – stap-voor-stap uitleg met tools

Quiz