Toegankelijkheidsaudit in 30 minuten: van rood naar groen

Het is dinsdag 14:50. De marketing lead van een ingenieursbureau met veertig man in Eindhoven stuurt je een screenshot door. Een adviseur heeft hun site door een toegankelijkheidsscanner gehaald. Zevenenveertig fouten, drie ervan gemarkeerd als 'kritiek'. De European Accessibility Act ging vorig jaar juni van kracht. De directie wil vrijdag een groene badge.

Je hebt dertig minuten tot de volgende standup.

Deze post is de audit die je in die dertig minuten draait. Hij maakt de site niet vanzelf WCAG 2.2 AA-conform. Hij verschuift een typische Nederlandse mkb-site wel van 'rood op de scanner' naar 'groen op de scanner', ruimt de meest gênante fails op, en geeft je een verdedigbare toegankelijkheidsverklaring om naar te wijzen terwijl je het diepere werk plant.

Waarom dit telt in juni 2026

De European Accessibility Act (Richtlijn 2019/882) is sinds 28 juni 2025 afdwingbaar voor digitale diensten in de private sector. De Nederlandse uitvoering zit in de Wet toegankelijkheid digitale producten en diensten. Handhaving loopt via de AFM en de Autoriteit Consument en Markt. De tanden zitten in klachten, openbare registers, en de trage maar reële dreiging om uitgesloten te worden van overheidsaanbestedingen.

De meeste Nederlandse mkb's die wij auditen falen op dezelfde vijf dingen. Repareer die en de kleurenbalk in elke scanner klapt om. Het diepere werk (correcte toetsenbordsemantiek, screen-reader review met NVDA of VoiceOver, omgaan met reduced motion) is de volgende sprint, niet de volgende dertig minuten.

Tools die je installeert voor de timer start

Twee browserextensies en één webpagina. Dat is het hele setje.

• axe DevTools voor Chrome of Firefox, van Deque. De gratis variant is voldoende.
• WAVE van WebAIM. Gratis.
• WebAIM Contrast Checker. Geen installatie.

Open de site van de klant, open het paneel, draai de scan. axe vangt kleurcontrast, ontbrekende alt-tekst, ontbrekende formulierlabels en ARIA-misbruik. WAVE laat dezelfde problemen zien met een ander visueel model. Beide draaien kost negentig seconden en de één pikt iets op dat de ander mist.

Minuten 0 tot 5: scan en triage

Draai axe op de homepage en op twee andere drukbezochte pagina's. De productdetailpagina en het contactformulier, meestal. Exporteer het resultaat naar JSON als je een papieren spoor wilt. Groepeer de bevindingen in vier bakjes:

1. Contrastfouten
2. Ontbrekende alternatieve tekst
3. Ontbrekende of kapotte formulierlabels
4. De rest (kopvolgorde, linkdoel, ARIA-ruis)

De eerste drie bakjes zijn tachtig procent van het rood. Ze zijn ook het goedkoopst om op te lossen.

Minuten 5 tot 12: contrast

Contrastfouten zijn de meest voorkomende reden dat een Nederlandse mkb-site 'rood' staat. De oorzaak is bijna altijd het kleurenpalet van het merk. Een designer koos zacht grijs op wit voor de body copy omdat dat 'modern aanvoelt'. Bij 4.5:1 zakt dat door WCAG 2.2 AA.

Open de contrast checker. Plak de hexcodes voor voorgrond en achtergrond. Zit de ratio onder 4.5:1 voor body-tekst of 3:1 voor grote tekst, dan heb je een bevinding.

De fix is meestal één CSS-variabele.

:root {
  /* was: #9aa0a6 on #ffffff = 2.85:1, fails AA */
  --color-text-muted: #5f6368; /* on #ffffff = 5.74:1, passes AA */
  --color-link:       #1a56db; /* on #ffffff = 6.36:1, passes AA */
}

Dit is de edit met de meeste hefboomwerking in de hele audit. Eén variabele, twintig problemen weg.

Repareer contrast niet door overal de merkkleur donkerder te maken. Gebruikt de marketingsite oranje van het merk op wit voor knoppen, zet de tekst op de knop dan op wit en laat de merkkleur de achtergrond zijn. Wit op #d97706 zit op 4.51:1. Net binnen.

Minuten 12 tot 18: alt-tekst

Open de pagina in dev tools. Draai dit in de console.

[...document.images]
  .filter(img => !img.alt && !img.getAttribute('aria-hidden'))
  .map(img => img.src);

Elke URL die hij print is een afbeelding zonder alternatieve tekst en zonder instructie om hem over te slaan. Beslis voor elk: is deze afbeelding content of decoratie?

Contentafbeeldingen krijgen een korte, feitelijke alt. Decoratieve afbeeldingen krijgen alt="". Nooit alt="image" en nooit de bestandsnaam.

In WordPress staat de alt-tekst in de mediabibliotheek, niet in de posteditor. Een plugin kan ze in bulk vullen, maar de automatisch gegenereerde tekst klopt niet voor productfoto's. Doe de top twintig met de hand.

<!-- bad -->
<img src="/img/team-photo.jpg">

<!-- worse -->
<img src="/img/team-photo.jpg" alt="image">

<!-- good, content image -->
<img src="/img/team-photo.jpg"
     alt="The engineering team outside the Eindhoven office, May 2026">

<!-- good, decorative flourish -->
<img src="/img/divider-swirl.svg" alt="" aria-hidden="true">

Minuten 18 tot 24: formulierlabels

Elke formulier-input heeft een programmatic label nodig. Placeholder-tekst telt niet. Een floating label dat verdwijnt op focus telt niet.

<!-- bad: scanner red, screen reader silent -->
<input type="email" placeholder="Email">

<!-- good -->
<label for="contact-email">Email address</label>
<input id="contact-email" type="email" name="email"
       autocomplete="email" required>

Nu je er toch bent, voeg autocomplete-hints toe. Ze horen bij WCAG 2.2 succescriterium 1.3.5 en ze maken het leven makkelijker voor iedereen met een password manager.

Verplichte velden hebben zowel required als een zichtbare aanduiding nodig. Een sterretje in het label, met een legenda bovenaan het formulier die uitlegt wat het sterretje betekent. Vertrouw niet alleen op een rode rand. Kleur mag niet het enige kanaal voor informatie zijn.

Minuten 24 tot 28: de toetsenbordronde

Leg de muis weg. Druk Tab vanaf de adresbalk. Loop de pagina door.

Drie dingen om op te letten.

De eerste Tab moet landen op een 'Skip to main content'-link, of op het eerste interactieve element van de header. Tab je een header binnen met elf nav-items en een mega-menu, dan ben je gezakt voor de toetsenbordtest voordat je de hero bereikt.

Elk interactief element hoort een zichtbare focus ring te hebben. Veel themes komen met *:focus { outline: none } omdat de designer dat netjes vond ogen. Haal die regel weg. Voeg een echte focusstijl toe.

:focus-visible {
  outline: 2px solid #1a56db;
  outline-offset: 2px;
}

Je hoort nooit 'vast' te komen zitten in een widget. Tab je een cookiebanner binnen, dan moet je er ook weer uit kunnen Tabben zonder hem weg te klikken.

Dit is de test die oppikt wat scanners niet zien. axe markeert geen ontbrekende focus ring op een custom knop. Een echt mens dat Tab indrukt wel.

Minuten 28 tot 30: verifiëren en de verklaring schrijven

Draai axe opnieuw. Bevestig groen. Maak een screenshot van het resultaat voor de klant. Schrijf daarna een toegankelijkheidsverklaring van vier regels en link ernaar vanuit de footer.

<a href="/toegankelijkheid">Toegankelijkheidsverklaring</a>

De verklaring benoemt de standaard die je nastreeft (WCAG 2.2 AA), wat nog niet conform is, en een mailadres waar gebruikers problemen kunnen melden. De Nederlandse overheid publiceert een template op toegankelijkheidsverklaring.nl. Gebruik die. Alleen al de aanwezigheid van een verklaring vult een van de procedurele eisen van de EAA in.

Wat we steeds tegenkomen op Nederlandse mkb-sites

Drie patronen herhalen zich over de verouderde sites die we auditen. De cookiebanner zet de keyboard focus klem en heeft geen programmatic role. De custom dropdown die in 2017 in jQuery is gebouwd is onbereikbaar met het toetsenbord. De PDF-brochure waar de footer naar linkt is uit InDesign geëxporteerd zonder tags, dus een screen reader hoort één doorlopende muur van tekst.

De cookiebanner is meestal de grootste boosdoener, want dat is het eerste wat een toetsenbord- of screen-readergebruiker tegenkomt. Gebruikt de klant een managed provider (Cookiebot, Iubenda), upgrade dan naar de huidige major versie. Elk van hen heeft tussen 2023 en 2025 toegankelijkheidsfixes uitgebracht. Is de banner met de hand gebouwd, vervang die dan door een native <dialog>-element en een focus trap waar je daadwerkelijk over kunt redeneren.

De cirkel rondmaken met de klant

Toen we afgelopen najaar de marketingsite herbouwden voor een Nederlandse industriële leverancier had het inhouse-team twee weken besteed aan het één voor één wegwerken van axe-bevindingen. Wij ramden er veertig weg met één wijziging in de design tokens en nog twaalf door een jQuery-accordion te vervangen door een native <details>-element. Echte WCAG-conformiteit kostte daarna nog steeds een hele sprint. De eerste negentig minuten websitewerk haalden meer compliance-grond terug dan de twee weken ervoor.

Open nu de site van de klant, draai axe op de homepage, en mail jezelf de vier kleurcontrast-paren die hij markeert. Morgenochtend weet je precies welke CSS-variabelen je moet aanpassen.