Maak je content toegankelijk voor iedereen. Deze praktische gids helpt je de belangrijkste WCAG-regels toe te passen in je dagelijkse werk.
Waarom is dit belangrijk voor jou?
Als redacteur ben jij de sleutel tot een toegankelijke website. Neem toegankelijk vanaf het begin al mee. Hoe eerder je hiermee begint, hoe makkelijker het wordt.
Redacteuren zorgen dat alle content begrijpelijk is voor álle gebruikers.
Je belangrijkste taken
1. Structureer je content met koppen
Gebruik de kop-opmaak in de editor om je content logisch op te delen. Een goede kop vertelt duidelijk waar de tekst of het onderdeel over gaat.
De regels:
- Begin altijd met H1 (hoofdkop)
- Gebruik H2 voor hoofdonderwerpen
- Gebruik H3 voor subonderwerpen onder H2
- Gebruik maximaal één H1 per pagina
- Sla geen niveaus over: ga niet van H2 direct naar H4
Voorbeeld:
<!-- Goed voorbeeld -->
H1: Aanmelden voor dit webinar
H2: Wat leer je?
H2: Voor wie is dit webinar?
H3: Beginners
H3: Gevorderden
H2: Praktische informatie
Tip: Denk aan koppen als een inhoudsopgave. Kunnen bezoekers door alleen de koppen te lezen begrijpen waar de pagina over gaat?
De 5-minuten check
- Maak een koppenlijst:
- Ga door je pagina
- Schrijf alle koppen op (H1, H2, H3, etc.)
- Nummer ze in volgorde
- Controleer de logica:
- Begint je pagina met een H1?
- Sla je geen niveaus over? (niet van H2 naar H4)
- Beschrijft elke kop wat eronder staat?
- Test met een schermlezer:
- Start je schermlezer
- Druk op H (NVDA) of Control + Option + Command + H (VoiceOver)
- Luister naar de koppen
- Begrijp je de structuur?
Let op: Gebruik kop-stijlen alleen voor structuur, niet alleen om tekst op te maken volgens een bepaalde styling.
2. Schrijf duidelijke linkteksten
Schrijf linkteksten die vertellen waar de link naartoe gaat. Vermijd vage linkteksten zoals “lees meer” of ”klik hier”.
Voorbeelden:
- ❌ Fout: ”Voor meer informatie over linkteksten, klik hier”
- ✅ Goed: ”Lees meer over linkteksten”
De 5-minuten check
- Ga door alle links op je pagina
- Controleer de linktekst:
- Is duidelijk waar de link naartoe gaat?
- Kun je dit begrijpen zonder de omringende tekst?
- Vermijd “klik hier”, “lees meer”, “meer info”
- Test met een schermlezer:
- Start je schermlezer
- Druk op K (NVDA) of Control + Option + Command + L (VoiceOver)
- Luister naar de links
- Begrijp je waar de link naar toe gaat?
3. Schrijf tekstalternatieven voor afbeeldingen
Voeg bij elke afbeelding een korte beschrijving toe die vertelt wat de afbeelding laat zien of doet.
Hoe pak je dit aan:
- Beschrijf wat er te zien is op de afbeelding of, als het een link is, waar de link naar verwijst
- Houd het kort: maximaal 150 tekens
- Gebruik geen “afbeelding van” of “foto van”
Voorbeelden:
- ❌ Fout: “IMG_20250613.jpg”
- ✅ Goed: “Team viert succes in kantoor”
- ❌ Fout: “afbeelding van een man”
- ✅ Goed: “Man in pak presenteert aan whiteboard”
Tip: Is de afbeelding alleen maar voor decoratie? Laat dan het tekstalternatief leeg.
4. Schrijf duidelijke en unieke paginatitels
Schrijf beschrijvende titels die vertellen waar de pagina over gaat.
De perfecte paginatitel is:
- Zorg dat elke pagina een unieke titel heeft
- Gebruik 50-60 karakters (anders wordt het afgekort)
- Begin met het onderwerp, eindig met de organisatie
Voorbeelden:
- ❌ Fout: “Home” of “Welkom”
- ✅ Goed: “Digitale toegankelijkheid advies – WCAG.nl”
De 5-minuten check
- Bekijk de browsertab:
- Staat er een duidelijke titel?
- Weet je direct waar je bent?
- Is het korter dan 60 tekens?
- Test met meerdere pagina’s:
- Open 5 pagina’s van je website
- Heeft elke pagina een unieke titel?
- Kun je ze uit elkaar houden door de tabbladen?
Hulpmiddelen voor jou
Koppenstructuur bekijken:
- headingsMap browser extensie
- Toont een overzicht van al je koppen
- Laat sprongen in niveaus zien
Lees meer over hulpmiddelen bij het toetsen
Praktische tips
Afbeeldingen
- Geef informatieve en functionele afbeeldingen een tekstalternatief. Beschrijf wat je ziet. Is er geen informatie te zien? Laat het tekstalternatief dan leeg.
Media
- Voeg bij elk geluidsfragment een transcript toe.
- Maak bij filmpjes zonder geluid een audiodescriptie.
- Voorzie filmpjes van ondertitels én een audiodescriptie.
Navigeren
- Geef elke pagina een duidelijke paginatitel.
- Schrijf linkteksten die zeggen waar de link naartoe gaat. Vermijd vage woorden zoals “klik hier” of “lees meer”.
Tekst
- Gebruik de kop-opmaak in de editor. Gebruik H1 voor de hoofdtitel. Bouw je koppen daarna logisch op (H1 → H2 → H3).
- Gebruik de lijst-opmaak in de editor als je een opsomming maakt.
- Gebruik de tabel-opmaak in de editor als je een tabel maakt. Voeg duidelijke tabelkoppen toe.
- Gebruik de juiste taalcode als je tekst in een andere taal schrijft.
Succescriteria
Alle succescriteria waar een redacteur bij betrokken is:
- Niet-tekstuele content
- Louter-geluid en louter-videobeeld (vooraf opgenomen)
- Ondertitels voor doven en slechthorenden (vooraf opgenomen)
- Audiodescriptie of media-alternatief (vooraf opgenomen)
- Ondertitels voor doven en slechthorenden (live)
- Audiodescriptie (vooraf opgenomen)
- Info en relaties
- Betekenisvolle volgorde
- Zintuiglijke eigenschappen
- Identificeer het doel van de input
- Gebruik van kleur
- Geluidsbediening
- Contrast (minimum)
- Afbeeldingen van tekst
- Contrast van niet-tekstuele content
- Drie flitsen of beneden drempelwaarde
- Paginatitel
- Linkdoel (in context)
- Meerdere manieren
- Koppen en labels
- Label in naam
- Taal van de pagina
- Taal van onderdelen
- Consistente identificatie
- Foutidentificatie
- Labels of instructies
- Foutsuggestie
- Foutpreventie (wettelijk, financieel, gegevens)
- Naam, rol, waarde
Meer hulp nodig?
Heb je vragen over toegankelijkheid, behoefte aan advies of wil je een onderzoek laten uitvoeren? Stuur me dan gerust een bericht via niek@wcag.nl of bezoek WCAG.nl voor meer informatie.
Ik maak WCAG-richtlijnen begrijpelijk en help je praktische oplossingen vinden.