WCAG voor ontwikkelaars

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

Waarom is dit belangrijk voor jou?

Als ontwikkelaar bepaal jij hoe een website werkt. Jouw keuzes maken het verschil tussen een website die schermlezers kunnen begrijpen en een website die mensen vastlopen.

Goede toegankelijkheid begint bij goede code.

Je belangrijkste taken

1. Gebruik betekenisvolle HTML

Gebruik HTML-elementen waarvoor ze 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
  • Landmarks: <main>, <nav>, <aside> om onderdelen van de pagina aan te geven
  • Knoppen: <button> voor acties (zoals “Opslaan” of “Menu openen”)
  • Links: <a> voor verwijzingen naar een andere locatie

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 alles toegankelijk met het toetsenbord

Zorg dat mensen alles kunnen doen zonder muis of touchpad.

De regels:

  • Alle links, knoppen en formulierelementen zijn bereikbaar met de Tab-toets
  • Focus volgorde is logisch
  • Focusindicator is duidelijk zichtbaar
  • Gebruik tabindex="-1" om elementen uit focus volgorde te halen
❌ Fout:
<div onclick="openMenu()">Menu</div>

✅ Goed:
<button onclick="openMenu()" onkeydown="handleKeydown(event)">Menu</button>
De 5-minuten check
  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

3. Voeg een skiplink toe

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
  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 en 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>

Hulpmiddelen voor jou

Toegankelijkheid checken:

  • axe DevTools browser extensie
    • Toont direct alle automatisch gevonden problemen
  • WAVE Web Accessibility Evaluator
    • Plak je URL in het veld
    • Toont direct alle automatisch gevonden problemen
  • Web Developer browser extensie
    • Geeft informatie over je pagina

Koppenstructuur bekijken:

  • headingsMap browser extensie
    • Toont een overzicht van al je koppen
    • Laat sprongen in niveaus zien

Valideer je code:

Lees meer over hulpmiddelen bij het toetsen

Praktische tips

Afbeeldingen

  • Zorg dat alle <img>-elementen een alt-attribuut hebben. Lege alt-attributen (alt="") zijn alleen toegestaan voor puur decoratieve afbeeldingen.

Bediening

  • Maak alle interactieve elementen (links, knoppen, formulieren) bereikbaar en bedienbaar via het toetsenbord.
  • Voeg een skiplink toe.
  • Zorg voor een logische focus volgorde.
  • Zorg dat de focusindicator overal zichtbaar is.

Navigeren

  • Gebruik het <title>-element in de <head>-sectie van de pagina.
  • Zorg voor een zoekfunctie of een sitemap op je website.

Tekst

  • Zorg dat de koppen (<h1> tot <h6>) logisch en in de juiste volgorde worden gebruikt. De <h1> is de hoofdtitel van de pagina en mag er maar één per pagina zijn.
  • Gebruik <ol> voor geordende lijsten en <ul> voor ongeordende lijsten. Vermijd het maken van lijsten met alleen <div>-elementen.
  • Gebruik <table>, <th> en <td> op de juiste manier. Zorg dat tabelkoppen correct zijn gedefinieerd met <th> en gebruik, indien nodig, scope="col" of scope="row" voor complexere tabellen.

Succescriteria

Alle succescriteria waar een ontwikkelaar bij betrokken is:

Meer hulp nodig?

WCAG.nl

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.