Skip to Content

“Is ons platform wel écht toegankelijk en kan íedereen het eigenlijk wel gebruiken?” Het is een vraag die binnen steeds meer organisaties op tafel ligt – en terecht. Toegankelijkheid is niet langer een 'nice to have', maar een randvoorwaarde voor kwaliteit, inclusiviteit én compliance. Toch blijkt uit toegankelijkheidsrapportages dat veel projecten nog steken laten vallen, met risico's voor gebruikerservaring, reputatie en wetgeving tot gevolg.

Wat als we kunstmatige intelligentie konden inzetten als extra paar ogen? Als snelle, slimme assistent die ons helpt om toegankelijkheidsproblemen in code vroegtijdig te signaleren en verbeteren?

Wat bedoelen we met digitale toegankelijkheid?

Wat bedoelen we met 'toegankelijke code'? In dit project hanteren we de WCAG 2.2 AA-richtlijnen als uitgangspunt – de internationale standaard voor digitale toegankelijkheid.

Kort wat de WCAG 2.2 AA-richtlijnen zijn

De WCAG 2.2 (Web Content Accessibility Guidelines) zijn internationale richtlijnen die bepalen hoe je websites en webapplicaties toegankelijk maakt voor álle gebruikers – inclusief mensen met een beperking.

Het AA-niveau is het meest gangbare nalevingsniveau en bevat eisen zoals:

  • voldoende kleurcontrast tussen tekst en achtergrond,
  • alt-teksten bij afbeeldingen,
  • een logische koppenstructuur,
  • en de mogelijkheid om alles via het toetsenbord te bedienen.

Deze richtlijnen vormen ook de basis voor Europese wetgeving. Sinds 28 juni 2025 geldt namelijk de European Accessibility Act: een Europese richtlijn die toegankelijkheid verplicht stelt voor onder meer websites, apps, e-commerce en digitale diensten van bedrijven en overheden. Naleving van WCAG 2.2 AA is daarmee niet alleen wenselijk, maar in veel gevallen ook wettelijk verplicht.

AI-systemen zoals OpenAI's ChatGPT en Google Gemini openen nieuwe deuren: ze kunnen HTML analyseren, problemen signaleren én suggesties geven voor verbetering. Maar hoe goed werkt dat in de praktijk?

Van theorie naar praktijk: AI aan het werk

We ontwikkelden een aangepaste GPT binnen ChatGPT die getraind is om HTML-code te beoordelen op WCAG 2.1 AA-criteria. Een eenvoudig, maar representatief voorbeeld: een blok met nieuwsberichten in de vorm van cards.

  • Input: een blok HTML-code, bijvoorbeeld een component uit een nieuwsfeed.

  • Output: lijst met gevonden WCAG-issues, uitleg én concrete voorbeeldoplossingen.

Wat deed OpenAI (aangepaste GPT)

  • Afbeeldingen zonder alt-tekst werden automatisch opgespoord.

  • Decoratieve iconen werden herkend, met het advies aria-hidden="true" toe te voegen.

  • Lege links werden als fout aangemerkt – een <a> zonder geldige href mag niet.

  • Kopstructuur werd geëvalueerd: correcte hiërarchie van <h2> → <h3> werd aanbevolen.

  • Buttons versus links: Voor acties werd button geadviseerd i.p.v. klikbare links.

  • Datumnotatie: Gebruik van <time datetime="..."> voor semantische duidelijkheid.

Sterk punt: combineert analyse met begrijpelijke context én code-snippets.

Vergelijking met Gemini

De standaardversie van Google Gemini leverde vergelijkbare resultaten. Belangrijke aanbevelingen:

  • Alt-teksten verplicht bij betekenisvolle afbeeldingen

  • Geldige href-waarden verplicht

  • Visueel verborgen beschrijvingen voor screenreaders bij complexe elementen

  • Focusstijlen testen bij toetsenbordnavigatie

Iets minder gericht op uitleg, maar goed in detectie van structurele issues. Ook hier zijn voorbeeldoplossingen beschikbaar, zij het wat generieker.

Wat AI níet kan testen

Hoewel ChatGPT en Gemini veel structurele toegankelijkheidsproblemen kunnen opsporen, is hun analysekracht niet oneindig. Bepaalde essentiële toegankelijkheidsaspecten blijven buiten het bereik van AI-modellen:

  • Toetsenbordnavigatie: AI kan niet beoordelen of een gebruiker via alleen het toetsenbord soepel door een interface kan navigeren. Zaken als focusvolgorde, skiplinks of verborgen focusvallen vereisen daadwerkelijke interactie – iets wat AI-modellen (nog) niet kunnen simuleren.

  • Kleurcontrast: Het beoordelen van het kleurcontrast tussen tekst en achtergrond – cruciaal voor mensen met een visuele beperking – vereist visuele analyse. AI kan de code wél lezen, maar ziet geen kleuren. Hiervoor zijn gespecialiseerde tools nodig zoals de Color Contrast Analyzer of de ingebouwde check in Axe DevTools.

  • Foutmeldingen en statusupdates: AI herkent HTML, maar kan niet beoordelen of een formulier correct feedback geeft na een fout (zoals een niet-ingevuld veld), noch of die feedback voor screenreaders beschikbaar is.

  • Dynamische content: Veel moderne webapplicaties maken gebruik van JavaScript om content dynamisch te laden of tonen. AI kan alleen statische HTML lezen, en mist dus zicht op interactieve of verborgen elementen die toegankelijkheid kunnen beïnvloeden.

Waarom handmatige testing cruciaal blijft

Juist omdat deze aspecten niet automatisch te controleren zijn, blijft handmatige validatie onmisbaar. Zoals je ook in bovenstaande tabel hebt kunnen zien is voor een overgroot percentage nog extra testen nodig, naast het automatische testen. Dit betekent:

  • Zelf met het toetsenbord door een pagina lopen

  • Visuele checks op contrast en leesbaarheid uitvoeren

  • Testen met een screenreader of spraaksoftware

  • Toegangelijkheid beoordelen in de context van echte gebruikersscenario’s

Conclusie: AI-tools geven een uitstekende eerste indruk, maar kunnen géén oordeel vellen over de volledige gebruikservaring. Voor écht toegankelijke oplossingen zijn menselijke ogen, empathie en testervaring cruciaal.

Hulpmiddelen voor handmatig testen

Voor het handmatig testen gebruiken wij een aantal tool. Hieronder een kort overzicht.

Axe DevTools

  • Wat het doet: Detecteert toegankelijkheidsproblemen in DOM-structuur op basis van WCAG-criteria. Herkent dynamische elementen in de context van de live webpagina. Geeft ernst en impact van issues aan → handig bij prioritering.

  • Relevantie voor WCAG AA: Krachtige dekking van vele WCAG AA-vereisten, inclusief problemen rond ARIA, formulierlabels en semantiek.

  • Pluspunten: Geeft duidelijke uitleg en suggesties om problemen op te lossen, met links naar de relevante WCAG-sectie.

  • Wordt door Axendo al actief ingezet als betrouwbare validatietool.

Color Contrast analyser

  • Wat het doet: Meet het kleurcontrast tussen tekst en achtergrond.

  • Relevantie voor WCAG AA: Helpt bij naleving van contrastvereisten (minimaal 4.5:1 voor normale tekst, 3:1 voor grote tekst).

  • Gebruik: Kan handmatig kleurwaarden vergelijken of een schermregio scannen.

Headingsmap

  • Wat het doet: Geeft een overzicht van de koppenstructuur (h1-h6) op een pagina.

  • Relevantie voor WCAG AA: Helpt controleren of de documentstructuur logisch is en hiërarchisch correct — essentieel voor screenreader-navigatie.

  • Gebruik: Maakt snel zichtbaar of koppen worden overgeslagen of verkeerd genest.

Schermlezer (Windows) – NVDA of JAWS

  • Wat het doet: Een schermlezer leest de inhoud van een webpagina (tekst, koppen, links, formulieren, knoppen, enz.) voor via spraak of braille.

  • Relevantie voor WCAG AA: Onmisbaar voor het handmatig testen van:
    - Focusvolgorde en toetsenbordnavigatie
    - Zichtbaarheid en betekenisvolheid van ARIA-labels
    - Beschrijvingen van interactieve elementen (bijv. knoppen, links)
    - Alternatieve teksten, dynamische content en leesvolgorde

  • Pluspunten:
    - Biedt inzicht in de échte gebruikerservaring van blinde of slechtziende gebruikers.
    - NVDA is gratis en populair onder testers.
    - JAWS is commercieel, maar wordt veel gebruikt in professionele omgevingen.

  • Gebruik: Combineer met toetsenbordnavigatie (Tab, Shift+Tab, Enter, pijltjestoetsen) om door de content te bewegen zoals eindgebruikers dat doen.

Hoe ver komen we met AI bij het testen van toegankelijkheid?

We onderzochten hoe AI-tools zoals ChatGPT (aangepaste GPT) en Google Gemini kunnen helpen bij het verbeteren van de toegankelijkheid van HTML-code, gebaseerd op de WCAG 2.2 AA-richtlijnen. Beide tools signaleren effectief structurele problemen zoals ontbrekende alt-teksten, foutieve kophiërarchie en ongeldige links – inclusief duidelijke suggesties en voorbeeldcode.

Toch kent AI belangrijke beperkingen. Cruciale aspecten zoals toetsenbordnavigatie, kleurcontrast, dynamische content en leesvolgorde blijven buiten bereik van statische AI-analyses. Uit onderzoek blijkt dat een groot deel van de toegankelijkheidseisen alleen handmatig of deels geautomatiseerd te testen is.

Daarom blijft handmatige validatie noodzakelijk, ondersteund door tools zoals:

  • Axe DevTools – automatische WCAG-controle in context

  • Color Contrast Analyzer – contrastmetingen

  • HeadingsMap – controle van kopstructuren

  • NVDA/JAWS – realistische gebruikerservaring met schermlezers

Conclusie: AI is een waardevolle aanvulling voor snelle checks en educatie, maar geen vervanging voor diepgaande tests en menselijke beoordeling. Toegankelijkheid vraagt om empathie, ervaring en tooling die verder gaat dan alleen code-analyse. Bij Axendo combineren we het beste van beide werelden om digitale toegankelijkheid naar een hoger niveau te tillen.