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.
SC 1.4.10 - Wat betekent "Reflow"?
Iemand die slecht ziet, zoomt in tot 400%. Op een site die zich niet aanpast betekent lezen dan: naar rechts scrollen, terug naar links, en dat bij elke regel opnieuw. Na 2 alinea’s geeft iedereen dat op. Daarom zegt WCAG: de inhoud moet zich schikken naar het scherm, zonder scrollen in twee richtingen.
SC 1.4.11 - Wat betekent “Contrast voor niet-tekstuele onderdelen”
Toegankelijkheid gaat niet alleen over leesbare tekst. Ook visuele elementen zoals knoppen, iconen, formuliervelden en focusindicatoren moeten duidelijk zichtbaar zijn. Als deze nauwelijks afsteken tegen de achtergrond, kunnen gebruikers belangrijke functies of informatie missen.
SC 1.4.13 - Wat betekent “Inhoud bij hover of focus”
Sommige informatie verschijnt pas wanneer je ergens met de muis overheen gaat (hover) of wanneer je een element selecteert met je toetsenbord (focus). Bijvoorbeeld tooltips, uitklapmenu’s of tekstballonnetjes. Dit kan verwarrend zijn voor gebruikers die geen muis gebruiken, motorische beperkingen hebben of een schermlezer gebruiken.
SC 1.4.2 - Wat betekent "Audiobediening"
Je opent een website en ineens begint er muziek te spelen. Of een promotievideo start automatisch met geluid. Voor de meeste mensen is dat irritant. Voor iemand die een schermlezer gebruikt, is het een ramp. Die schermlezer praat namelijk ook – en twee geluidsbronnen tegelijk maken het onmogelijk om de website te gebruiken.
SC 1.4.3 - Wat betekent "Contrast (minimum)"?
Lichtgrijze tekst op een witte achtergrond. Het oogt rustig en modern, maar met een beetje zon op je scherm is er niets meer van te lezen. Voor bezoekers die minder goed zien is dat niet af en toe zo, maar altijd. Daarom zegt WCAG: tekst moet genoeg contrast hebben met de achtergrond.
SC 1.4.4 - Wat betekent "Tekst vergroten"?
Iemand die de letters op je site te klein vindt, drukt op Ctrl en plus, of Command en plus op een Mac. De tekst wordt groter, en dan gaat het mis: de laatste regel van elk kader valt weg, knopteksten schuiven over elkaar en het menu is niet meer te openen. Voor veel bezoekers is vergroten geen extraatje maar de enige manier om je site te lezen. Daarom zegt WCAG: tekst moet tot 200% te vergroten zijn zonder dat er inhoud of functionaliteit verloren gaat.
SC 2.1.1 - Wat betekent "Toetsenbord toegankelijk"
WCAG 2.1.1 stelt dat alle functionaliteiten op een website toegankelijk zijn via een toetsenbord. Dit is belangrijk omdat niet iedereen een muis kan gebruiken. Interactieve elementen die niet met het toetsenbord te bedienen zijn, zullen ook niet voor schermlezers toegankelijk zijn.
SC 2.1.4 - Wat betekent “Sneltoetsen met tekens”
Veel webapps en websites gebruiken sneltoetsen om acties sneller uit te voeren, zoals “Ctrl + S” om iets op te slaan of “Ctrl + F” om te zoeken. Maar soms worden ook enkele tekens gebruikt als sneltoets, zoals een “s” om naar zoeken te springen. Dit kan problematisch zijn voor mensen die alternatieve invoerapparaten gebruiken, zoals spraakherkenning of braille-toetsenborden, omdat ze onbedoeld acties kunnen triggeren.
SC 2.2.1 - Wat betekent "Tijdslimiet aanpassen"
Sommige mensen hebben meer tijd nodig om een taak op een website te voltooien, bijvoorbeeld mensen die lezen met een schermlezer, motorische beperkingen hebben, of gewoon rustig willen werken. Als je website een automatische tijdslimiet heeft (bijvoorbeeld bij formulieren, tests, of inlogsessies) en mensen kunnen die niet aanpassen, kunnen ze belangrijke acties verliezen.
SC 2.2.2 - Wat betekent "Pauzeren, stoppen of verbergen"
Een carrousel die automatisch door slides heen scrollt. Een nieuwsticker die langs de onderkant van het scherm glijdt. Een achtergrondanimatie die continu beweegt. Voor jou is het een dynamisch design-element. Voor iemand met ADHD, een concentratiestoornis of een vestibulaire aandoening kan het onmogelijk maken om de rest van de pagina te lezen.
SC 2.4.11 - Wat betekent "Focus niet volledig bedekt"
Je navigeert met je toetsenbord door een webshop. Je drukt op Tab om naar de volgende knop te gaan, maar die knop verdwijnt achter een sticky header. Of je focust op een link in de pagina, maar een cookiebanner bedekt precies dat element. Je weet dat de focus ergens is, maar je kunt niet zien waar.
SC 2.4.2 - Wat betekent "Paginatitels"
Je hebt twaalf tabbladen open in je browser. Je zoekt dat ene tabblad met je winkelwagen. Maar drie tabbladen heten “Home”, twee heten “Welkom”, en de rest toont alleen de naam van het bedrijf. Je moet elk tabblad aanklikken om te vinden wat je zoekt.