10 Tips voor toegankelijke Mendix-apps volgens de European Accessibility Act

Het is zover, en nu? 

Sinds kort (28 juni 2025) is de European Accessibility Act (EAA) officieel van kracht. Als je dit blog leest, ben je waarschijnlijk niet de enige die zich afvraagt: “Zijn onze Mendix applicaties wel compliant?” Het goede nieuws? Je bent niet te laat om actie te ondernemen. Het minder goede nieuws? Uitstel is geen optie meer. 

De EAA verplicht bedrijven om hun digitale consumenten producten en diensten toegankelijk te maken voor mensen met een beperking. Dit geldt ook voor jouw Mendix web applicaties. Mendix biedt alle tools die je nodig hebt om WCAG 2.1 AA-conforme applicaties te bouwen. Het is alleen aan jou als developer of product owner om deze tools goed te gebruiken. 

In dit blog deel ik 10 concrete tips. Plus een cruciale bonus tip over conformiteitsverklaringen die de meeste organisaties nog steeds over het hoofd zien. 

Quick Wins (implementeer deze week) 

1. Start met een WAVE Scan van je Applicatie 

De eerste stap naar toegankelijkheid? Weten waar je staat. WAVE (Web Accessibility Evaluation Tool) is een gratis browser-extensie die direct laat zien welke toegankelijkheidsproblemen je applicatie heeft. 

Wat te doen: 

  • Run een scan op je belangrijkste Mendix pagina’s 
  • Focus eerst op de ‘rode’ errors , dit zijn WCAG-overtredingen die direct gefixed moeten worden 
  • Let vooral op missing alt-teksten, ontbrekende form labels, en kleurcontrast problemen 

Mendix specifiek: WAVE herkent automatisch Mendix-gegenereerde HTML structuren en wijst je direct op problemen met input widgets en data grids. 

2. Controleer je HTML Hiërarchie en Headers 

Veel Mendix developers gebruiken headers (H1, H2, H3) vooral voor styling, niet voor structuur. Screen readers vertrouwen echter op een logische header-hiërarchie om content te navigeren. 

Wat te doen: 

  • Gebruik slechts één H1 per pagina (meestal je pagina titel) 
  • Zorg voor een logische volgorde: H1 → H2 → H3, geen levels overslaan 
  • In Mendix: gebruik de Text widget met juiste header level, niet custom CSS classes 

Quick check: Kan je je pagina begrijpen door alleen de headers te lezen? Dan zit je goed. 

3. Implementeer Juiste Focus States 

Mendix applicaties hebben vaak slechte keyboard navigatie omdat developers focus states niet configureren. Voor gebruikers die alleen een toetsenbord gebruiken is dit essentieel. 

Wat te doen: 

  • Test je app met alleen Tab en Enter toetsen 
  • Zorg dat alle interactieve elementen (buttons, links, inputs) een zichtbare focus indicator hebben 
  • In Mendix Studio Pro: gebruik de ‘Focusable’ property op widgets waar nodig 
  • Voeg custom CSS toe voor duidelijke focus outlines: 

.mx-button:focus, .form-control:focus { 
    outline: 2px solid #0066CC; 
    outline-offset: 2px; 
} 
  

4. Fix Alt-teksten en Form Labels 

Ontbrekende alt-teksten en form labels zijn de meest voorkomende WCAG-overtredingen in Mendix apps. 

Wat te doen: 

  • Elke Image widget: vul de ‘Alternative text’ property in 
  • Decoratieve afbeeldingen: laat alt-tekst leeg (maar vul wel de property in) 
  • Text Box en andere input widgets: gebruik altijd de ‘Label’ property 
  • Als je geen zichtbare label wilt: gebruik ‘Screen reader caption’ property 

Mendix tip: De Accessibility Helper widget uit de Marketplace kan je helpen om labels programmatisch toe te voegen. 

“De EAA is vandaag al van kracht, maar het is niet te laat om te beginnen.” Rick van der Werf – Mendix UX Designer

5. Optimaliseer Keyboard Toegankelijkheid 

Mendix apps zijn vaak muis-gedreven ontworpen. Maak ze keyboard-vriendelijk. 

Wat te doen: 

  • Zet ‘Tab index’ property op belangrijke widgets (0 = normaal, -1 = skip) 
  • Test modals en pop-ups: kan je ze openen én sluiten met keyboard? 
  • Zorg dat focus niet ‘verdwijnt’ in complexe widgets zoals data grids 
  • Custom widgets: implementeer proper ARIA attributes 

Test: Plak je muis weg en probeer je hele applicatie flow alleen met toetsenbord. 

Strategische Tips (voor langdurige compliance) 

6. Optimaliseer je Stylesheet voor Toegankelijkheid 

CSS heeft grote impact op toegankelijkheid. Maak je stylesheet EAA-ready. 

Kleurcontrast: 

  • Minimaal 4.5:1 voor normale tekst 
  • Minimaal 3:1 voor grote tekst (18pt+) 

Font sizes in REM: 

/* Gebruik rem in plaats van px voor betere schaalbaarheid */ 
body { font-size: 1rem; }      /* 16px default */ 
h1 { font-size: 2rem; }        /* 32px */ 
small { font-size: 0.875rem; } /* 14px */ 
  

Responsive design: 

  • Zorg dat content leesbaar blijft tot 200% zoom 
  • Test op 320px breedte (mobiele toegankelijkheidseis) 

7. Implementeer Toegankelijke Mendix Widgets 

Mendix biedt specifieke widgets en properties voor toegankelijkheid. 

Accessibility Helper Widget: 

  • Download uit Mendix Marketplace 
  • Gebruik voor ARIA labels, live regions, en custom accessibility attributes 
  • Perfect voor dynamische content die screen readers moeten herkennen 

Input Field Configuratie: 

Text Box widget: 
✓ Label: “Voornaam” 
✓ Screen reader caption: “Voer je voornaam in” 
✓ Required: true 
✓ Placeholder: “bijv. Jan” 
  

Numeric Input Specifiek: 

  • Gebruik Input type: “Number” 
  • Stel min/max waarden in 
  • Voeg beschrijvende error messages toe 

Speciaal Input Specifiek: 

  • Gebruik Input type: “Phone” of “mail” 
  • Voeg beschrijvende error messages toe 

Dit zorgt ervoor dat wanneer er een virtueel toetsenboard of alternatief invoer device gebruikt wordt. Dit zich specifiek voorbereid op het apparaat. Denk bijvoorbeeld aan een toetsenboard met een @ voor een email of een telefoon toetsenboard om een nummer in te typen in plaats van een tekstueel toetsenboard. 

8. Configureer Widget Accessibility Properties 

Elk Mendix widget heeft een dedicated ‘Accessibility’ sectie met specifieke instellingen voor WCAG compliance. Gebruik deze systematisch. 

Accessibility sectie per widget type: 

Data Grids & List Views: 

  • Screen reader caption: beschrijf het doel van de lijst 
  • Role: stel in als ’table’, ‘grid’ of ‘list’ waar van toepassing 
  • Column headers: gebruik duidelijke, beschrijvende namen 
  • Navigation: zorg voor keyboard support 

Buttons & Links: 

  • Screen reader caption: beschrijf de actie (“Open factuur details”) 
  • Role: meestal automatisch correct, maar controleer bij custom styling 

Input Fields: 

  • Label: altijd invullen, ook als visueel verborgen 
  • Screen reader caption: extra context waar nodig 
  • Required: correct instellen voor form validatie 
  • Tab index: 0 voor normale flow, -1 om over te slaan 

Images & Icons: 

  • Alternative text: beschrijvend voor informatieve afbeeldingen, leeg voor decoratief 
  • Role: ‘img’ voor afbeeldingen, ‘button’ voor klikbare iconen 

Pro tip: De Accessibility sectie is vaak ingeklapd – vergeet niet om deze altijd te controleren bij elke widget die je configureert. 

9. Ontwikkel Test Scenario’s met persona’s 

Maak toegankelijkheidstesten onderdeel van je development workflow. Wij hebben generieke persona’s opgesteld die je kunnen helpen per thema gebied je app beter te analyseren: 

Test Persona’s per Themagebied: 

👁️ Zicht – Maria (Blind gebruiker met screen reader): 

  • Kan ze inloggen zonder muis? 
  • Worden alle form errors duidelijk voorgelezen? 
  • Is navigatie logisch met alleen audio feedback? 
  • Begrijpt ze de data grid structuur via screen reader? 

🎨 Zicht – David (Ernstige kleurenblindheid, deuteranopie): 

  • Kan hij onderscheid maken tussen “Opslaan” (groen) en “Verwijderen” (rood) buttons? 
  • Zijn error states herkenbaar zonder alleen rode kleur? 
  • Worden status indicatoren (rood/groen) ondersteund door iconen of tekst? 
  • Is informatie in grafieken/charts begrijpbaar zonder kleurcodering? 

🤏 Motoriek – Jan (Beperkte handfunctie, alleen keyboard): 

  • Kan hij alle buttons bereiken met Tab? 
  • Zijn skip links aanwezig voor lange navigatie? 
  • Blijft focus zichtbaar en logisch? 
  • Zijn click targets groot genoeg (minimum 44px)? 

👂 Gehoor – Lisa (Doof, gebruikt gebarentaal): 

  • Zijn video’s ondertiteld of transcript beschikbaar? 
  • Worden audio-alerts visueel ondersteund? 
  • Is alle gesproken content ook tekstueel weergegeven? 
  • Zijn live chat functies toegankelijk zonder audio cues? 

📝 Cognitief – Tom (Dyslexie): 

  • Is tekst eenvoudig en duidelijk geformuleerd? 
  • Zijn complexe woorden vermeden of uitgelegd? 
  • Is er voldoende witruimte en rust in het ontwerp? 
  • Kunnen font-instellingen aangepast worden? 
  • Zijn instructies kort en stapsgewijs? 

🗣️ Spraak – Ahmed (Stotteren, gebruikt spraakherkenning): 

  • Zijn alle functies bereikbaar zonder spraakcommando’s? 
  • Werken voice-to-text invoervelden correct met haperingen? 
  • Zijn er alternatieve invoermethoden voor spraakgestuurde functies? 
  • Wordt er genoeg tijd gegeven voor spraakgestuurde input? 
  • Zijn dictaat-functies foutbestendig bij onduidelijke uitspraak? 

🧠 Cognitief – Emma (Beperkte werkgeheugen, ADHD): 

  • Zijn formulieren opgedeeld in kleine, logische stappen? 
  • Wordt progress duidelijk getoond bij lange processen? 
  • Zijn er geen afleidende animaties of auto-refresh? 
  • Kan ze pauzes nemen zonder data te verliezen? 
  • Zijn foutmeldingen geduldig en ondersteunend? 

10. Implementeer Accessibility Governance 

Maak toegankelijkheid structureel onderdeel van je proces. 

Design System Approach: 

  • Documenteer toegankelijke component patronen 
  • Maak toegankelijke Mendix widget templates 
  • Train je team in WCAG basics 

Development Workflow: 

  • Voeg WAVE scans toe aan je testing checklist 
  • Maak keyboard testing onderdeel van acceptance criteria 
  • Review accessibility properties bij elke widget 

Continuous Testing: 

  • Plan maandelijkse accessibility audits 
  • Monitor automated accessibility tests 
  • Houd WCAG compliance bij als KPI 

🚨 Bonus: De conformiteitsverklaring – wat Iedereen vergeet 

Hier is wat veel organisaties over het hoofd zien: de EAA vereist niet alleen dat je app toegankelijk is, maar ook dat je dit kunt aantonen met een conformiteitsverklaring. 

Wat moet erin: 

  • Welke WCAG versie en niveau je nastreeft (meestal 2.1 AA) 
  • Welke delen van je applicatie wel/niet compliant zijn 
  • Bekend problemen en wanneer je deze oplost 
  • Contact informatie voor accessibility feedback 
  • Datum van laatste assessment 

Waar publiceren: 

  • Prominent op je website/applicatie 
  • Vaak in footer als “Toegankelijkheidsverklaring” 
  • Moet up-to-date gehouden worden 

Template voorbeeld: 

“Deze applicatie streeft naar WCAG 2.1 AA compliance.  
Laatste beoordeling: [datum] 
Bekende problemen: [lijst met issues en tijdlijn] 
Feedback: accessibility@bedrijf.nl” 
  

Waar Beginnen? Je actieplan voor morgen 

Deze week: Download WAVE, run je eerste scan, fix de rode errors 

    Deze maand: Implementeer de tips, start met test persona’s 

      Komende 3 maanden: Werk door de strategische tips, publiceer je conformiteitsverklaring 

        Structureel: Maak accessibility onderdeel van je development proces 

          Hulp nodig? 

          Toegankelijkheid kan overweldigend lijken, maar je hoeft het niet alleen te doen. Bij MxBlue |SUPERP helpen we organisaties al jaren met het toegankelijker maken van hun Mendix applicaties. Ons UX team kan je ondersteunen met: 

          • Uitgebreide accessibility audits van je Mendix apps 
          • Training voor je development team 
          • Front-end ontwikkeling en stylesheet optimalisatie 
          • Opstellen van conformiteitsverklaringen 
          • Strategische accessibility roadmaps 
          • Testen van applicaties 
            Door: Rick van der Werf – Mendix UX designer

            Heb je vragen of wil je hulp bij de implementatie? Neem contact op.

            Daan Balijon (daan.balijon@superp.nl)