Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

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?

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

Afbeeldingen

  • Zorg dat alle <img>-elementen een alt-attribuut hebben. Gebruik lege alt-attributen (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 (links, knoppen, formulieren) bereikbaar en bedienbaar met het toetsenbord.
  • Voeg een skiplink toe.
  • Zorg voor een logische focus volgorde.
  • Zorg dat de focusindicator overal zichtbaar is en niet volledig wordt bedekt door andere elementen.

Formulieren

  • Koppel elk invoerveld aan een label (met het for-attribuut of door het invoerveld in het <label>-element te plaatsen).
  • Gebruik het autocomplete-attribuut voor veelvoorkomende invoervelden die persoonlijke gegevens van de gebruiker verzamelen, zoals naam, e-mail en adres.
  • Koppel foutmeldingen aan het juiste invoerveld met aria-describedby.
  • Gebruik het <title>-element in de <head>-sectie van de pagina.
  • Zorg voor een zoekfunctie of een sitemap op je website.

Techniek

  • Zorg dat de volgorde in de code overeenkomt met de visuele volgorde.
  • 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 HTML-elementen niet volstaan.

Tekst

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

Weergave

  • Zorg dat de website zowel in staande (portrait) als liggende (landscape) weergave goed werkt.
  • Zorg dat de hele content leesbaar en bedienbaar blijft bij 400% zoom.
  • Voorkom dat iemand moet scrollen in twee richtingen (horizontaal én verticaal) na het inzoomen.

Handige bronnen

Succescriteria

Alle succescriteria waar ontwikkelaars bij betrokken zijn:

Afbeeldingen

Bediening

Beweging

Formulieren

Media

Ontwerp

Techniek

Tekst

Weergave

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 met het vinden van praktische oplossingen.