Koppen geven structuur aan een tekst. Vaak is de structuur van een tekst goed zichtbaar in de vormgeving. Ze hebben vaak een iets grotere letter en zijn vaak dikgedrukt. Dit is vooral handig voor mensen die dit kunnen zien. Deze structuur in de content moet ook door software te begrijpen zijn. Dan kan ook iemand die een schermlezer gebruikt een pagina snel scannen.
Koppen hebben meerdere functies:
- Koppen geven structuur aan de content.
- Schermlezers kunnen een overzicht van alle koppen op een webpagina presenteren. Op deze manier kan snel worden genavigeerd naar de content.
- Schermlezers hebben een ingebouwde sneltoets waarmee snel van kop naar kop kan worden genavigeerd.
- Zoekmachines gebruiken de koppen bij het beoordelen van de inhoud van een webpagina.
Correct gebruik van koppen is dus belangrijk voor toegankelijkheid, gebruiksvriendelijkheid en voor zoekmachines.
Het gebruik van koppen valt onder succescriterium 1.3.1 Info en relaties en succescriterium 2.4.6 Koppen en labels van de richtlijnen voor toegankelijkheid van webcontent.
Koppen gebruiken
In een CMS kunnen koppen meestal makkelijk worden toegevoegd in de editor op de pagina. Geef aan welke tekst een kop is en bepaal het niveau van de kop. De editor zorgt dat de juiste HTML-elementen worden toegevoegd aan de tekst. Koppen worden opgemaakt met de HTML-elementen <h1> tot en met <h6>.
In WordPress ziet dit er zo uit:
Gebruik het kop-element niet om alleen een bepaalde presentatie van de tekst te bereiken. Tekst die géén kop is, mag niet worden opgemaakt met een HTML kop-element.
Gebruik een logische kopvolgorde
Zorg dat koppen worden gebruikt volgens in een logische kop-volgorde. Gebruik hiervoor een juiste hiërarchie: de <h1> is de belangrijkste kop op een pagina, een <h6> is het minst belangrijk.
Gebruik de <h1> voor de paginatitel aan het begin van de content. Dit helpt om het onderwerp van de pagina duidelijk te maken. Gebruik <h2>’s voor de belangrijkste koppen in de content en, als dat nodig is, de <h3>’s en misschien zelfs <h4>, <h5> of <h6> voor de tussenkoppen om de content verder in secties te verdelen.
Sla geen kopniveau’s over.
Voorbeeld van een juiste kopvolgorde van op de pagina Voorbeeld WCAG-onderzoek:
<h1>Voorbeeld WCAG-onderzoek</h1>
<h2>Inhoudsopgave</h2>
<h2>Samenvatting</h2>
<h2>Gegevens</h2>
<h3>Website naam</h3>
<h3>Scope</h3>
<h3>Conformiteit</h3>
<h4>Uitzonderingen</h4>
<h3>Ondersteuning</h3>
<h3>Vereisten</h3>
<h2>Resultaten</h2>
<h3>Principe 1: Waarneembaar</h3>
...Schermlezers kunnen deze koppen presenteren in een handig overzicht. Dit werkt net zoals de inhoudsopgave van een boek; De pagina wordt verdeeld in hoofdstukken, paragrafen en subparagrafen. Zo kunnen mensen die gebruik maken van een schermlezer snel en efficiënt navigeren in de content.
In de Rotor van VoiceOver ziet dit er zo uit:
Lees meer over voorleessoftware gebruiken
Beschrijf de onderliggende content
Zorg dat de koppen en de tussenkoppen een goed beeld geven van de content van een pagina. De tekst in de kop moet duidelijk en beschrijvend zijn voor de onderliggende content. Beschrijvende koppen zorgen dat het mogelijk is om een tekst goed te scannen en te voorspellen waar de relevante content staat. Zo krijgt de gebruiker een goed idee van wat hij kan verwachten.
Tips voor toegankelijke koppen
Tot slot nog een paar tips voor het gebruiken van koppen:
- Gebruik maximaal één
<h1>per pagina. - Zorg dat de
<h1>aan het begin van de content wordt geplaatst. - Zorg dat de koptekst van de
<h1>(grotendeels) hetzelfde is als de titel van de pagina. - Houd kopteksten zo veel mogelijk beknopt.
Zoek je een hulpmiddel om snel de koppen en kopvolgorde van een pagina te controleren? De browser extensie headingsMap geeft een overzicht van alle koppen en kopniveaus op een webpagina. Download op Windows of macOS voor Mozilla Firefox, Google Chrome of Microsoft Edge.