Gebruik echte koppen, geen dikgedrukte tekst
Een regel tekst vet maken of groter zetten maakt het nog geen kop. Screenreaders herkennen alleen koppen als je echte HTML-koppen gebruikt: <h1> t/m <h6>. Zonder echte koppen ontbreekt de structuur en wordt navigeren onnodig lastig. Succescriterium 1.3.1 gaat hier dieper op in.
Let op de hiërarchie
- Gebruik één
<h1>voor het hoofdonderwerp van de pagina. - Gebruik
<h2>voor de hoofdsecties op de pagina. - Gebruik
<h3>voor subsecties binnen een<h2>, en ga zo verder indien nodig. - Sla geen niveaus over: ga dus niet van
<h2>direct naar<h4>.
Denk aan koppen als een inhoudsopgave: de structuur moet logisch blijven, ook als je de pagina niet ziet.
Wat zet je in een kop?
Een goede kop is beschrijvend en vertelt in één oogopslag waar het blok over gaat. Vermijd vage koppen zoals “Meer informatie” of “Algemeen”.
Beter is:
- “Minimale contrastverhoudingen”
- “Wanneer is tekst groot of dikgedrukt?”
- “Veelgemaakte fouten bij alt-teksten”
Houd koppen daarnaast kort en scanbaar. Zet geen hele alinea’s in een kop en gebruik geen alleen maar “marketingtaal” zonder inhoud.
Veelgemaakte fouten
- Een kop opmaken met
<strong>of CSS in plaats van een<h2>of<h3>. - Koppen gebruiken voor styling, bijvoorbeeld een “kop” die eigenlijk een button of label is.
- Onlogische volgorde (bijvoorbeeld meerdere
<h1>’s of niveaus overslaan). - Nietszeggende koppen zoals “Lees verder”, “Overig” of “Klik hier”.