Accessibility (WCAG) MKB 2026 — wat moet écht?

Wat MKB moet weten

Voor commerciële MKB-sites is WCAG 2.1 AA de praktische norm vanaf 2026. Concreet: kleurcontrast 4.5:1 voor body-tekst, alle interactieve elementen toetsenbord-bereikbaar, alt-tekst op images, semantische HTML (geen <div>-soup), formulier-labels gekoppeld aan inputs. Boete-risico voor MKB onder 10 medewerkers is laag, maar 15% van NL-bezoekers heeft een beperking — dus practisch loont het hoe dan ook.

Veelgestelde vragen

De EU Accessibility Act in begrijpelijke taal

De European Accessibility Act (EAA) is een richtlijn die door alle lidstaten in nationale wetgeving is omgezet. In Nederland geldt de Implementatiewet toegankelijkheidsvoorschriften producten en diensten. De wet richt zich op digitale producten en diensten die na 28 juni 2025 op de markt komen of substantieel worden aangepast. Een nieuwe MKB-site die je in 2026 laat bouwen valt daar voor de meeste sectoren onder.

De handhavende instantie in Nederland is de Autoriteit Consument en Markt voor e-commerce en de Inspectie Digitale Infrastructuur voor telecom-gerelateerde diensten. Boetes lopen in theorie op tot enkele procenten van de jaaromzet, maar de praktijk is dat er eerst wordt gewaarschuwd en een termijn wordt gegeven om tekortkomingen op te lossen. Klein bedrijven (minder dan 10 fte én minder dan 2 miljoen omzet) zijn voor sommige verplichtingen vrijgesteld, maar de norm zelf wordt door rechters wel als referentie gebruikt bij geschillen.

Wat betekent dit als ondernemer? Als je site een transactie afhandelt, een afspraak inplant, een offerte uitbrengt of een product verkoopt, dan val je onder de scope. Een puur informatieve eenpitter-site valt buiten de wettelijke verplichting, maar krijgt nog steeds te maken met de markt-realiteit: bezoekers met een beperking haken af als de site niet werkt, en zoekmachines straffen ontoegankelijke sites indirect via hogere bouncerates en lagere engagement.

WCAG 2.2 AA in de praktijk

De Web Content Accessibility Guidelines bestaan uit drie niveaus: A, AA en AAA. AA is de wettelijke en commerciële standaard. AAA is voor specifieke contexten zoals overheid en zorg. De richtlijn werkt met vier principes: waarneembaar, bedienbaar, begrijpelijk en robuust. Onder elk principe vallen success criteria die meetbaar zijn.

Waarneembaar betekent dat alle content via meerdere zintuigen of methoden beschikbaar moet zijn. Een productfoto heeft alt-tekst zodat een screenreader hem kan voorlezen. Een instructievideo heeft ondertiteling. Een formulier-fout wordt niet alleen rood gekleurd maar ook met een tekstuele melding aangekondigd. Kleurcontrast tussen tekst en achtergrond is minimaal 4.5:1 voor gewone tekst en 3:1 voor grote tekst van 18pt of 14pt bold.

Bedienbaar betekent dat alles met toetsenbord werkt. Een muisloze gebruiker moet kunnen tabben door de site zonder klem te raken in een menu of modal. Focus moet zichtbaar zijn, dus dat blauwe of donkere randje rond een knop bij tab-navigatie laat je staan in plaats van het met CSS te verbergen. Animaties die langer dan vijf seconden duren of automatisch starten moeten pauzeerbaar zijn. Sliders en carousels die zonder controle wegklikken zijn een veelvoorkomende WCAG-overtreding.

Begrijpelijk gaat over taal en consistentie. Het lang-attribuut op je html-element vertelt screenreaders welke uitspraakregels te gebruiken. Foutmeldingen leggen uit wat er mis is en hoe je het oplost in plaats van alleen te zeggen dat er een fout is. Navigatie blijft op elke pagina op dezelfde plek. Robuust tot slot betekent geldige semantische HTML die door alle assistieve technologie kan worden geparseerd.

Wat een toegankelijke site oplevert behalve compliance

Bedrijven schakelen DesignCheck soms in puur uit angst voor een boete. Dat is een slechte motivatie. De échte business case zit in conversie, SEO en onderhoudbaarheid. Een toetsenbord-bereikbare site is voor iedereen sneller. Een formulier met duidelijke labels heeft een 15 tot 30 procent hogere invul-ratio omdat ook niet-beperkte gebruikers minder twijfelen. Een site met goede semantiek wordt door zoekmachines beter begrepen. Voorleesfuncties van browsers en smart-speakers werken alleen op semantisch correcte content.

Keurmeesters is een voorbeeld van een klant waar toegankelijkheid bewust meegenomen is vanaf de eerste lijn code. De adres-zoeker werkt met toetsenbord, alle formulier-velden hebben labels, contrast is door de hele site 4.5:1 of hoger, en het BAG-adressen-suggestie-component is voor screenreaders bedienbaar via aria-live-regions. Dat kost geen extra weken bouwtijd als je het vanaf het begin meeneemt — alleen achteraf toevoegen is duur.

• Kleurcontrast tekst minimaal 4.5:1, grote tekst minimaal 3:1, getest met een tool als WebAIM Contrast Checker
• Alle interactieve elementen bereikbaar met Tab-toets in logische volgorde
• Zichtbare focus-indicator op alle links, knoppen en formuliervelden
• Alt-tekst op alle inhoudelijke afbeeldingen, lege alt op decoratieve afbeeldingen
• Formulierlabels expliciet gekoppeld via for-attribuut of nesting
• Foutmeldingen zowel visueel als met tekst, gekoppeld aan het veld via aria-describedby
• Headings in correcte hiërarchie (h1 één keer, dan h2, h3 — geen sprongen)
• Lang-attribuut op html-element en op stukken tekst in een andere taal
• Geen content die alleen via kleur informatie overdraagt
• Animaties pauzeerbaar of automatisch uit voor users met prefers-reduced-motion
• Video met ondertiteling, audio met transcript
• Toetsenbord-trap in modals voorkomen met focus-trap of correcte aria-attributen
• Click-targets minimaal 24 bij 24 pixels, idealiter 44 bij 44
• Skip-link bovenaan elke pagina naar de main-content
• Site getest met screenreader (VoiceOver op Mac, NVDA op Windows) op de drie belangrijkste flows

Veelgemaakte fouten bij MKB-sites

De meest voorkomende fout is een afbeelding-als-knop zonder tekstueel alternatief. Een chique iconenrij in de footer met sociale media-links zonder labels is voor een screenreader-gebruiker een rij van vijf onbekende graphics. De oplossing is een aria-label op de link of een visueel verborgen tekst-span. De tweede klassieker is de hamburger-knop die bij opening geen aria-expanded-state bijwerkt, waardoor de assistieve tech niet weet of het menu open of dicht is.

Een derde valkuil is de cookie-banner die het hele scherm overneemt zonder dat hij met Tab gesloten kan worden, of die met focus-trap blijft hangen zelfs nadat hij gesloten is. Een vierde is custom dropdowns die met een div-soup zijn gebouwd in plaats van een native select, waardoor toetsenbord-navigatie volledig wegvalt. De oplossing is bijna altijd: kies eerst de native HTML, en val alleen terug op aria-custom als de native variant écht niet kan.

Wat doe je vandaag?

• Run axe DevTools op je homepage en op één belangrijke conversie-pagina, noteer de bevindingen
• Controleer kleurcontrast van je primaire knop en body-tekst met de WebAIM-tool
• Probeer je belangrijkste flow (offerte aanvragen, product bestellen) volledig met alleen je Tab- en Enter-toets
• Vraag een gratis DesignCheck-audit aan voor een concrete prioriteitenlijst
• Plan de rebuild als de scope van fixes meer dan 40 uur kost — dan is een nieuwe site goedkoper dan oplappen

Verder lezen