Nieuwe handhavingsgolf 2025: zo maak je jouw website WCAG‑compliant voordat boetes en claims volgen
Wat je moet weten over de handhavingsgolf 2025
De komende handhavingsronde richt zich op naleving van WCAG 2.2 en vergroot de kans op boetes en claims als toegankelijkheidsproblemen zichtbaar en gedocumenteerd blijven. Organisaties moeten bewijzen dat ze structureel toetsen, repareren en documenteren; snelle fixes alleen zijn niet genoeg.
Designers, developers en redacties hebben elk een rol: ontwerpers maken toegankelijke componenten, developers implementeren semantische HTML en ARIA waar strikt noodzakelijk, en redacties zorgen voor toegankelijke content en metadata. Begin met prioriteren van WCAG 2.2-criteria die veel klachten opleveren, zoals focusweergave en touchscreen-targets.
Relevante WCAG 2.2-criteria en praktische teststappen
Focus Appearance (2.4.11): Test met tab-only navigatie en vergroot de focusindicator tot duidelijk zichtbaar. Target Size (2.5.8): Meet knoppen en links op mobiel; minimaal 24 CSS px of zorg voor voldoende afstand. Dragging Movements (2.5.7): Bied alternatieven voor drag-and-drop, test met assistive technologieën.
Concrete stappenplan voor teams
Start met een inventarisatie: maak een prioriteitenlijst van pagina’s en componenten op basis van verkeer en risico. Combineer geautomatiseerde scans met handmatige checks: kleurcontrast, keyboardnavigatie, focus en formulieren.
Maak een iteratief backlog‑proces: label tickets met wcag-criterium, impact en sprintprioriteit. Zorg dat elke fix een korte testbeschrijving en acceptatiecriteria heeft, inclusief wie handmatig controleert.
Mini-checklist voor quick wins
– Zorg voor skiplinks en logische headingstructuur. – Gebruik native controls (button, a, input) in plaats van custom divs. – Controleer kleurcontrast met handmatige metingen. – Test volledige pagina’s met alleen toetsenbordbediening.
Voor designers: praktische ontwerptips
Ontwerp componenten met semantiek in gedachten: knoppen moeten eruitzien als knoppen, links als links. Voeg duidelijke focusstaten toe in het design system en definieer minimale contrastwaarden in het stijlgidspakket.
Documenteer acceptatiecriteria in het design file: states (hover, focus, disabled), tekstgroottes en minimale clickable areas. Geef voorbeelden van alternatieve interacties als drag-and-drop ongeschikt is.
CSS-voorbeeld: zichtbare focus en voldoende targetgrootte
button{padding:10px 16px;min-width:44px;border-radius:4px}button:focus{outline:4px solid #005a9c;outline-offset:2px}a{touch-action:auto}Voor developers en redacties: test- en reviewroutine
Gebruik semantische HTML als eerste keuze: nav, main, header, footer, button, label en fieldset. Voeg ARIA alleen toe als er geen semantische optie is (bijv aria-expanded op een custom toggler). Documenteer waarom ARIA is gebruikt.
Combineer tooling met handmatige tests. Gebruik axe, lighthouse en pa11y als aanvulling om snelle regressies te vinden, maar vervang handmatige toetsenbord- en screenreader-tests niet.
Praktische teststappen per pagina
– Start met een geautomatiseerde scan en noteer fouten en waarschuwingen. – Doe een keyboard-only walkthrough: tab, shift+tab, enter, space, esc. – Controleer focusvolgorde en zichtbaarheid (WCAG 2.2 Focus Appearance). – Test met een schermlezer (NVDA/VoiceOver) op kernpaden: inloggen, formulier, navigatie. – Meet kleurcontrast en targetgrootte handmatig.
Codevoorbeelden en markupregels
Gebruik dit als standaardpatroon: semantische markup, labels en fallback. Gebruik aria alleen als een native element ontbreekt.
Skiplink en toegankelijke button
<a href="#main" class="skiplink">Sla naar inhoud over</a>
<main id="main">...</main>
<button type="button">Toevoegen</button>
<div role="button" tabindex="0" aria-pressed="false">Alleen als geen button mogelijk</div>Documentatie, proces en bewijsvoering
Houd testresultaten bij per release: welke pagina’s zijn getest, wie heeft getest en welke stappen zijn genomen. Sla testcases en screenshots op zodat je bij een claim kunt aantonen dat er een proces en opvolging was.
Plan periodieke regressietests en voeg toegankelijkheid toe aan de definition of done. Train redacties op alt-tekst, duidelijke koppen en toegankelijke tabellen zodat content vanaf publicatie voldoet.
Tools zoals axe, lighthouse en pa11y helpen problemen te vinden; gebruik ze dagelijks, maar baseer juridische onderbouwing op gedocumenteerde handmatige tests en gebruikersfeedback.
trefwoorden: wcag 2.2, toegankelijkheid, semantische html, focus appearance, contrast, aria, accessibility testing