Vanaf 28 juni 2025 is de WCAG 2.2 van kracht. Wat inhoudt dat website aan deze richtlijnen moeten voldoen. Voor ontwerpers houdt dit in dat zij niet langer alleen bezig zijn met de gebruikersbehoeften maar ook hoe je oplossingen toegankelijk maakt. Om ontwerpers een handje te helpen kunnen zij de WCAG 2.2 richtlijnen volgen om tot een toegankelijk ontwerp te komen. Deze richtlijnen bestaan uit 4 principes, 13 richtlijnen, 86 criteria en 3 niveau’s.

Waarneembaar Informatie en componenten van de interface moeten op een manier worden gepresenteerd die gebruikers kunnen waarnemen. Dit betekent bijvoorbeeld dat tekst goed leesbaar moet zijn, dat afbeeldingen alternatieve tekst moeten hebben (alt-tekst) en dat media (zoals video) ondersteund moet worden met ondertitels of transcripties.

Bedienbaar De interface-elementen moeten bedienbaar zijn voor alle gebruikers, ongeacht hun beperking. Dit houdt in dat gebruikers de website met verschillende invoerapparaten kunnen bedienen (zoals toetsenborden of schermlezers). Voorbeeld: navigatie moet zonder muis mogelijk zijn, en gebruikers moeten voldoende tijd hebben om interacties af te ronden.

Begrijpelijk De inhoud moet begrijpelijk zijn voor gebruikers. Dit betekent dat teksten eenvoudig en duidelijk geschreven moeten zijn, en dat de interface voorspelbaar moet zijn. Gebruikers moeten bijvoorbeeld begrijpen hoe ze door de website kunnen navigeren en wat de interactie-effecten zijn.

Robuust De content moet goed functioneren op een breed scala aan apparaten en platformen. Dit betekent dat de inhoud compatibel moet zijn met huidige en toekomstige technologieën, zoals verschillende browsers en hulpmiddelen voor toegankelijkheid, zodat deze toegankelijk blijft voor zoveel mogelijk gebruikers.

De 13 richtlijnen met 86 criteria zorgen ervoor dat content toegankelijk is voor alle gebruikers, inclusief die met beperkingen. Ze benadrukken het belang van tekstalternatieven voor niet-tekstuele inhoud, het aanbieden van alternatieven voor tijd gebaseerde media, en het aanpasbaar maken van de inhoud zonder verlies van betekenis. Daarnaast moet de inhoud leesbaar en begrijpelijk zijn, de navigatie eenvoudig en de interface-elementen goed bruikbaar. Verder moeten gebruikers, fouten kunnen herstellen, consistentie behouden worden in het ontwerp, en formulieren toegankelijk zijn. Tot slot moet de inhoud robuust en compatibel zijn met verschillende technologieën, zoals schermlezers.

Al deze richtlijnen zijn onderverdeeld in 3 niveau’s: A, AA en AAA. Waarbij niveau A en AA verplicht zijn en AAA optioneel.

Niveau A (Laag):Dit niveau bevat de minimumvereisten die noodzakelijk zijn om een website of applicatie toegankelijk te maken voor de meeste gebruikers.

Niveau AA (Midden): Dit niveau richt zich op het verbeteren van de toegankelijkheid voor een breed scala aan gebruikers, inclusief die met gewone beperkingen zoals slecht zicht of beperkte mobiliteit.

Niveau AAA (Hoog): Dit is het meest strenge niveau, bedoeld voor websites die streven naar de hoogste toegankelijkheidsnormen. Het bevat bijvoorbeeld specifieke eisen voor gebruikers met ernstige visuele, auditieve of cognitieve beperkingen.

De WCAG 2.2 AAA-niveaus zijn niet verplicht omdat ze bedoeld zijn voor een zeer specifieke groep gebruikers met ernstige beperkingen. Het AAA-niveau bevat richtlijnen die een hoge mate van toegankelijkheid garanderen, maar deze kunnen soms moeilijk of zelfs niet haalbaar zijn voor alle websites of toepassingen, vooral voor kleinere organisaties of projecten met beperkte middelen.

Een toegankelijke website is dus meer dan alleen een trend. De website WCAG.nl is erop gericht om mensen bewust te maken van het feit dat digitale toegankelijk voor iedereen is. Op de website kan er een website scan worden uitgevoerd die de toegankelijkheid van een website meet: www.wcag.nl

Aangezien de WCAG-richtlijnen de basis zijn van een toegankelijke website, is het belangrijk voor ontwerpers om te begrijpen hoe ze deze richtlijnen kunnen toepassen in hun werk. Door bij het ontwerpen al rekening te houden met aspecten zoals kleurcontrast, navigatiegemak en duidelijke visuele hiërarchie, wordt toegankelijkheid een geïntegreerd onderdeel van het ontwerpproces in plaats van een last-minute toevoeging.

Allereerst is het belangrijk om te weten hoe blinden een website benaderen en ervaren. Zij maken gebruik van een screenreader. Dit is software die de tekst op een beeldscherm voorleest. Dit kan bijvoorbeeld met JAWS. De gebruiker kan dan met het toetsenbord navigeren van kopregel naar kopregel. Om websites snel te kunnen scannen stellen gebruiker een hoge voorleessnelheid in. Belangrijk bij het ontwerpen voor deze doelgroep is dat de content zoals tekstlinken, buttons en andere navigatie-onderdelen een specifieke naam hebben. Dus niet “Lees meer”, maar “Lees meer over WCAG”.

Slechtzienden gebruiken een hoog contrast weergave van de website om beter te kunnen lezen. Ook kunnen zij gebruik maken van vergrotingssoftware (Supernova of Zoomtext). Deze vergroot een klein deel van het scherm. Een nadeel is wel dat de gebruiker de samenhang van de webpagina hierdoor verliest.

Ook op technisch vlak kunnen we deze groep ondersteunen. Bijvoorbeeld door een skiplink linksboven op de pagina te plaatsen. Hiermee kan de gebruiker het hoofdmenu overslaan en direct naar de hoofdinhoud van de pagina navigeren. Dit is vooral handig, omdat het voorkomt dat gebruikers bij elke nieuwe pagina opnieuw door het hele menu moeten navigeren. Het navigeren gebeurt door middel van de tab-toets.

Voor slechtzienden kunnen we technisch een alt-tekst toevoegen aan afbeeldingen. Deze korte beschrijving legt uit wat er op de afbeelding te zien is, zodat gebruikers via een screenreader inhoudelijke informatie over de afbeelding krijgen. Als de alt-tekst ontbreekt, slaat de screenreader de afbeelding over, waardoor waardevolle context verloren kan gaan.

Het is belangrijk om geen tekst in afbeeldingen te plaatsen, omdat gebruikers met een visuele beperking de tekst niet kunnen lezen. De stelregel is: "Kan het in HTML, dan moet het in HTML". Dit betekent dat tekst altijd als echte tekst (in HTML) moet worden ingevoerd, zodat een screenreader de inhoud kan voorlezen, in plaats van het te verwerken als onderdeel van een afbeelding.

Als een gebruiker last heeft van kleurenblindheid dan is hij niet in staat om een volledige kleur of een normaal kleurenscala waar te nemen. Dit resulteert in het minder goed kunnen onderscheiden van kleuren, kleurenzwakte of echte kleurenblindheid. Als iemand echt kleurenblind is dan valt een deel van de kleurwaarneming in zijn geheel weg.

De vier bekendste vormen van kleurblindheid zijn:
Protanopia (rood) Het onvermogen om rood licht waar te nemen. Voor deze mensen lijken rode tinten donkerder dan de werkelijke tinten en lijken ze meer beige. Groene tinten worden vaak verward met rode tinten.

Deuteranopia (groen) Het onvermogen om groen licht waar te nemen. Deze mensen nemen blauw en geel waar. De rode tinten zien er bij deze aandoening niet donkerder uit.

Tritanopia (blauw) Het onvermogen om enig blauw licht waar te nemen. Deze mensen kunnen de kleurtinten groen en blauw door elkaar halen. Geel kan overkomen als een lichtere tint rood of helemaal niet zichtbaar zijn.

Achromatopsia (grijs) Het onvermogen om elke kleur waar te nemen. Deze mensen zien alle kleuren als grijs.

Op het web lopen kleurenblinden tegen problemen aan zoals moeilijk leesbare teksten, call to action buttons die niet opvallen en onvindbare hyperlinks.

Voldoende kleurcontrast is voor deze gebruikersgroep de oplossing. Met genoeg contrast kan ook deze gebruikersgroep gefaciliteerd worden en de website als normaal ervaren. Bij kleurcontrast moet er dan wel rekening gehouden worden met het licht en donker.

Tijdens het ontwerpen kun je tools zoals de Colour Contrast Analyser gebruiken. Hiermee selecteer je de voor- en achtergrondkleuren om de contrastverhouding te controleren. Dit helpt om te bepalen of het ontwerp voldoet aan de contrastvereisten. Binnen de WCAG zijn er verschillende minimale contrastratio’s vastgesteld, afhankelijk van de tekstgrootte en het type:

Voor gewone tekst: minimaal 4.5:1 Dit geldt voor tekst kleiner dan 18 punten (of 14 punten in vet).

Voor grote tekst: minimaal 3:1 Dit geldt voor tekst van 18 punten of groter (of 14 punten in vet).

Voor gebruikersinterface-componenten en grafische objecten: minimaal 3:1 Hierbij moet je denken aan buttons en iconen die belangrijk zijn voor de interactie.

Kleurcontrast is niet alleen belangrijk voor tekst en iconen, maar ook voor interface-elementen. Dit geldt bijvoorbeeld voor de focuskleur van een element wanneer je navigeert met de tab-toets bij bijvoorbeeld een invoerveld. Een duidelijk contrast zorgt ervoor dat gebruikers kunnen zien welk element geselecteerd is, wat essentieel is voor een toegankelijke navigatie.

Wat ook helpt tijdens het ontwerpen is om gebruik te maken van meer massa. Een kleurenblinde kan een dunne gekleurde lijn niet altijd zien maar een dikkere lijn wel. Dit heeft te maken met de massa waarin de kleur aanwezig is. Deze techniek kan toegepast worden in bijvoorbeeld infographics. Hierin kan je kleur gebruiken in combinatie met tekst of een symbool. Zo snapt de kleurenblinde alsnog de boodschap.

In Nederland zijn er bijna twee miljoen mensen die moeite hebben met lezen en schrijven. Daarvan zijn er anderhalf miljoen laaggeletterd en honderdduizenden dyslectisch. Hierdoor worden ze beperkt in het functioneren en het tot zich nemen van informatie.

Door een voorleesfunctie aan te bieden op de website wordt deze doelgroep geholpen. Dit geldt voor zowel de groep die niet kan lezen en schrijven als voor laaggeletterde. Het is een snel middel om informatie tot je te nemen. Ook kunnen laaggeletterde met te teksten meelezen zodat ze op hun eigen tempo kunnen leren. Sommige websites maken al gebruik van deze functie, zoals nu.nl

Een andere optie is het aanbieden van instructievideo’s. De gebruiker hoeft zelf verder niets te lezen en kan via de video de informatie tot zich nemen. Dit wordt bijvoorbeeld gedaan bij het OV

Tegenwoordig zie je dat websites veel gebruik maken van video’s. Deze zijn voor doven niet te bekijken, aangezien zij de gesproken tekst in een video niet kunnen horen.

Om toch deze content toegankelijk te maken voor deze groep mensen kun je gebruik maken van ondertiteling of een transcript.

Ondertiteling
Ondertiteling is tekst die synchroon met een video wordt weergegeven en gesproken woorden en geluidseffecten toont. Het is bedoeld om de kijkervaring toegankelijker te maken, vooral voor mensen die de audio niet kunnen horen.

Transcript
Een transcript is een volledige uitgeschreven versie van een audio- of videobestand, inclusief alle gesproken tekst, geluidseffecten en soms visuele context. Het biedt een losstaand alternatief dat onafhankelijk van de video kan worden gelezen. Het voordeel is dat een transcript kan worden omgezet naar braille-leesregels en is ook beschikbaar voor zoekmachines zoals Google.