Digitale toegankelijkheid is een inkoppertje
Hoe goede koppen en structuur jouw website laten scoren
Pak een boek en sla de inhoudsopgave open. In één oogopslag zie je waar welk hoofdstuk over gaat en waar je moet zijn. Een website werkt hetzelfde, maar dan met koppen. In de praktijk gaat dat vaak mis: een vetgedrukte kop lijkt perfect, maar is het niet. En de volgorde van de koppen is als een kleine la met twintig oplaadkabels. Het gevolg: de voorleessoftware van 300.000 blinden en slechtzienden in Nederland werkt niet, en zij kunnen niet door je site navigeren. In dit blog lees je hoe je koppen overzichtelijk plaatst, zodat iedereen vlot de weg vindt.
-
Een schermlezer is software die hardop voorleest wat er op het scherm staat. Zo ‘lezen’ blinden en slechtzienden een pagina via geluid. Het handige: zo’n schermlezer zet alle koppen in een lijst, als een soort inhoudsopgave. De lezer kiest een kop en gaat meteen naar die alinea. Daarvoor moeten je koppen wel goed in de code staan. Hoe je dat doet, lees je hieronder.
Een vetgedrukte kop, is geen kop
Koppen worden vaak groot of vet gemaakt. Dat oogt overzichtelijk, maar leest voor een schermlezer als gewone tekst. Zonder échte koppen leest de schermlezer de gehele pagina van boven naar beneden. Kies daarom in je CMS of in Word de juiste kopstijl: ‘Kop 1’, ‘Kop 2’, ‘Kop 3’. In de code heten ze soms ook ‘H1’, ‘H2’, ‘H3’. Dan ziet de code een kop en telt die mee in de inhoudsopgave. De schermlezer zet hem in de koppenlijst, en de lezer gaat direct naar het deel dat hij zoekt. Iedereen blij.
-
… je volgens WCAG, de internationale norm voor toegankelijke websites, koppen ook als kop in de code moet zetten? Alleen vetgedrukte tekst telt niet. Dezelfde norm vraagt ook dat een kop duidelijk beschrijft waar een alinea over gaat. Voor de overheid is dit al sinds 2018 verplicht, en sinds 2025 geldt het via de Europese toegankelijkheidswet ook voor veel bedrijven.
Koppen tellen
Koppen werken met niveaus, net als de hoofdstukken en subhoofdstukken in een boek. Stel, je schrijft een pagina over gezond eten:
De H1 is je hoofdonderwerp: Gezond eten.
H2 is een hoofdstuk daarbinnen, bijvoorbeeld ‘Ontbijt’ of ‘Avondeten’.
H3 valt dan weer onder een H2-hoofdstuk. Onder ‘Ontbijt’ past bijvoorbeeld ‘Havermout’ en ‘Smoothies’.
-
Gebruik één H1 per pagina, de titel van het stuk.
Ga op volgorde: van H1 naar H2 naar H3, zonder een niveau over te slaan.
Maak elke kop concreet. ‘Zo maak je havermout’ zegt meer dan ‘Lees meer’.
Een toegankelijke kop helpt iedereen
Een heldere koppenstructuur helpt degenen die voorleessoftware gebruiken én maakt de tekst behapbaar voor 1 op de 6 laaggeletterde mensen in Nederland. Die koppen knippen een lange lap tekst op in overzichtelijke alinea’s. Dezelfde koppen die blinden en slechtzienden verder helpen, maken je pagina dus voor iedereen beter leesbaar.
Maak je website toegankelijk, begin bij je koppen
Goede koppen kosten je weinig tijd en maken je pagina toegankelijker, leesbaarder en beter vindbaar. En het is geen vrijblijvende keuze meer: de Europese toegankelijkheidswet verplicht ook veel bedrijven om hun website toegankelijk te maken. Op je website valt daarnaast nog meer te winnen. Als het eerste erkende B1-bureau van Nederland schrijven we bij Door Lotje Getikt helder en toegankelijk, zodat iedere lezer je tekst begrijpt.
Meer lezen over toegankelijke teksten?