Woordenlijst toegankelijkheid

WCAG-criteria, patronen en normen — met interactieve demo’s, detectiemethoden en auditgegevens.

WCAG principle 4 of 4 (POUR): code must be solid enough for browsers and assistive technologies (like screen readers) to interpret reliably.

6 termen

role="button" on div
<button> native ✓

ARIA: gebruik & misbruik

80% fail

80% van de homepagina's gebruikt ARIA — en die pagina's hebben 2× meer fouten dan pagina's zonder. ARIA voegt geen gedrag toe, alleen semantiek. Misbruikt ARIA is erger dan geen ARIA. Vijf regels: gebruik geen ARIA als native werkt.

Robust

Naam, rol, waarde

Alle interactieve componenten moeten hun naam (wat het heet), rol (wat het is) en status (in welke toestand het is) blootstellen aan hulptechnologie. De basis van compatibiliteit met hulptechnologie.

Robust 4.1.2

role="button" on div
<button> native ✓

Semantische HTML

Gebruik HTML-elementen voor hun bedoelde doel: <button> voor acties, <a> voor navigatie, <nav> voor navigatiesecties, <main> voor hoofdinhoud. Semantische HTML is de basis van webtoegankelijkheid.

Robust

3 new messages

aria-live="polite"

Statusberichten

Statusberichten moeten programmatisch bepaalbaar zijn via rol of eigenschappen zodat ze aan schermlezers worden gepresenteerd zonder focus te ontvangen. Gebruik role="status" of aria-live.

Toegankelijke naam

Elk interactief element heeft een berekende toegankelijke naam nodig. Bronnen (in prioriteit): aria-labelledby → aria-label → <label> → tekstinhoud → title. Lege naam = onzichtbaar voor hulptechnologie.

Robust

Toegankelijkheidsboom

De parallelle DOM die hulptechnologie leest. Als een element niet in de toegankelijkheidsboom staat, bestaat het niet voor schermlezersgebruikers. Inspecteer via DevTools → tabblad Toegankelijkheid.

Robust Interactive