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.
Invoerveld zonder zichtbare rand
Een wit invoerveld op een witte achtergrond. Met een lichtgrijze rand. Heel lichtgrijs. #D9D9D9.
Content verdwijnt door overflow hidden
Je zoomt in op een webpagina. De tekst wordt groter. En dan, halverwege een zin, houdt de tekst op. Alsof iemand de rest heeft afgeknipt.
Een ontoegankelijk element met een toegankelijk alternatief: mag je het laten staan?
In bijna elke audit kom ik dit moment tegen. Een PDF die helemaal niet toegankelijk is. Een poster met de programma-informatie van een evenement. Een infographic vol cijfers. En de klant zegt: “Maar die informatie staat ook gewoon als tekst op de pagina. Hoeft dat dan nog?”
Knop die navigeert, link die een actie uitvoert
“Contact, knop.” Je drukt op Enter. Een nieuwe pagina opent. Maar het was een knop. Knoppen voeren acties uit. Ze navigeren niet.
Placeholdertekst die niemand kan lezen
“Voer hier je e-mailadres in” Dat staat er. In het invoerveld. In #C0C0C0 op wit. Contrast: 1,6:1.
Formulierveld kleurt rood bij een fout. Dat is alles.
Je vult je e-mailadres verkeerd in. De rand van het veld wordt rood.
Kolommen waarvan de inhoud door elkaar loopt
Twee projecten naast elkaar. Links een afbeelding, rechts een afbeelding. Daaronder links een beschrijving, rechts een beschrijving.
Afbeelding van prefix
Je hebt een overzichtspagina in je webwinkel met 100 producten. In elke alt-tekst staat “Afbeelding van…”. Klinkt netjes, toch? Tot je luistert wat er gebeurt. Voorleessoftware zegt bij elke afbeelding al automatisch “afbeelding.” Dus als jij “Afbeelding van Nike schoenen” in de alt-tekst zet, hoort je klant: “Afbeelding. Afbeelding van Nike schoenen.” Bij de vierde rij producten word je daar helemaal gek van. En dat wil je niet als winkelier.
Tabellen
Een tabel met openingstijden. Maandag: 09:00 tot 17:00. Visueel snap je direct welke dag bij welke tijd hoort. Maar als die tabel is gebouwd met divjes in plaats van echte table-elementen, ziet een schermlezer alleen losse stukjes tekst. “Maandag.” “09:00 - 17:00.” Zonder de relatie ertussen.
"Klik op Zoeken." Niets gebeurt.
Je gebruikt spraakbesturing. Je ziet een knop met “Zoeken” erop. Je zegt: “Klik op Zoeken.”
Knop zonder naam
Je hebt op je website een zoekveld met een knop. Op een desktop staat er “Zoeken” naast het vergrootglas-icoon. Prima, dat werkt. Maar wat gebeurt er als je inzoomt of de pagina op een telefoon bekijkt? De tekst “Zoeken” verdwijnt en alleen het icoon blijft over. En als dat icoon geen tekstalternatief heeft, dan weet iemand die voorleessoftware gebruikt niet wat die knop doet. Ze horen: “Knop.” Dat is alles. Geen “zoeken”, geen “versturen”, gewoon “knop.”