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.
  • Zorg dat een gebruiker niet vast komt te zitten in een onderdeel van de pagina. De gebruiker moet altijd met het toetsenbord weg kunnen navigeren.
  • 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 sticky headers of modals.
  • Bied voor complexe aanwijzergebaren (zoals swipe of pinch) altijd ook een alternatief met een enkele klik of tik.
  • Activeer geen actie bij het indrukken van de muisknop (mousedown). Gebruik mouseup of click, zodat de gebruiker de actie nog kan annuleren.
  • Bied voor sleepbewegingen (drag-and-drop) altijd ook een alternatief met een enkele klik of tik.
  • Maak het klikbare gebied van bedieningselementen minstens 24 bij 24 pixels.
  • Bied voor functies die werken via bewegen, schudden of kantelen altijd ook een alternatief via een bedieningselement. Zorg dat bewegingsactivering uit te schakelen is.
  • Gebruikt je website sneltoetsen met één teken (zoals een letter of cijfer)? Zorg dat de gebruiker ze kan uitschakelen of aanpassen.
  • Zorg dat content die verschijnt bij hover of focus te sluiten, te hoveren en persistent is.
  • Zorg dat automatisch bewegende, knipperende of scrollende content te pauzeren, stoppen of verbergen is.
  • Zorg dat geluid dat automatisch afspeelt te pauzeren of te dempen is.
  • Zorg dat een focuswijziging geen onverwachte verandering van context veroorzaakt, zoals het openen van een nieuw venster of het verzenden van een formulier.

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 content van het invoerveld duidelijk beschrijven.
  • 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. Benoem welk veld verkeerd is ingevuld en wat de fout is.
  • Bied bij foutmeldingen ook een suggestie aan voor de juiste invoer, tenzij dit een beveiligingsrisico vormt.
  • Zorg dat een wijziging in een invoerveld geen onverwachte verandering van context veroorzaakt, zoals het automatisch verzenden van een formulier.
  • Bied bij formulieren met juridische of financiële gevolgen de mogelijkheid om de invoer te controleren, te corrigeren of te bevestigen.
  • Vraag niet opnieuw om informatie die de gebruiker al eerder in hetzelfde proces heeft ingevuld. Vul deze automatisch in of bied de optie om eerder ingevoerde gegevens te selecteren.
  • Maak inloggen niet afhankelijk van cognitieve tests (zoals een puzzel of het onthouden van een wachtwoord). Ondersteun alternatieven zoals een wachtwoordmanager, passkey of verificatiecode.
  • Heeft een formulier een tijdslimiet? Zorg dat de gebruiker de tijdslimiet kan uitschakelen, aanpassen of verlengen.
  • Stuur statusberichten (zoals “opgeslagen” of “3 resultaten gevonden”) door aan hulptechnologieën met een ARIA live region, zonder de focus te verplaatsen.
  • Gebruik het <title>-element in de <head>-sectie van de pagina.
  • Zorg voor een zoekfunctie of een sitemap op je website.
  • Geef links een linktekst die het doel van de link beschrijft.
  • Zorg voor een zoekfunctie of een sitemap op je website.
  • Houd de positie van navigaties consistent op alle pagina’s.
  • Bied je hulpmechanismen aan (zoals een contactpagina of chatfunctie)? Plaats ze op elke pagina op dezelfde plek.

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 er geen HTML-element beschikbaar is met de juiste semantiek.
  • ∙ Gebruik voor dezelfde functie steeds dezelfde benaming in de code.

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 werkt. Forceer geen vaste weergavestand.
  • Zorg dat tekst tot 200% te vergroten is zonder dat content of functionaliteit verloren gaat.
  • Zorg dat alle content leesbaar en bedienbaar blijft bij 400% zoom.
  • Voorkom dat iemand in twee richtingen moet scrollen (horizontaal én verticaal) na het inzoomen.
  • Zorg dat de 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:

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? Ik help je graag verder. Mail me op niek@wcag.nl of bekijk mijn diensten op WCAG.nl.