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.
Zelfgemaakte focusindicator die onzichtbaar is
Tab. Tab. Tab. Waar ben ik? Je navigeert met je toetsenbord door een website. Elke knop en link zou een zichtbare focus moeten hebben. Maar je ziet… niets. Of een vage lichtblauwe gloed.
Kolommen die niet onder elkaar gaan
Sidebar links. Content rechts. Op een groot scherm: perfect. Bij 400% zoom: twee kolommen gepropt in 320 pixels. De sidebar neemt de helft in beslag. De content wordt zo smal dat je twee woorden per regel leest. Of je moet horizontaal scrollen.
Die mooie oranje knop met witte tekst
Oranje knop. Witte tekst. “Bestel nu!” Ziet er goed uit. Valt op. Precies wat je wilt van een call-to-action.
Actieve pagina in het menu: alleen een andere kleur
Home. Over ons. Diensten. Contact. Je bent op “Diensten.” Hoe weet je dat? De tekst is blauw in plaats van zwart.
Tabel nagebouwd met divs
Maandag. Dinsdag. Woensdag. Donderdag. Vrijdag. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 17:00. 09:00 - 13:00.
Fieldset legend
“Hoe wil je benaderd worden?” Met daaronder drie radiobuttons: telefoon, e-mail, brief. Je begrijpt direct dat die opties bij die vraag horen.
Knop met icoon en tekst, maar aria-label vervangt alles
Een knop. Disketje-icoon. Daarnaast: “Opslaan.” De developer dacht: laat ik een uitgebreider aria-label toevoegen. “Sla het huidige document op naar de server.”
Negatieve outline-offset die de focus verbergt
Een link met een donkere achtergrond. De focusindicator is er — een zwarte outline van 2 pixels. Maar outline-offset: -4px duwt die outline naar binnen. Onder de achtergrondkleur.
Afbeelding als link zonder beschrijvend alt
Een winkelwagen-icoon. Klik erop en je gaat naar je winkelwagen. Logisch.
Nul fouten in de scan, ruim honderd bevindingen in de audit
We onderzochten onlangs een grote Nederlandse webshop. Voordat we handmatig aan de slag gingen, lieten we er eerst Axe op los, een veelgebruikte geautomatiseerde testtool voor toegankelijkheid die veel developmentteams in hun pijplijn hebben zitten. De uitkomst: geen fouten. Een rapport zonder bevindingen, een groen vinkje.
Een ontoegankelijk element met een toegankelijk alternatief: mag je het laten staan?
In bijna elke audit kom ik deze situatie 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?”
Focus verlaat het dialoogvenster
De cookie-popup is open. Je tabt door de opties. Accepteren. Weigeren. Instellingen.