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.
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.
Foutmelding en zoekresultaat ontbreken in de titel
Je vult een formulier in. Twee velden fout. Je drukt op Versturen. De pagina herlaadt.
Wat is een toegankelijke naam?
Zet een schermlezer aan en beweeg naar een knop. Je hoort twee of drie dingen: “Voeg toe aan winkelmand, knop”. Het woord “knop” is de rol. “Voeg toe aan winkelmand” is de toegankelijke naam.
Carrousel die alleen met klikken werkt
Pijltje links. Pijltje rechts. Klikken om door de slides te bladeren.
Markeringen op screenshots die onzichtbaar zijn
Een screenshot in je documentatie. Met een rode cirkel om het knopje dat je moet klikken.
Vaste elementen die het scherm overnemen
Je opent een webpagina en zoomt in tot 400%. Onderaan: een cookiemelding. Die is nu niet meer een bescheiden balkje — het neemt de helft van je scherm in beslag.
Dark mode met nieuwe contrastproblemen
Je website heeft dark mode. Modern. Gebruiksvriendelijk. Populair. En vol contrastproblemen die er in de lichte versie niet waren.
Focusrand die alleen door kleur werkt
Je navigeert met het toetsenbord. Een knop krijgt focus. De focusrand is lichtblauw (#99CCFF) op een witte achtergrond.