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?
Wil je dat jouw content zoveel mogelijk mensen bereikt? Dan is toegankelijk schrijven essentieel. Als redacteur bepaal je of mensen je boodschap kunnen lezen en begrijpen.
Duidelijke koppen en begrijpelijke linkteksten helpen mensen met een functiebeperking. Tegelijk wordt je content beter vindbaar in zoekmachines. En een logische structuur zorgt ervoor dat alle lezers je boodschap sneller begrijpen.
Begin direct met het publiceren van toegankelijke content, want achteraf aanpassen kost veel meer tijd.
Je belangrijkste taken
1. Structureer je content met koppen
Gebruik de kop-opmaak in je pagina-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 een H1 met het onderwerp van de pagina
- Gebruik H2 voor hoofdonderwerpen
- Gebruik H3 voor subonderwerpen onder een H2
- Gebruik maximaal één H1 per pagina
- Sla geen kopniveaus over: ga niet van een 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: Vergelijk de koppen van een pagina met een inhoudsopgave. Kunnen gebruikers 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 de content die 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 niet om tekst op te maken volgens een bepaalde styling maar echt alleen voor structuur.
2. Schrijf duidelijke linkteksten
Schrijf linkteksten die vertellen waar de link naartoe gaat. Vermijd generieke linkteksten zoals “lees meer” of ”klik hier”.
Voorbeeld:
- ❌ 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.
Bepaal in welke categorie je afbeelding valt:
Andere tips:
- Houd het tekstalternatief kort: maximaal 150 tekens
- Gebruik geen “afbeelding van” of “foto van”
Voorbeelden:
- ❌ Fout: “IMG_20250613.jpg”
- ✅ Goed: “Team viert succes met taart en slingers”
- ❌ Fout: “afbeelding van een man”
- ✅ Goed: “Man in pak presenteert naast whiteboard met cijfers”
Is de afbeelding alleen maar voor decoratie? Laat dan het tekstalternatief leeg.
4. Schrijf duidelijke en unieke paginatitels
Geef elke pagina een titel die duidelijk beschrijft waar de pagina over gaat.
De perfecte paginatitel:
- komt overeen met de eerste kop van de content op de pagina
- begint met het onderwerp van de pagina en eindigt met de organisatie
- is uniek binnen de website
Voorbeeld:
- ❌ Fout: “Home”
- ✅ Goed: “Kennisbank digitale toegankelijkheid – WCAG.nl”
De 5-minuten check
- Bekijk de browsertab van de pagina:
- Staat er een duidelijke titel?
- Weet je direct waar je bent?
- 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 redacteuren
Koppenstructuur bekijken:
- headingsMap (browser extensie)
- Toont een overzicht van al je koppen en landmarks
- Laat sprongen in niveaus zien
- Download headingsMap:
Contrast controleren:
- Colour Contrast Analyser (CCA) (software)
- Berekent de contrastverhouding tussen 2 kleuren
- Kleurcodes of pipet
- WCAG Color contrast checker (browser extensie)
- Toont een overzicht van alle kleurcombinaties
- Controleert direct de contrastverhouding
- Download WCAG Color contrast checker:
Lees meer over hulpmiddelen bij het toetsen
Praktische tips
Afbeeldingen
- Geef informatieve afbeeldingen een tekstalternatief. Beschrijf wat je ziet. Is er geen informatie te zien? Laat het tekstalternatief dan leeg.
- Geef afbeeldingen die ook worden gebruikt als link een tekstalternatief. Beschrijf wat je zieten waar de link naar verwijst.
- Gebruik geen afbeeldingen van tekst. Als er tekst op een afbeelding staat, zorg dan dat het tekstalternatief exact dezelfde tekst bevat.
Formulieren
- Geef elk invoerveld een duidelijk en beschrijvend label.
- Schrijf heldere foutmeldingen die uitleggen wat er mis is én hoe je het kunt oplossen.
Media
- Voeg bij elk geluidsfragment een transcript toe.
- Maak bij filmpjes zonder geluid een audiodescriptie.
- Voorzie filmpjes van ondertitels én een audiodescriptie.
- Vermijd flitsende of knipperende afbeeldingen en animaties.
Navigeren
- Geef elke pagina een duidelijke paginatitel.
- Schrijf linkteksten die zeggen waar de link naartoe gaat. Vermijd vage bewoording zoals “klik hier” of “lees meer”.
Ontwerp
- Gebruik kleur nooit als enige manier om informatie over te brengen. Voeg bijvoorbeeld ook tekst, iconen of patronen toe.
- Zorg voor minimaal 4,5:1 contrast tussen tekst en achtergrond.
- Als je grote tekst gebruikt (minstens 24px of 18,5px vetgedrukt), zorg dan voor minimaal 3:1 contrast.
- Zorg dat onderdelen in diagrammen en grafieken minimaal 3:1 contrast hebben.
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.
- Verwijs niet alleen naar kleur, vorm of positie. Schrijf bijvoorbeeld niet “klik op de groene knop” of “zie het kader rechts”.
Handige bronnen
Succescriteria
Alle succescriteria waar redacteuren bij betrokken is:
Afbeeldingen
- 1.1.1 Niet-tekstuele content
- 1.4.5 Afbeeldingen van tekst
- 1.4.11 Contrast van niet-tekstuele content
- 2.3.1 Drie flitsen of beneden drempelwaarde
- 2.5.3 Label in naam
Bediening
Beweging
Formulieren
- 1.3.1 Info en relaties
- 1.3.5 Identificeer het doel van de input
- 2.4.6 Koppen en labels
- 3.3.1 Foutidentificatie
- 3.3.2 Labels of instructies
- 3.3.3 Foutsuggestie
Media
- 1.1.1 Niet-tekstuele content
- 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
- 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
- 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
- 1.2.4 Ondertitels voor doven en slechthorenden (live)
- 1.2.5 Audiodescriptie (vooraf opgenomen)
- 1.4.2 Geluidsbediening
- 2.3.1 Drie flitsen of beneden drempelwaarde
Navigeren
Ontwerp
Techniek
Tekst
- 1.3.1 Info en relaties
- 1.3.3 Zintuiglijke eigenschappen
- 2.4.2 Paginatitel
- 2.4.4 Linkdoel (in context)
- 2.4.6 Koppen en labels
- 3.1.1 Taal van de pagina
- 3.1.2 Taal van onderdelen
- 3.2.4 Consistente identificatie
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 met het vinden van praktische oplossingen.