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.
Toggle-knop zonder status
Een knop: “Donkere modus.” Je klikt. De achtergrond wordt donker. Visueel is het duidelijk: donkere modus is aan.
Paginering: "1", "2", "3"
Link: “1”. Link: “2”. Link: “3”. Eén, twee, drie wat? Pagina’s? Producten? Stappen?
Skiplink die de focus niet verplaatst
“Ga naar inhoud.” Je drukt op Enter. De pagina scrollt naar de content. Mooi.
CAPTCHA die niet met het toetsenbord werkt
“Bewijs dat je geen robot bent.” Klik op alle afbeeldingen met een verkeerslicht. Sleep het puzzelstukje naar de juiste plek. Teken het patroon na.
Eenvoudige tabel die onnodig horizontaal scrollt
Openingstijden. Twee kolommen. Dag en tijd. Maandag: 09:00 - 17:00 Dinsdag: 09:00 - 17:00
De knop die eruitziet als disabled maar het niet is
Een grijze knop. Lichte tekst. Ziet eruit als uitgeschakeld. Maar klik erop. Hij doet iets. Hij is niet disabled. Hij ziet er alleen zo uit.
Verborgen menu dat toch wordt voorgelezen
Je mobiele menu is dicht. Ingeklapt. Onzichtbaar. Maar een schermlezer leest alle vijf de menulinks voor. Home. Over ons. Diensten. Projecten. Contact. Alsof het menu gewoon open is.
Heading in een summary: zelfde probleem
Net als bij een button: een <summary> heeft de impliciete rol van een button. En een button eet de rollen van zijn kinderen op.
Linktekst verborgen met display: none
De developer wilde het netjes doen. Een link met een aria-tekst voor schermlezers. Maar in plaats van sr-only gebruikte die display: none.
Focus gaat niet naar de foutmelding na het versturen
Je vult een formulier in. Twee velden vergeten. Je drukt op Versturen.
Custom videospeler met onbereikbare knoppen
Een video op je website. Eigen vormgeving. Play-knop, volume, voortgangsbalk, fullscreen.