Toegankelijke koppen

Koppen maken een tekst overzichtelijk. Ze zien er vaak wat anders uit dan gewone tekst: ze hebben grotere letters en zijn vetgedrukt. Dit is vooral handig als je het kan zien. Maar software moet de structuur ook kunnen begrijpen. Dan kan ook iemand die een schermlezer gebruikt een pagina snel scannen.

Koppen hebben verschillende functies:

• Ze geven structuur aan de content.
• Schermlezers kunnen een lijst maken van alle koppen op een webpagina. Zo kunnen bezoekers snel naar het juiste deel van de tekst gaan.
• Schermlezers hebben een ingebouwde sneltoets waarmee snel van kop naar kop kan worden gesprongen.
• Zoekmachines gebruiken de koppen bij het beoordelen van de inhoud van een webpagina.

Correct gebruik van koppen is dus belangrijk voor toegankelijkheid, gebruiksvriendelijkheid en 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 kun je via de editor meestal eenvoudig van gewone tekst een koptekst maken. Je selecteert de tekst en kiest welk kopniveau je wilt gebruiken. De editor maakt er dan HTML-code van met de juiste kop-elementen. Koppen worden opgemaakt met de HTML-elementen <h1> tot en met <h6>.

In WordPress ziet dit er zo uit:

Let op: Gebruik koppen alleen om de content te structureren. 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 je koppen in een logische volgorde gebruikt. 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 goede kopvolgorde:

<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 een lijst maken van alle koppen op een webpagina. Dit werkt net zoals de inhoudsopgave van een boek. De koppen verdelen de pagina 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. Met beschrijvende koppen kun je een tekst goed scannen. Je kunt ook voorspellen waar de relevante content staat. Zo weet je als gebruiker wat je kunt verwachten.

Tips voor toegankelijke koppen

Tot slot nog een paar tips voor het gebruik van koppen:

WCAG-vereisten:

• Maak koppen op met <h1> tot en met <h6> elementen
• Zorg dat koppen beschrijvend zijn
• Houd kopteksten kort en duidelijk

Aanbevolen:

• Gebruik één <h1> per pagina
• Plaats de <h1> aan het begin van de content
• Gebruik opeenvolgende kopniveaus
• Maak de <h1> (ongeveer) gelijk aan de paginatitel

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 voor Windows of macOS voor Mozilla Firefox, Google Chrome of Microsoft Edge.

Gerelateerde succescriteria

Dit artikel behandelt twee WCAG-succescriteria:

• 1.3.1 Info en relaties (niveau A)
• 2.4.6 Koppen en labels (niveau AA)