Ga naar de inhoud

Niet alle bezoekers van jouw pagina hebben (voldoende) zicht. Ze hebben mogelijk een visuele beperking en maken gebruik van een schermlezer om jouw pagina te lezen. Als koppen dan niet toegankelijk zijn kunnen ze de content niet lezen. Gelukkig kan je zelf veel doen om je content toegankelijker te maken.

In dit artikel geef ik 3 tips voor het maken van toegankelijke koppen.

Profielfoto van Ron Zuidema

Ron Zuidema

Ron is een webprofessional met een focus op digitale toegankelijkheid. Hij is gedreven voor het verbeteren van de gebruikerservaring en toegang tot informatie voor iedereen. Met zijn kennis van WCAG, WCAG-EM, webtechnieken en ondersteunende technologieën zet hij zich in voor digitale toegankelijkheid. In zijn blogs voor Digitaal Toegankelijk geeft hij je praktische handvatten waarmee je zelf aan de slag kan om de toegankelijkheid van je digitale kanalen te verbeteren.

1. Markeer koppen met kop-elementen

Zonder kop-elementen zijn je kopteksten geen échte koppen.

Dat zal ik even toelichten.

Kop-elementen zijn de HTML-elementen <h1> tot en met <h6>. Pas wanneer een koptekst opgemaakt is met zo’n element is het een échte kop. De koptekst heeft dan de functie van een kop en kan als dusdanig geïnterpreteerd worden door een schermlezer.

Screenshot van een Wordpress backend waarin je ziet hoe je van een kop een H2-kop kunt maken

Je kan zelf (makkelijk) controleren of je koptekst een kop is in de editor van je CMS of op de publieke versie van je pagina. Het CMS verschilt per website, dus duik hier zelf eens goed in. Voor het controleren van je koppen op de publieke versie van je pagina – en eigenlijk elke pagina op het web – kan je het volgende doen:

1. Klik met je rechtermuisknop op de kop, en ga naar Inspecteren (of Inspect in het Engels).

Screenshot van een website waarbij je ziet waar 'Inspect' staat in de dropdown

2. Het elementen-paneel opent en hier is het kop-element geselecteerd. (Dit kan er bij jou anders uitzien, afhankelijk van je browser en browser-instellingen.)

Screenshot van het elementen-paneel, waarin de kop zichtbaar is

3. Hier is te zien dat een koptekst is opgemaakt met een h2-element. Het element start met een <h2> en eindigt met een </h2>. Hiertussen staat de informatie van de kop.

Zo, de eerste stap naar meer toegankelijke koppen is gezet. Op naar de volgende!

2. Gebruik koppen als uithangbord van je content

Koppen zijn bedoeld om te wijzen naar de content. Zo weten je lezers waar ze moeten zijn. Ze scannen eerst de pagina voordat ze verder gaan. Ze bekijken de koppen en vormen zich zo een beeld van de inhoud. Dan besluiten ze of en wat ze willen lezen.

Beschrijvende koppen zijn cruciaal

Dit geldt nóg meer voor gebruikers van schermlezers. Gebruikers van schermlezers navigeren namelijk via de koppen van een pagina. Ze laten eerst de koppen voorlezen om een beeld te krijgen van de content. Daarna navigeren ze – met behulp van sneltoetsen – direct naar de kop waar ze meer over willen lezen. Een kop zonder (passende) content is dan ook heel verwarrend en eigenlijk gewoon clickbait.

Maak teksten zonder content, niet op met een kop-element

Helaas worden teksten nog vaak opgemaakt met een kop-element waar dit niet moet. Laten we dit eens bekijken aan de hand van een voorbeeld.

Screenshot van een website waarop zes navigatieblokken te zien zijn met ieder een eigen titel

In dit voorbeeld gaat het om zes navigatieblokken (zie hierboven). Elk blok is een link en bevat een tekst. De tekst is opgemaakt met een kop-element. Helaas zorgt dit ontwerp voor veel verwarring. Waarom? Omdat er geen content bij de kop staat, het is alleen link naar een pagina. Gebruikers van schermlezers krijgen voorgelezen dat het een kop is en verwachten dus dat er content onder staat. Maar dat is niet zo. Hoe kan je dit beter doen? Door ze op te maken als gewone tekst,  eventueel met eigen visuele opmaak.

Screenshot van een voorbeeld van een pagina waar de koppenstructuur wel goed is ingesteld

Hoe maak je dan wél goede koppen? Door alleen koppen, dus kopteksten opgemaakt met kop-elementen, te gebruiken als er content is. Zoals in het voorbeeld hierboven.

Hebben alle koppen op jouw pagina content? Goed om even te controleren!

3. Vorm met koppen een logische structuur

Koppen vormen samen een kaart van je content. Je weet uit de vorige stap waarom het zo belangrijk is dat koppen de onderliggende content beschrijven. Anders heb je een kaart met “gaten”. En een kaart met gaten, daar valt niet mee te navigeren. Dit gaat nog vaak mis op websites.

Een voorbeeld van onlogische structuur: verdwaalde koppen in de footer

Vaak hebben koppen in de footer geen passende kop van hoger niveau. Ze vallen dan onder een kop uit de content van de pagina. En dit zorgt voor een onduidelijke koppenstructuur. Kijk maar eens naar het voorbeeld hieronder.

Screenshot van een website van een zwembad waarbij de koppenstructuur niet goed in orde is

Neem bijvoorbeeld deze pagina met vier H4-koppen in de footer. De vier koppen zijn: “Adresgegevens”, “Sitemap”, “Volg ons” en “Bedrijfsgegevens”. Dit zijn allemaal koppen die algemene informatie van de website bevatten.

Daarboven staat als eerste kop van een hoger niveau: een H2-kop met “Trimzwemmen”. Dit zorgt ervoor dat deze bedrijfsgegevens vallen onder “Trimzwemmen”, wat onjuist is en verwarrend voor iemand die met een schermlezer navigeert. Deze gebruiker komt mogelijk nooit bij de bedrijfsinformatie terecht.

Kleine disclaimer: mogelijk heb je foute koppen op je pagina die je zelf niet kunt aanpassen. Ze zitten dan in het template van de pagina. Vraag dan eventueel een technische collega om hulp, die kan de basis vast goed neerzetten.

Na het toepassen van deze drie tips heb je jouw koppen op je pagina toegankelijk gemaakt voor iedereen!