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.
Productafbeelding zonder beschrijving
Ik moest een keer nieuwe golfschoenen kopen. De volgende dag zou ik gaan golfen en ik moest voor 16:00 bestellen om ze op tijd te krijgen. Die hele dag zat ik in de auto. En ik heb een stoornis: maximaal drie kleuren in mijn outfit. De schoenen moesten wit zijn met rode elementen. Probeer dat eens in de file te vinden op je telefoon. Ik kon alleen maar luisteren naar wat de voorleessoftware me vertelde. Maar bij de meeste webshops was er niks te horen: geen kleur, geen materiaal, geen details. En toen was ik weg als klant.
Kopniveaus
Stel je voor: je opent een boek en de inhoudsopgave gaat van hoofdstuk 1 direct naar paragraaf 3.2.
overflow: hidden knipt de focusindicator af
Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
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.
Focusindicator die opgaat in de achtergrond
Er is een focusindicator. Technisch gezien. Een lichtgrijze outline (#E0E0E0) op een witte achtergrond. 1 pixel dik.
outline: none, de meest destructieve regel in CSS
*:focus { outline: none; } Eén regel. En elke toetsenbordgebruiker op je website navigeert blind.
Zijn je formulieren goed zichtbaar?(WCAG 1.4.11)
Non-text Contrast: waarom je formuliervelden, knoppen en iconen onzichtbaar zijn voor slechtzienden (WCAG 1.4.11) Je staat met je telefoon in de felle zon voor een museum. Je wilt tickets kopen, maar het formulier op de website is nauwelijks zichtbaar. Invoervelden met lichtgrijze randjes, knoppen die opgaan in de achtergrond: je tuurt, draait je scherm, houdt je hand erboven. Uiteindelijk geef je het op en sluit je aan bij de rij voor de kassa.
Text Spacing: waarom vaste hoogtes je code breken (WCAG 1.4.12)
Text Spacing: waarom je tekst nooit mag vastzetten in een vaste hoogte (WCAG 1.4.12) Je hebt net die perfecte hero-sectie gebouwd. Exacte hoogte van 400px, tekst keurig gecentreerd, pixel-perfect zoals in het ontwerp. Merkte je dat het laatste woord van de titel ineens is verdwenen? Welkom bij WCAG succescriterium 1.4.12.
Tekst in afbeeldingen: waarom het niet mag (WCAG 1.4.5)”
WCAG 1.4.5 Afbeeldingen van tekst: waarom je tekst nooit als plaatje mag gebruiken Je designer heeft een prachtige header gemaakt. Goed verkopende tekst, perfecte kleurverloop, precies het juiste effect. Hij levert een JPG aan. Klaar, toch?
Niet-tekstuele content: wat je moet weten als je digitaal verkoopt of informeert (WCAG 1.1.1)
WCAG 1.1.1 Niet-tekstuele content: wat je moet weten als je digitaal verkoopt of informeert Voor product owners van websites en -winkels die hun site toegankelijk moeten maken
1.2.3 - Wat betekent “Audiodescriptie of media-alternatief (vooraf opgenomen)”?
Waar gaat het over? Video’s die vooraf zijn opgenomen (dus niet live), moeten een audiobeschrijving of een tekstalternatief hebben voor visuele informatie die niet duidelijk wordt door de audio.
1.2.5 - Wat betekent \"Audiodescriptie\"?
Waar gaat het over? Video’s die vooraf zijn opgenomen moeten een audiobeschrijving hebben voor de visuele informatie die niet duidelijk wordt door de audio.