Accessibility web experience
WCAG Matters
Een interactieve web experience die laat zien waarom WCAG belangrijk is voor mensen, bedrijven en betere websites. De site combineert duidelijke uitleg met demo's voor spraaknavigatie, toetsenbordgebruik, kleurzicht en toegankelijkheidschecks.
Overzicht
WCAG Matters is een visuele en interactieve uitlegsite over de Web Content Accessibility Guidelines. Bezoekers leren hoe toegankelijkheid werkt via de POUR-principes, veelvoorkomende barrieres en praktische checks die direct toepasbaar zijn op echte websites.
Wat belangrijk was
- WCAG begrijpelijk maken met heldere content, sterke structuur en concrete voorbeelden.
- Interactieve demo's toevoegen voor spraaknavigatie, keyboard focus, kleurzichtfilters en barrieres.
- De ervaring zelf toegankelijk houden met skip links, semantische secties, zichtbare focus en bruikbare controls.
Inclusive UX
De visual zet accessibility neer als een moderne, interactieve ervaring in plaats van alleen een technische checklist.
Features
- POUR-principes: Perceivable, Operable, Understandable en Robust.
- Spraaknavigatie en voorleesfunctionaliteit via browser API's.
- Kleurzichtfilters voor protanopie, deuteranopie en tritanopie.
- Interactieve barrieredemo voor contrast, toetsenbord en betekenis.
- WCAG-gerichte checklist met lokale voortgang.
Technologies
Gebouwd als moderne browserervaring met React, CSS3, Web Speech API, local state en toegankelijke HTML-patronen.