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.
"Welkom" zegt niets
“Welkom.” “Pagina 1.” “Home.” “Untitled Document.” Dat zijn titels die ik regelmatig tegenkom. Ze bestaan. Ze zijn niet leeg. Maar ze zeggen niets.
Voldoen aan WCAG is niet hetzelfde als toegankelijk zijn
Op 22 juni berichtte de NOS dat webwinkels in Nederland toegankelijker worden voor mensen met een visuele beperking, maar dat er nog veel werk nodig is. Je leest het hele bericht bij de NOS.
Custom dropdown die niet met toetsen werkt
Een prachtig gestylede dropdown. Hover erop: de opties verschijnen. Klik op een optie: geselecteerd.
Actieve link in het menu met onzichtbare indicator
Je bent op de pagina “Over ons”. In het menu is die link anders dan de rest. Een subtiele onderstreping. Lichtblauw. #8AB4F8.
Tekst afgesneden door een vaste hoogte
Een banner van 200 pixels hoog. Past precies. Mooie headline, korte tekst, call-to-action.
Witte tekst op een foto
“Welkom bij ons” In wit. Op een foto van een zonnig landschap. Links voldoende contrast. Rechts? Waar de lucht wit is? Onleesbaar.
Groene rij = goedgekeurd, rode rij = afgewezen
Een tabel met aanvragen. Groen: goedgekeurd. Rood: afgewezen. Oranje: in behandeling.
CSS order die de logica verbreekt
Stap 1: Maak een account. Stap 2: Kies een template. Stap 3: Publiceer.
Labels
Klik eens op het woord naast een checkbox. Als er niks gebeurt, is het label niet gekoppeld aan het invoerveld. Dat is een gemiste kans, niet alleen voor toegankelijkheid, maar voor iedereen.
Div als knop: naam maar geen rol
“Versturen.” Een schermlezer leest de tekst. Maar zegt niet dat het een knop is. Want het is geen knop. Het is een div.
aria-labelledby verwijst naar de verkeerde tekst
Een invoerveld. Zichtbaar label: “E-mailadres.” Maar aria-labelledby verwijst naar een verborgen element met: “Voer uw elektronische postadres in.”
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.