Toegankelijke koppen op een webpagina of in een app

Zorg voor een duidelijke structuur van de tekst op een pagina of scherm. Bijvoorbeeld door gebruik te maken van koppen. Zo begrijpen bezoekers de inhoud en opbouw en het maakt het navigeren makkelijker.

Officiële informatie

Voor wie is het nodig

Mensen die een schermlezer gebruiken kunnen een koppenoverzicht opvragen om een overzicht van een pagina of scherm te krijgen om makkelijk relevante informatie te vinden. Ook kunnen mensen van kop naar kop navigeren. Een goede koppenstructuur, waarin de koppen beschrijvend zijn over de onderliggende inhoud, is onder andere belangrijk voor mensen die blind en slechtziend zijn, mensen die dyslectisch zijn en mensen met cognitieve beperkingen.

Opmaak van koppen

Een kop beschrijft de inhoud eronder. Als je een kop gebruikt, zorg dan dat je die ook als kop markeert met de functies van het systeem waarmee je inhoud op een webpagina of in een app publiceert.

Tekst dikgedrukt maken en een andere kleur geven is niet genoeg.

Niveaus van de koppen

Koppen kunnen op websites verschillende niveaus hebben. Het hoogste kopniveau is niveau 1. Door de verschillende niveaus is het mogelijk om hiërarchie aan te brengen in de inhoud. De hiërarchie is belangrijk voor toegankelijkheid.

Gebruik bij voorkeur een logische volgorde, en sla geen niveaus over. In apps kun je geen verschillende kopniveau’s gebruiken.

Handige hulpmiddelen

  • HeadingsMap is een tool die je aan je browser kunt toevoegen. In een zijbalk zie je het overzicht met alle koppen op de pagina. Zo zie je snel welke tekst is opgemaakt als kop en welke niet. En je ziet of de structuur van de koppen klopt. Vergelijk dit met de teksten die eruitzien als koppen op de website en zorg dat dit hetzelfde is.
  • Accessiblity Insights is een tool die je aan Chrome of Microsoft Edge kan toevoegen. De koppen op de pagina worden omlijnd en het kopniveau staat bij elke kop. Zo kun je makkelijk zien of alle koppen wel als kop zijn opgemaakt. Je ziet ook of de koppen op een verkeerd niveau zijn toegevoegd.

Meer informatie voor apps

Deze tekst is een vereenvoudigde versie van de eisen uit WCAG. Hieraan kunnen geen rechten worden ontleend. Voor de volledige eisen, raadpleeg de officiële norm Opent in nieuw tabblad.
Heb je gevonden wat je zocht?

Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)



Waar was je naar op zoek?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)