De nieuwe WCAG 2.2: een diepere duik in digitale toegankelijkheid

De Web Content Accessibility Guidelines (WCAG) zijn internationale richtlijnen die gemaakt zijn door het World Wide Web Consortium (W3C). Ze zijn bedoeld om digitale content zoals websites en mobiele apps toegankelijk te maken. Dit heeft vooral veel voordelen voor mensen met beperkingen. WCAG biedt richtlijnen en normen die ontwikkelaars helpen om ervoor te zorgen dat hun digitale content voor iedereen bruikbaar is. Hieronder bespreken we de recente updates van WCAG 2.2 en hun rol bij het bevorderen van digitale toegankelijkheid.

Kort geleden publiceerde het W3C de langverwachte Web Content Accessibility Guidelines 2.2 (WCAG 2.2) Proposed Recommendation. Deze update is een belangrijke stap vooruit op het gebied van digitale toegankelijkheid. Het heeft als doel om de online wereld nog toegankelijker te maken voor mensen met verschillende beperkingen. WCAG 2.2 introduceert nieuwe richtlijnen en maakt bestaande richtlijnen duidelijker. Ook brengt het enkele belangrijke wijzigingen met zich mee ten opzichte van WCAG 2.1. Hieronder gaan we dieper in op de belangrijkste veranderingen en hoe deze van invloed zijn op web ontwikkelaars, ontwerpers en eigenaren van digitale content.

Waarom een update naar WCAG 2.2?

Digitale toegankelijkheid is een concept in ontwikkeling. Deze technologische vooruitgang vereist regelmatige updates van de richtlijnen om de gebruikersbehoefte tegemoet te komen. In 2018 kwam WCAG 2.1 uit. Maar omdat technologie snel verandert en er steeds meer gebruikers zijn met verschillende behoeften, moeten er meer verbeteringen komen. WCAG 2.2 speelt in op deze veranderende omstandigheden en versterkt de focus op inclusieve digitale ervaringen.

De Belangrijkste Wijzigingen in WCAG 2.2

1. Duidelijke zichtbaarheid: Er moeten duidelijk zichtbare dikke randen rond focusbare elementen zijn, zoals knoppen, links en tekstvakken. Wanneer je geen contrast hebt is de verhouding 1,0:0 met omliggende kleuren. Om te voldoen aan de richtlijnen heb je een verhouding nodig van minstens 3,0:1 met omliggende kleuren.

Twee manieren om te voldoen:

• Simpel te verwerken:
  “Focus” geeft visueel met een zichtbare rand aan of een item geselecteerd is of niet. Dikke randen moeten volledig zichtbaar zijn rond elementen waarop gefocust kan worden. Deze randen moeten voldoende contrast hebben (minstens 3:1). Daarnaast moeten de omliggende pixelkleuren zowel voor als na de focus zichtbaar zijn. Een goed voorbeeld zie je hieronder op de afbeelding.

• Lastig te verwerken:
  Zorgen dat de stippellijnen voldoende grote streepjes hebben. Ook het contrast van de stippellijnen moet voldoende zijn (minstens 3:1) met de omliggende pixelkleuren. Dit moet zowel voor als na de focus.

Tip: Tanaguru Contrast-Finder om contrast te meten.

2. Alternatieve acties: Voor drag-and-drop-functies moeten websites alternatieve opties bieden. Bijvoorbeeld pijltjestoetsen gebruiken om de volgorde te wijzigen, in plaats van slepen.

Twee manieren om te voldoen:

• Simpel te verwerken:
  Gebruikers de mogelijkheid geven om anders dan met de muis te navigeren. Dit kan bijvoobeeld met de “Alt”, “Tab” “Spacebar” en pijltjes-toetsen. Hiermee kan dan een item geselecteerd worden om het vervolgens naar een andere plek te verplaatsen.
• Lastig te verwerken:
  Voor gebruikers die geen toetsenbord kunnen gebruiken de mogelijkheid geven om een speciaal schermtoetsenbord te gebruiken. Dit schermtoetsenbord kan slepen en neerzetten zoals een normaal toetsenbord dat kan. De gebruikers kunnen items selecteren en verslepen met behulp van aanwijzertoetsen of touchscreen-bewegingen. De ontwikkeling van een schermtoetsenbord is ingewikkelder. Het biedt wel een volledig alternatief voor slepen en neerzetten als een normaal toetsenbord niet gebruikt kan worden.

Tip: Hier een video hoe dat eruit kan zien. (Website: React Spectrum, nov 6, 2022, [Video])

3. Grotere klikbare elementen: Knoppen en links moeten groot genoeg en ruim genoeg zijn om gemakkelijk te kunnen worden geklikt op bijvoorbeeld een touchscreen apparaat. Hierdoor kunnen gebruikers ze gemakkelijk met hun vinger aanraken, wat vooral belangrijk is voor mensen die motorisch beperkt zijn. Denk hierbij aan ouderen of mensen met MS.

Twee manieren om te voldoen:

• Simpel te verwerken:
  Bijvoorbeeld de “Toevoegen aan winkelwagen” knop bij een webshop groter maken en er meer ruimte omheen plaatsen. Dit zorgt ervoor dat gebruikers makkelijker met hun vinger de knop kunnen aanraken op een touchscreen-apparaat. Hierdoor wordt het voor mensen met motorische beperkingen makkelijker om producten aan hun winkelwagen toe te voegen. Het voorkomt ook dat er per ongeluk andere knoppen of links worden aangeraakt.
• Lastig te verwerken:
  Voor een uitgebreide aanpak kan een website de grootte van interactieve elementen automatisch laten veranderen. Dit kan op basis van het apparaat van de gebruiker. Als bijvoorbeeld de gebruiker een klein apparaat met touchscreen. gebruikt, kan de website automatisch de knoppen vergroten en meer ruimte toewijzen aan knoppen en links.

Bron: Bubblefish Agency, Dennis van Zanten, WCAG 2.2 komt eraan en dit zijn de nieuwe succescriteria, 31 maart, 20220

4.Consistente hulp: Richtlijn 3.2.6 benadrukt dat hulpmechanismen op dezelfde plek op verschillende pagina’s moeten staan. Bijvoorbeeld, een ‘Help’-knop rechtsonder op elke pagina.

Twee manieren om te voldoen:

• Simpel te verwerken:
  Op een website zorgen dat de ‘Terug naar boven’ knop altijd op dezelfde plaats staat. Dit biedt gebruikers een herkenbare plek om snel terug te gaan naar de bovenkant van een pagina zonder te hoeven zoeken.Bron: Website: Zalando.nl
• Lastig te verwerken:
  Voor een meer uitgebreide aanpak kan op een website een ‘Help’-knop worden toegevoegd. Deze ‘Help’-knop staat altijd op dezelfde plek en biedt meer informatie over de inhoud op de pagina. Bijvoorbeeld, als een gebruiker zich op een pagina met complexe wiskundige problemen bevindt, kan de ‘Infoknop’ relevante wiskundige hulp en bronnen weergeven. Als de gebruiker naar een pagina over geschiedenis gaat, kan dezelfde ‘Infoknop’ historische context en bronnen bieden.

5.Gemakkelijk inloggen: Richtlijnen 3.3.8 en 3.3.9 stellen voor om gebruikers eenvoudig in te laten loggen zonder wachtwoord. Dit kan bijvoorbeeld door inloggen met e-mailadres en bevestiging via een link in hun inbox.

Twee manieren om te voldoen:

• Simpel te verwerken:
  Een online boekingssysteem kan gebruikers de mogelijkheid geven om in te loggen met hun e-mailadres. Ze ontvangen dan een eenmalige verificatielink in hun inbox. Hierdoor is het niet langer nodig om moeilijke wachtwoorden te onthouden. Zo wordt het inloggen toegankelijk voor een breed publiek.

• Lastig te verwerken:
  Een andere inlogmethode is het toepassen van vingerafdruk- of gezichtsherkenning. Hiermee kunnen gebruikers zich inloggen zonder een wachtwoord te hoeven onthouden. Dit is handig voor gebruikers die moeite hebben met het typen van wachtwoorden en verhoogt tegelijkertijd de beveiliging.

Bron: Website: Simyo.nl, 19 aug, 2021

Toegankelijkheid in ontwikkelen

De publicatie van WCAG 2.2 is een grote stap vooruit in digitale toegankelijkheid. Deze nieuwe richtlijnen verbeteren bestaande richtlijnen en brengen nieuwe normen om digitale inhoud voor iedereen toegankelijk te maken.

Developers, ontwerpers en digitale contentmakers moeten deze veranderingen serieus nemen en proberen te voldoen aan WCAG 2.2. Dit zal de toegankelijkheid vergroten voor mensen met verschillende beperkingen. Hiermee maken we een inclusieve digitale ervaring voor alle gebruikers.

Met deze update wordt digitale toegankelijkheid niet langer beschouwd als een extra inspanning. Het wordt een vast onderdeel van webontwikkeling en -design. Het naleven van WCAG 2.2 moet niet alleen als een verplichting voelen. Het is ook een kans om de online wereld voor iedereen toegankelijk en bruikbaar te maken.

Al met al is WCAG 2.2 een belangrijke mijlpaal op weg naar een nog toegankelijker internet.