WCAG uitgelegd
Heldere uitleg van WCAG 2.2 succescriteria. Per criterium lees je wat het betekent, waarom het belangrijk is en hoe je eraan voldoet.
Custom checkboxen en radiobuttons
Een checkbox. Lichtgrijze rand. Afgeronde hoeken. Past perfect bij het design.
Dialoogvenster met geen ruimte voor de inhoud
Je klikt op “Meer informatie”. Een dialoogvenster opent. Header bovenaan: titel + sluitknop. Footer onderaan: twee knoppen. Daartussen: de inhoud.
Foutmeldingen die je niet kunt lezen
Je vult een formulier in. Iets klopt niet. Er verschijnt een melding.
Grafiek met lijnen die alleen door kleur te onderscheiden zijn
Drie lijnen in een grafiek. Rood, blauw, groen. Browsergebruik over de afgelopen vijf jaar.
Uitklapbare content op de verkeerde plek
Je klikt op “Veelgestelde vragen”. Een accordion opent. Het antwoord verschijnt.
Doorgestreepte prijzen
49,99 doorgestreept, 29,99 ernaast. Je ziet direct: korting. Maar een schermlezer leest: “49 euro 99. 29 euro 99.” Geen “oude prijs”, geen “nieuwe prijs”, geen context.
Tabs zonder tablist
Twee elementen met role="tab". Een element met role="tabpanel". Maar geen role="tablist".
CSS voegt tekst toe die niet in de naam zit
Een knop. In de HTML staat “Verwijderen.” Maar de CSS voegt via ::after het woord “definitief” toe.
Custom component waarvan de focus is vergeten
Een zelfgebouwde tabcomponent. Mooie styling. Hover-effecten. Transities. Tab ernaartoe. Geen focusindicator. De developer heeft border: none en outline: none in de component-CSS gezet om de standaardstyling te verwijderen. En is vergeten een :focus-visible toe te voegen.
Hele alinea als link
“Link. Deze prachtige winterjas is gemaakt van gerecycled materiaal en houdt je warm tot min 20 graden. Verkrijgbaar in drie kleuren. Nu met 20 procent korting.”
Accordion-paneel op de verkeerde plek in de focusvolgorde
Een accordion met drie secties. Je opent Sectie 1. Er verschijnt een link in het paneel.
ARIA-rollen en -attributen: wanneer je ze nodig hebt en wanneer niet
ARIA is de enige technologie in webtoegankelijkheid waarmee je een pagina makkelijk slechter maakt dan hij zonder was. Een verkeerde rol vertelt hulpsoftware iets dat niet klopt, en de gebruiker vertrouwt daarop.