Screenreader-toegankelijkheid — de basis

Een screenreader (NVDA op Windows, VoiceOver op Mac/iOS, TalkBack op Android) leest jouw site voor aan blinde + slechtziende gebruikers. Goede screenreader-ervaring = goede toegankelijkheid in het algemeen. Vijf basics: (1) Heading-hiërarchie: één H1 per pagina + opvolgende H2/H3 in logische volgorde — niet H1→H4. Screenreaders bieden "navigatie per heading" — slechte hiërarchie maakt site onnavigeerbaar. (2) Alt-tekst: elke <img> krijgt alt="...". Decoratief = alt="" (leeg, niet onbreken). Informatief = beschrijf wat het overbrengt. (3) Labels formulieren: <label for=""> gekoppeld aan elke input. Geen "placeholder" als label-vervanger — verdwijnt zodra getypt. (4) ARIA-labels: voor icoonknoppen zonder zichtbare tekst aria-label="Sluit menu". Voor regio's role="navigation", role="main". Niet overdrijven: HTML-semantiek (button, nav, main) is sterker dan ARIA. (5) Focus-volgorde: Tab-toets navigeert in logische volgorde. tabindex="-1" alleen voor focus-management. Test-instructie: Mac VoiceOver Cmd+F5 / Windows NVDA gratis. Doe deze 5 dingen: (a) navigeer site via Tab + Enter, (b) navigeer via H-toetsen (NVDA: H, VoiceOver: VO+Cmd+H), (c) probeer formulier in te vullen via alleen toetsenbord + screenreader, (d) luister naar alt-teksten, (e) test elke knop heeft duidelijke naam. Tools: aXe DevTools, WAVE, Pa11y. Maar handmatige test blijft essentieel.