De [[WCAG - Web Content Accessibility Guidelines]] en [[EAA - European Accessibility Act|EEA]] geven je een mooie lijst met regels om na te leven, maar dat is iets anders dan daadwerkelijk ervaren hoe toegankelijk je website is. Voor iemand zonder beperking is het ontzettend moeilijk om te bedenken hoe een gebruiker mét beperking je site gebruikt. En eerlijk gezegd: ook als je het aan echte gebruikers geeft, ontdek je vaak dat ze heel anders navigeren dan je had verwacht. ![[15ethpe8xkh21-1.png|300]] # Checklist - Design Fonts Contrast Inzoomen # Checklist - Toetsenbordnavigatie Testen {#custom-id} > [!info] Hoe werkt toetsenbord navigatie: [[Toetsenbord navigatie voor websites]] Gebruik **alleen het toetsenbord** (geen muis!) en loop onderstaande punten na: - [ ] Ik kan met `Tab` door *alle* interactieve elementen navigeren - [ ] De volgorde van focus is logisch en intuïtief - [ ] Elk element dat focus krijgt is visueel zichtbaar (focus-indicator) - [ ] Knoppen en links werken met `Enter` of `Spatie` - [ ] Ik kan modals of menu’s sluiten met `Esc` (indien aanwezig) - [ ] `Shift+Tab` navigeert terug naar vorige elementen - [ ] Ik kom **niet** vast te zitten of focus kwijt te raken > [!tip] Test dit ook op mobiele schermbreedte én met zoom (200%) om dubbele issues te vinden. > [!warning] Met toetsenbord navigatie dek je voice over niet af Tab gaat alleen langs elementen waar je een **actie** op kan uitvoeren. Text input, buttons etc. Met VoiceOver worden ook andere elementen geraakt zoals tekst en afbeeldingen ## Tools voor het testen van toetsenbordnavigatie - Bookmarklet welke de tab volgorde laat zien - [Accessibility bookmarklets](https://rumoroso.bitbucket.io/) - Browserstack # Checklist - Testen met Screenreader > [!info] Hoe werkt Voiceover: [[Screenreader gebruiken]] # Hulpprogramma's Gebruik alle tools met gezond verstand, tools werken niet altijd goed of houden andere (interpretaties) van standaarden aan. [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/) ## Accessibility Tree in Chrome # Bronnen - [Hoe test ik? Digitale toegankelijkheid - Digitale Overheid](https://www.digitaleoverheid.nl/overzicht-van-alle-onderwerpen/digitale-inclusie/digitaal-toegankelijk/wegwijzer-digitale-toegankelijkheid/hoe-test-ik/)