WCAG in begrijpelijk Nederlands
Niek Derksen

Over digitale toegankelijkheid

Zoeken

WCAG voor ontwikkelaars

Bouw toegankelijke websites die iedereen kan gebruiken. Deze gids helpt je WCAG 2.2 AA compliant code schrijven.

Zoek je alleen de punten om af te vinken? Ga direct naar de checklist voor ontwikkelaars.

Waarom is dit belangrijk voor jou?

Goede code is meer dan werkende code. Als ontwikkelaar bepaal je of mensen je website kunnen gebruiken met hulptechnologieën.

Semantische HTML is de basis van echt kwalitatieve code. Gebruik je de juiste HTML-elementen en bouw je logische structuren? Dan begrijpen hulptechnologieën je code en kunnen mensen met een functiebeperking je componenten goed gebruiken. Tegelijk wordt je code overzichtelijker voor andere ontwikkelaars én makkelijker te onderhouden.

Schrijf direct toegankelijke code. Bestaande componenten refactoren kost veel meer tijd en geld.

Je belangrijkste taken

1. Gebruik betekenisvolle HTML

Gebruik HTML-elementen waar ze voor bedoeld zijn. Browsers en hulptechnologieën snappen dan automatisch wat elk element doet.

De regels:

  • Koppen: <h1>, <h2>, <h3> voor koppen en subkoppen
  • Lijsten: <ul>, <ol>, <dl> voor opsommingen
  • Tabellen: <table>, <th>, <td> voor tabellen
  • Links: <a> voor verwijzingen naar een andere locatie
  • Knoppen: <button> voor acties (zoals “Opslaan” of “Menu openen”)
  • Landmarks: <main>, <nav>, <aside> voor de structuur van de pagina

Voorbeeld:

<main>
  <h1>Productpagina</h1>
  <h2>Kenmerken</h2>
  <ul>
    <li>Lichtgewicht</li>
    <li>Waterdicht</li>
  </ul>
  <h2>Technische gegevens</h2>
  <table>
    <tr>
      <th>Gewicht</th>
      <td>1.2 kg</td>
    </tr>
    <tr>
      <th>Hoogte</th>
      <td>30 cm</td>
    </tr>
  </table>
  <aside>
    <a href="/downloads">Handleiding (PDF)</a>
  </aside>
  <button>Bestel nu</button>
</main>

Tip: Begin altijd met werkende HTML. Voeg pas daarna CSS en JavaScript toe.

Lees meer over info en relaties

2. Maak alle functionaliteit bereikbaar met het toetsenbord

Zorg dat mensen ook alle bedieningselementen kunnen bereiken zonder een muis of touchpad.

De regels:

  • Alle links, knoppen en formulierelementen zijn bereikbaar met de Tab-toets
  • Focus volgorde is logisch
  • Focusindicator is duidelijk zichtbaar
<!-- Slecht voorbeeld -->
<div onclick="openMenu()">Menu</div>

<!-- Goed voorbeeld -->
<button type="button" onclick="openMenu()" onkeydown="handleKeydown(event)">Menu</button>
De 5-minuten check – controleer toetsenbordtoegankelijkheid
  1. Stop je muis weg (of koppel hem los)
  2. Navigeer alleen met toetsenbord:
    • Tab = volgende element
    • Shift + Tab = vorige element
  3. Controleer deze punten:
    • Kom je overal?
    • Zie je waar je bent? (Is de focusindicator zichtbaar?)
    • Werken alle knoppen en links?
    • Kun je menu’s openen en sluiten?
    • Raak je ergens ‘vast’?

Lees meer over toetsenbord

Help gebruikers om herhaalde navigatie over te slaan door een skiplink te gebruiken.

Voorbeeld:

<body>
  <a href="#main" class="skiplink">Ga naar hoofdinhoud</a>
  <nav>...</nav>
  <main id="main">...</main>
</body>
.skiplink {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skiplink:focus {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px;
  background: #000;
  color: #fff;
}
De 5-minuten check – controleer skiplinks
  1. Herlaad je pagina
  2. Druk op de Tab-toets:
    • Is het eerste element een skiplink?
    • Wordt de skiplink zichtbaar?

Lees meer over blokken omzeilen

4. Formulieren toegankelijk maken

Maak formulieren die iedereen kan begrijpen en gebruiken.

Verplichte elementen:

  • Alle <input>-elementen hebben een gekoppeld <label>
  • Verplichte velden zijn visueel én in de code gemarkeerd
  • Velden met een verkeerde invoer zijn in de code gemarkeerd met aria-invalid="true"
  • Foutmeldingen zijn gekoppeld met het aria-describedby-attribuut
  • Gegroepeerde formulierelementen gebruiken het <fieldset>-element met <legend>

Voorbeeld:

<form>
  <label for="email">
    E-mailadres *
  </label>
  <input type="email" id="email" required aria-invalid="true" aria-describedby="email-error">
  <div id="email-error">
    Het e-mailadres is niet geldig. Gebruik het formaat niek@wcag.nl.
  </div>
</form>

Lees meer over toegankelijke formulieren

Hulpmiddelen voor ontwikkelaars

Toegankelijkheid checken:

Koppenstructuur bekijken:

Valideer je code:

Lees meer over hulpmiddelen bij het toetsen

Praktische tips

Dit is de volledige lijst met tips voor jouw rol. Elke tip hoort bij minstens één succescriterium waar jij als ontwikkelaar invloed op hebt. Loop de lijst door voordat je begint.

Lees ook de volledige checklist voor ontwikkelaars.

Afbeeldingen

  • Zorg dat alle <img>-elementen een alt-attribuut hebben. Gebruik alt="" alleen voor puur decoratieve afbeeldingen.
  • Geef informatieve en functionele <svg>-elementen een role="img" en een <title>-element als eerste content.
  • Zorg dat de toegankelijke naam van knoppen en links met afbeeldingen overeenkomt met de zichtbare tekst.

Bediening

  • Maak alle interactieve elementen bereikbaar en bedienbaar met alleen het toetsenbord.
  • Zorg dat een gebruiker nooit vast komt te zitten in een onderdeel van de pagina.
  • Voeg een skiplink toe.
  • Zorg voor een logische focus volgorde.
  • Zorg dat de focusindicator overal zichtbaar is.
  • Zorg dat de focusindicator niet volledig wordt bedekt door andere elementen, zoals een sticky header of modal.
  • Maak het klikbare gebied van bedieningselementen minimaal 24 bij 24 pixels.
  • Zorg dat automatisch bewegende, knipperende of scrollende content te pauzeren, te stoppen of te verbergen is.
  • Zorg dat geluid dat automatisch afspeelt te pauzeren of te dempen is.

Formulieren

  • Koppel elk invoerveld aan een label met het for-attribuut of door het invoerveld in het <label>-element te plaatsen.
  • Zorg dat labels de inhoud van het invoerveld duidelijk beschrijven.
  • Gebruik het autocomplete-attribuut voor invoervelden die persoonlijke gegevens verzamelen, zoals naam, e-mailadres en adres.
  • Koppel foutmeldingen aan het juiste invoerveld met aria-describedby. Benoem welk veld fout is ingevuld en wat de fout is.
  • Voeg bij foutmeldingen ook een suggestie toe voor de juiste invoer, tenzij dit een beveiligingsrisico vormt.
  • Stuur statusberichten zoals “opgeslagen” of “3 resultaten gevonden” door aan hulptechnologieën via een ARIA live region, zonder de focus te verplaatsen.
  • Gebruik het <title>-element in de <head>-sectie van de pagina.
  • Bied minstens twee manieren om een pagina te vinden, zoals een zoekfunctie en een sitemap.
  • Geef links een linktekst die het doel van de link beschrijft.

Techniek

  • Zorg dat de toegankelijke naam van bedieningselementen de zichtbare tekst bevat.
  • Gebruik lang-attribuut op het <html>-element voor de hoofdtaal van de pagina.
  • Geef alle bedieningselementen een toegankelijke naam, rol en waarde.
  • Gebruik ARIA alleen als er geen HTML-element beschikbaar is met de juiste semantiek.

Tekst

  • Gebruik koppen (<h1> tot <h6>) logisch en in de juiste volgorde.
  • Gebruik <ol> voor geordende lijsten en <ul> voor ongeordende lijsten.
  • Gebruik <table>, <th> en <td> op de juiste manier. Voeg bij complexere tabellen scope="col" of scope="row" toe.

Weergave

  • Zorg dat tekst tot 200% te vergroten is zonder dat content of functionaliteit verdwijnt.
  • Zorg dat alle content leesbaar en bedienbaar blijft bij 400% zoom.
  • Voorkom dat iemand na het inzoomen zowel horizontaal als verticaal moet scrollen.
  • Zorg dat content goed blijft werken als een gebruiker de tekstafstand aanpast, zoals regelhoogte, letter- en woordafstand.

Handige bronnen

Succescriteria

Alle succescriteria waar ontwikkelaars bij betrokken zijn:

Succescriteria voor afbeeldingen

Succescriteria voor bediening

Succescriteria voor beweging

Succescriteria voor formulieren

Succescriteria voor media

Succescriteria voor ontwerp

Succescriteria voor techniek

Succescriteria voor tekst

Succescriteria voor weergave

Meer hulp nodig?

WCAG.nl

Heb je vragen, wil je advies of een onderzoek laten uitvoeren? Ik werk als WCAG-onderzoeker bij WCAG.nl. Mail me op niek@wcag.nl.