Waarom deze 13 en niet de 50+ andere?
WCAG 2.2 Niveau AA kent meer dan 50 success criteria. Ze zijn niet allemaal even relevant voor elke site. Op basis van tientallen MKB-audits zien we dat 80% van de werkelijke issues in deze dertien categorieën zit. Fix deze, en je zit al op 80% compliance — met minimaal werk.
Dit is geen alternatief voor een volledige audit. Het is een startpunt dat je vandaag kunt toepassen.
1. Alt-teksten op afbeeldingen
Wat moet je doen:
Elke inhoudelijke afbeelding heeft een alt-attribuut met een zinvolle beschrijving. Decoratieve afbeeldingen krijgen alt="" (leeg, maar wel aanwezig).
Goed:
<img src="team.jpg" alt="EASEO team bij het Amsterdamse kantoor">
<img src="sierlijn.svg" alt="" role="presentation">Fout:
<img src="team.jpg">
<img src="team.jpg" alt="team">
<img src="team.jpg" alt="IMG_1234.jpg">Fix-tijd: 15-60 minuten (afhankelijk van aantal afbeeldingen)
Uitzondering: functionele afbeeldingen (bijv. een knop met een icoon) krijgen een alt die de functie beschrijft, niet het visuele: alt="Menu openen", niet alt="Drie streepjes icoon".
2. Kleurcontrast
Wat moet je doen:
Tekstkleur versus achtergrondkleur haalt een ratio van minimaal 4.5:1 (normale tekst) of 3:1 (grote tekst, ≥18pt of ≥14pt bold). Meet het, gok niet.
Test het: WebAIM Contrast Checker of Chrome DevTools (Inspect > Accessibility tab).
Veelgemaakte fouten:
- Lichtgrijze tekst op wit (vaak
#999op#fff= ratio 2.8 → faalt) - Lichtblauwe links op grijze achtergrond
- Donkergrijs op donker-blauw (“het ziet er rustig uit” — maar leesbaar is het niet)
- Witte tekst op bewogen video-achtergrond
Fix-tijd: 1-3 uur voor het door je site schonen.
3. Tekstvergroting 200%
Wat moet je doen:
Je site blijft bruikbaar als de gebruiker tekst op 200% zoomt. Geen horizontaal scrollen, geen afgebroken layouts, geen weggevallen content.
Test het: Zet je browser op 200% zoom (Ctrl/Cmd + + vijf keer). Werkt je site nog?
Oplossing: gebruik rem-eenheden voor lettergroottes (niet px), en responsive layouts die meeschalen.
Fix-tijd: 2-8 uur afhankelijk van hoe hard-coded je layout is.
4. Toetsenbordnavigatie
Wat moet je doen:
Alle functionaliteit bereikbaar met Tab, Shift+Tab en Enter. Ook: dropdown-menu’s, modals, custom dropdowns, datepickers, en SPA-routes.
Test het: Trek één uur uit. Tab door je hele site. Wat werkt niet?
Veelvoorkomende issues:
- Hamburger-menu dat alleen op click opent (geen Enter-support)
- Modal die opent maar waar Tab in oneindige cirkel vastloopt
- Custom select-dropdowns die onbereikbaar zijn voor toetsenbord
- Links die uitgevoerd zijn als
<div onclick="...">in plaats van<a href>of<button>
Vuistregel: als het klikbaar is, moet het een <a> of <button> zijn. <div onclick> is nooit OK voor interactieve elementen.
Fix-tijd: 4-16 uur afhankelijk van je site.
5. Zichtbare focus-indicator
Wat moet je doen:
Het element dat momenteel focus heeft (waar je met Tab naartoe bent gegaan) heeft een duidelijke visuele markering.
Goed:
a:focus-visible,
button:focus-visible {
outline: 2px solid #EA580C;
outline-offset: 2px;
}Fout (zelfs als het “clean” oogt):
* { outline: none; } /* Eruit gooien = toegankelijkheidsovertreding */Als je outline: none gebruikt, moet je een alternatieve focus-stijl definiëren. Designers willen vaak geen default outline — prima, maar dan wel een vervanger.
Fix-tijd: 15 minuten.
6. Skip-links
Wat moet je doen:
Bovenaan elke pagina een link “Ga naar inhoud” die zichtbaar wordt bij Tab-focus en direct naar de hoofdcontent springt. Gebruikers met toetsenbord hoeven dan niet eerst door het hele menu te tabben.
Implementatie:
<a href="#hoofdcontent" class="skip-link">Ga naar inhoud</a>
<!-- ... header en navigatie ... -->
<main id="hoofdcontent">
<!-- content -->
</main>.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #0F172A;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}Fix-tijd: 20 minuten.
7. Semantische HTML
Wat moet je doen:
Gebruik HTML-elementen voor wat ze zijn, niet wat ze visueel moeten worden:
- Kop →
<h1>,<h2>,<h3>(in logische volgorde, niveaus niet overslaan) - Lijst →
<ul>of<ol> - Knop →
<button> - Link →
<a href> - Navigatie →
<nav> - Hoofdcontent →
<main> - Formulier →
<form>
Fout: alles in <div>-containers proppen en met CSS/JS emuleren. Screen readers snappen niets van je structuur.
Fix-tijd: Variable. Bij een goed gebouwde moderne site: weinig werk. Bij een oude WordPress met page builder: dagen.
8. Labels bij formulieren
Wat moet je doen:
Elk input-veld heeft een <label> gekoppeld via for/id. Placeholder-tekst is géén label — die verdwijnt zodra er getypt wordt.
Goed:
<label for="email">E-mailadres *</label>
<input type="email" id="email" name="email" required>Fout:
<input type="email" placeholder="E-mailadres" required>Bij visueel onzichtbare labels (bijv. zoekveld waar alleen het lens-icoon te zien is):
<label for="search" class="sr-only">Zoeken</label>
<input type="search" id="search">Met bijbehorende CSS-class:
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Fix-tijd: 30-90 minuten per formulier.
9. Foutafhandeling bij formulieren
Wat moet je doen:
Bij een onjuist ingevuld formulier moet de fout:
- In tekst zichtbaar zijn (niet alleen rood kleuren)
- Uitleggen wat er mis is (niet alleen “Fout”)
- Uitleggen hoe te herstellen
- Gekoppeld zijn aan het specifieke veld via
aria-describedby
Goed:
<label for="email">E-mail *</label>
<input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" class="error">
Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl
</p>Fout:
<input type="email" class="error-red-border">
<!-- geen tekstuele uitleg, niet gekoppeld -->Fix-tijd: 1-3 uur per formulier.
10. Video-ondertitels
Wat moet je doen:
Elke video met gesproken content heeft closed captions (ondertitels). Voor video die alleen marketing-sfeer is zonder spraak: muted autoplay toegestaan, anders nooit auto-play met geluid.
Tools:
- YouTube-video’s: YouTube genereert auto-captions die je moet reviewen op juistheid
- Embedded video: gebruik
<track kind="captions" src="captions.vtt">binnen<video> - Marketing-video’s op homepage: voeg transcript toe onder de video, of gebruik
aria-describedby
Fix-tijd: 15-30 minuten per minuut video (voor handmatig reviewen van auto-captions).
11. Language attribuut
Wat moet je doen:
<html lang="nl"> correct ingesteld op elke pagina. Voor anderstalige passages: lang-attribuut op dat specifieke element.
<html lang="nl">
<p>Dit artikel noemt het concept <span lang="en">Generative Engine Optimization</span>.</p>Dit klinkt triviaal, maar is cruciaal: screen readers gebruiken dit om de juiste stem/uitspraak te kiezen.
Fix-tijd: 5 minuten (tenzij je meertalige site hebt, dan iets meer werk).
12. Geen tijdslimieten zonder verlengoptie
Wat moet je doen:
Als je een sessie-timeout hebt (bijv. op checkout, account, booking), geef de gebruiker kans om te verlengen. Automatische logout zonder waarschuwing is een overtreding.
Typisch patroon: 60 seconden voor timeout → modal “Je sessie verloopt bijna. [Verleng]”.
Fix-tijd: Variable, afhankelijk van applicatie.
13. Consistente navigatie
Wat moet je doen:
Menu’s, knoppen en links staan op consistente plaatsen en gedragen zich voorspelbaar door de hele site. Zoekveld altijd rechtsboven. Winkelmandje altijd op dezelfde plek. Footer-links in dezelfde volgorde.
Dit lijkt designvraagstuk maar is expliciet WCAG-criterium (3.2.3 en 3.2.4). Inconsistent gedrag is problematisch voor gebruikers met cognitieve beperkingen.
Fix-tijd: Variable — vaak meer design-werk dan code-werk.
Wat je níet leert van tools
Geautomatiseerde tools (WAVE, Axe, Lighthouse) vinden ongeveer 30-40% van de toegankelijkheidsissues. Wat ze missen:
- Of alt-tekst zinvol is (alt=“logo” passeert, maar is waardeloos)
- Of de Tab-volgorde logisch is (tool ziet wel dat alles tab-bereikbaar is, niet of de volgorde klopt)
- Of focus-states visueel duidelijk genoeg zijn
- Of je content begrijpelijk is (cognitieve toegankelijkheid)
- Of je ARIA-attributen correct gebruikt worden (vaak fout toegepast)
Een volledige audit vereist handmatige review + screen reader tests + toetsenbordnavigatie. Geen enkele tool vervangt dat.
Roadmap: wat eerst?
Niet alles tegelijk. Prioriteer in deze volgorde:
Week 1 (blokkerend):
- Toetsenbordnavigatie werkt (punt 4)
- Focus-indicators zichtbaar (punt 5)
- Formulieren hebben labels (punt 8)
langattribuut correct (punt 11)
Week 2-3 (ernstig):
- Alt-teksten (punt 1)
- Contrast (punt 2)
- Foutafhandeling (punt 9)
- Skip-links (punt 6)
Week 4-6 (belangrijk):
- Semantische HTML (punt 7)
- Tekstvergroting (punt 3)
- Video-ondertitels (punt 10)
Doorlopend (onderhoud):
- Consistente navigatie (punt 13)
- Tijdslimieten (punt 12)
Publiceer tussentijds al een toegankelijkheidsverklaring waarin je aangeeft waar je staat. Beter een eerlijke “gedeeltelijk compliant” verklaring dan geen verklaring — die laatste is op zich een overtreding.
Wanneer heb je een audit nodig?
Als je bovenstaande 13 punten hebt afgewerkt, zit je waarschijnlijk rond 70-80% WCAG 2.2 AA compliance. De resterende issues vereisen professionele diagnose.
Een toegankelijkheidsaudit dekt alle 50+ criteria, inclusief screen reader tests, handmatige review en een prioriteitenrapport met kosteninschatting per issue. €750 excl. BTW, 10 werkdagen, inclusief conceptverklaring die je direct kunt publiceren.