De kopstructuur van uw website: waarom H1, H2 en H3 ertoe doen

Een redacteur wilde een zin wat groter hebben. Ze selecteerde de tekst en koos in de editor “Kop 4”, omdat die maat er mooi uitzag. Een paar regels verder deed ze hetzelfde met “Kop 2”, omdat die vet was. Op het scherm zag de pagina er netjes uit. Voor een bezoeker met een schermlezer was het een inhoudsopgave die nergens op sloeg. Een goede kopstructuur op uw website gaat niet over hoe het eruitziet, maar over wat het betekent.

Waarom koppen voor toegankelijkheid zo veel uitmaken

Ziende bezoekers scannen een pagina. Ze kijken naar de grote, vette regels en beslissen in een paar seconden waar ze gaan lezen. Iemand die blind is, kan dat niet met de ogen. Een schermlezer leest de pagina van boven naar beneden voor, en dat duurt lang.

Daarom gebruiken veel schermlezergebruikers de koppen om te navigeren. Met een sneltoets springen ze van kop naar kop, of ze vragen een lijst op van alle koppen op de pagina. Dat is hun manier van scannen. De schermlezer vertelt daarbij ook het niveau: “kop niveau 2, Verzendkosten”. Uit die niveaus haalt de gebruiker de opbouw van de pagina.

Als de koppen kloppen, werkt dat geweldig. Als ze worden gebruikt voor opmaak, of als belangrijke tussenkopjes gewoon vette tekst zijn, valt die snelweg weg.

Wat WCAG vraagt

Twee succescriteria zijn hier van belang:

• 1.3.1 Info en relaties (niveau A): als iets er visueel uitziet als een kop, moet het in de code ook een kop zijn. Een vetgedrukte regel die als tussenkop fungeert, zonder kop-element, voldoet niet.
• 2.4.6 Koppen en labels (niveau AA): koppen moeten beschrijven waar het onderwerp of het doel van de sectie over gaat.

Strikt genomen eist WCAG geen perfecte volgorde zonder overgeslagen niveaus. Maar een logische hiërarchie is de algemeen aanbevolen werkwijze, en een rommelige volgorde maakt de pagina voor schermlezergebruikers verwarrend. Behandel het dus als vaste regel.

Zo ziet een goede kopstructuur van een website eruit

Denk aan een inhoudsopgave van een boek. Er is één titel, dan hoofdstukken, dan paragrafen binnen die hoofdstukken.

H1  Fietsonderhoud aan huis
  H2  Wat wij doen
    H3  Kleine onderhoudsbeurt
    H3  Grote onderhoudsbeurt
  H2  Tarieven
  H2  Veelgestelde vragen
    H3  Hoe snel kunt u komen?
    H3  Werkt u ook aan e-bikes?

De regels:

1. Eén H1 per pagina, met het onderwerp van de pagina. In WordPress is dat meestal de paginatitel, die het thema automatisch als H1 toont. Zet in de inhoud dus geen tweede H1.
2. Daaronder H2’s voor de hoofdonderdelen.
3. H3 alleen binnen een H2, als onderverdeling van dat onderdeel.
4. Sla geen niveaus over naar beneden: niet van H2 direct naar H4.
5. Terug omhoog mag wel: na een H3 kan gewoon weer een H2 komen.

Koppen zijn geen opmaak

Dit is de fout die het vaakst voorkomt, en hij heeft twee kanten.

Kop gebruiken voor de grootte

Een zin moet opvallen, dus wordt hij een kop. Of een blok in een pagebuilder heeft een titel die standaard een H2 is, terwijl het om een klein kaartje in een raster gaat. Het resultaat: de lijst met koppen bevat tientallen regels als “Lees meer”, “Volg ons” en “Nieuwsbrief”.

Oplossing: gebruik voor grote of opvallende tekst gewone tekst met een eigen stijl. In de meeste editors en pagebuilders kunt u het HTML-niveau van een titel los kiezen van de opmaak. In Elementor kunt u bij een kopwidget bijvoorbeeld de HTML-tag instellen, en ook kiezen voor een div of p als het geen echte kop is.

Opmaak gebruiken in plaats van een kop

Andersom: een tussenkopje dat alleen vet is gemaakt, of groter gezet met de lettergrootte-instelling. Visueel een kop, voor de schermlezer gewone tekst. Oplossing: maak er een echt kopblok van.

Wat ook meetelt: de tekst van de kop

Een kop moet zeggen wat eronder staat. “Meer informatie” of “Overig” zegt niets. Bij het springen door koppen hoort een schermlezergebruiker alleen de kop, zonder de tekst eromheen. “Levertijd en verzendkosten” werkt, “Goed om te weten” niet.

Houd koppen ook kort. Een kop van drie regels is eigenlijk een alinea. En kijk naar de volgorde: als alle koppen achter elkaar worden voorgelezen, moet het een logisch verhaal zijn.

Uw kopstructuur controleren

Dat hoeft niet ingewikkeld te zijn. Een paar manieren:

• In de WordPress-blokeditor vindt u bij de documentinformatie een overzicht van de koppen op de pagina, met een waarschuwing als er een niveau ontbreekt.
• Met een browserextensie zoals HeadingsMap ziet u in één oogopslag de koppenstructuur van elke pagina, inclusief de koppen uit thema, sidebar en footer.
• Met de WAVE-tool ziet u onder het tabblad voor structuur alle koppen met hun niveau.
• Met een schermlezer: open de lijst met koppen (in NVDA met Insert+F7, in VoiceOver op de Mac via de rotor) en luister of het klopt.

Controleer niet alleen de inhoud van één bericht, maar ook de vaste delen: header, sidebar en footer. Daar zitten vaak H2’s of H4’s die in elke pagina terugkomen en de volgorde verstoren. Dat is een thema-aanpassing die één keer gedaan moet worden.

Een goede kopstructuur helpt niet alleen screenreadergebruikers, ook zoekmachines lezen uw pagina beter. Waar toegankelijkheid en vindbaarheid elkaar verder raken, leest u in toegankelijkheid en SEO.

Een bijkomend voordeel

Een duidelijke kopstructuur helpt ook zoekmachines om te begrijpen waar de pagina over gaat, en snelle lezers om te vinden wat ze zoeken. Toegankelijkheid en vindbaarheid lopen hier gelijk op. Zorg wel dat de koppen voor mensen geschreven zijn, niet volgestopt met zoekwoorden.

Koppen zijn een van de dingen die redacteuren zelf in de hand hebben, net als duidelijke linkteksten en goede alt-teksten. Wilt u nagaan hoe uw site er verder voor staat, dan beschrijft toegankelijkheid zelf testen hoe u dat stap voor stap aanpakt. Het bredere verhaal staat in toegankelijk maken volgens WCAG 2.2.