Toegankelijke koppen

Koppen maken een tekst overzichtelijk. Ze zien er vaak wat anders uit dan gewone tekst: ze hebben grotere letters en zijn vetgedrukt. Zo kun je een pagina snel scannen. Maar dat werkt alleen als je het scherm kunt zien. Software moet de structuur ook kunnen begrijpen. Pas dan kan iemand die een schermlezer gebruikt een pagina ook 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 én zoekmachines.

Waarom koppen zo belangrijk zijn

Een schermlezer kan een koppenlijst opbouwen van alle koppen op de pagina. Dit werkt net als de inhoudsopgave van een boek. De koppen verdelen de pagina in hoofdstukken, paragrafen en subparagrafen. Door de koppenlijst te openen of door van kop naar kop te springen, kan de gebruiker snel en efficiënt navigeren.

Wist je dat 67,7% van de schermlezergebruikers via koppen door een pagina navigeert? Dat blijkt uit het Screen Reader User Survey #9 van WebAIM. Onder ervaren gebruikers is dat zelfs 76%. Geen enkel ander element wordt zo vaak gebruikt om content te vinden.

In de Rotor van VoiceOver ziet zo’n koppenlijst er zo uit:

Lees meer over voorleessoftware gebruiken

Als je kopstructuur niet klopt, dan is dat alsof je de inhoudsopgave van een boek helemaal door elkaar haalt. En als je helemaal geen koppen in de code gebruikt? Dan bestaat die inhoudsopgave niet. De gebruiker moet dan de volledige pagina lineair doorlopen om te vinden wat hij zoekt.

Wat hoort een schermlezer aan te kondigen?

Stel dat op een pagina de tekst “Contact” staat in een groter, vetgedrukt lettertype. Visueel herken je dit als kop. Maar wat een schermlezer aankondigt, hangt af van de code.

Als “Contact” is opgemaakt als <p> (paragraaf) met CSS-opmaak, hoort de gebruiker:

“Contact”

Gewoon tekst. De gebruiker weet niet dat hier een nieuwe sectie begint.

Is dezelfde tekst opgemaakt als <h2> (kop van niveau 2), dan hoort de gebruiker:

“Kop niveau 2, Contact”

Nu weet de gebruiker twee dingen: hier begint een nieuwe sectie, en die sectie zit hiërarchisch onder de vorige <h1>. Bovendien verschijnt deze kop in de koppenlijst, zodat de gebruiker er later direct naartoe kan navigeren.

Koppen in de code

Koppen worden opgemaakt met de HTML-elementen <h1> tot en met <h6>. Het nummer geeft het kopniveau aan. De <h1> is de belangrijkste kop, een <h6> de minst belangrijke.

Gebruik de <h1> voor de titel aan het begin van de content. Dit helpt om het onderwerp van de pagina duidelijk te maken. Gebruik <h2>’s voor de hoofdsecties in de content en (als dat nodig is) <h3>, <h4>, <h5> of <h6> voor de subsecties.

In een CMS kun je via de editor meestal eenvoudig van gewone tekst een koptekst maken. Gebruik de opmaakstijlen in je editor. Je selecteert de tekst en kiest welk kopniveau je wilt gebruiken. Zo krijgt je kop de juiste HTML-code.

In WordPress ziet dit er zo uit:

Maak een kop dus niet handmatig groter, vetgedrukt of in een andere kleur, maar kies het juiste kopniveau (Kop 2, Kop 3, enz.).

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.

Visueel verborgen koppen

Soms staan er koppen in de code die visueel verborgen zijn. Dit is toegestaan. Denk aan secties die visueel al duidelijk zijn door de paginaopmaak, maar waar schermlezergebruikers nog een extra navigatiepunt nodig hebben. De verborgen kop verschijnt dan wel in de koppenlijst van de schermlezer en helpt dan bij het navigeren.

Een visueel verborgen kop moet wel kloppen in de hiërarchie. Een verborgen <h2> die eigenlijk onder een <h3> valt, maakt de structuur net zo verwarrend als bij een zichtbare kop.

Gebruik een logische kopvolgorde

Zorg dat je koppen in een logische volgorde staan. Vergelijk het met een boek: de titel is het hoogste niveau, de hoofdstukken zitten daaronder, en binnen elk hoofdstuk heb je paragrafen.

Begin met een <h1> voor de paginatitel. Daaronder komen <h2>’s voor de hoofdsecties. Subsecties binnen een <h2> krijgen een <h3>, enz.

Gebruik opeenvolgende kopniveaus. Sla bij voorkeur geen niveaus over (van <h2> naar <h4>). Dit kan verwarrend zijn voor schermlezergebruikers. Bij het sluiten van een diepere sectie mag je wél terug naar een hoger niveau. Een <h2> die een nieuwe sectie opent ná een <h4> die de vorige sectie afsloot, is prima.

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>

...

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.

Vereisten een aanbevelingen voor toegankelijke koppen

Dit zijn de vereisten en aanbevelingen voor het gebruik van koppen:

WCAG-vereisten

• Maak koppen op met <h1> tot en met <h6>-elementen.
• Tekst die eruitziet als een kop moet ook in de code een kop-element zijn.
• Tekst die geen kop is, mag niet worden opgemaakt met een kop-element.
• Zorg dat koppen beschrijvend zijn voor de onderliggende content.
• Houd kopteksten kort en duidelijk.

Aanbevolen

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

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)