Home » Blog » Interactieontwerp » WCAG 2.1: webdesign zonder beperkingen

WCAG 2.1: webdesign zonder beperkingen

Het vakgebied User Experience design focust zich op het creëren van een positieve gebruikerservaring op websites en apps. Om dit te waarborgen voor iedereen is het belangrijk rekening te houden met de WCAG 2.1 (Web Content Accessibility Guidelines, versie 2.1) richtlijnen. In deze richtlijnen staat onder andere aangegeven aan welke voorwaarden webdesign moet voldoen om het toegankelijk te maken voor mensen met een beperking. Denk aan beperkingen op het gebied van zien, horen, lezen en spreken, maar ook cognitieve, fysieke en neurologische beperkingen.

Wat valt onder de WCAG 2.1?

De WCAG 2.1 bestaat vier principes, met als ezelsbruggetje de afkorting POUR: perceivable (waarneembaar), operable (bedienbaar), understandable (begrijpelijk) en robust (robuust). Onder deze vier principes vallen dertien richtlijnen. En onder die dertien richtlijnen vallen 78 regels.

Waarneembaar

Het eerste principe focust zich op de waarneembaarheid van webdesign. Voor een persoon met een visuele beperking kan het lastig zijn om een website te lezen of te bekijken. Onder dit principe vallen vier richtlijnen die het webdesign toegankelijker maken. Namelijk: tekstalternatieven, op tijd gebaseerde media, aanpasbaar en onderscheidbaar. Denk bijvoorbeeld aan: braille, spraaksturing, grote letters, simpel taalgebruik, gebarentaal en audiotranscriptie. Ook een duidelijk onderscheid tussen voor- en achtergrond qua beeld en geluid helpt aan een betere waarneembaarheid. Daarnaast is het volgens dit principe belangrijk om content op een simpele manier weer te kunnen geven, zonder informatie of structuur te verliezen. Alle richtlijnen en regels vind je op de website van WCAG 2.1.

Bedienbaar

Onder het principe bedienbaar vallen vijf richtlijnen. Namelijk: toetsenbordtoegankelijk, genoeg tijd, toevallen en fysieke reacties, navigeerbaar en input modaliteiten. Zo moet een webdesign volledig te bedienen zijn met alleen het gebruik van een toetsenbord. Hetzelfde geldt voor andere invoerapparaten, zoals spraakbesturing en een muis. Daarnaast mag content geen trigger zijn voor toevallen of andere fysieke reacties. Andere regels binnen dit principe zijn: een duidelijke navigatie, geen tijdsbarrière en het doel van elke pagina duidelijk maken.

Begrijpelijk

Het derde principe is begrijpelijk. In de WCAG 2.1 wordt dit principe opgedeeld in drie richtlijnen: leesbaar, voorspelbaar en assistentie bij invoer. Onder leesbaar vallen de moeilijkheidsgraad en taal van de teksten. De richtlijn voorspelbaar houdt in dat de gebruiker graag wil weten wat er gebeurt wanneer hij of zij een bepaalde actie uitvoert. Tot slot houdt assistentie bij invoer in dat het webdesign een help- en errorfunctie moet bevatten.

Robuust

Het principe robuust bevat de richtlijn compatibel. Het principe houdt in dat een webdesign door verschillende software en webbrowsers als betrouwbaar wordt gezien.

Levels van WCAG 2.1

Onder de dertien richtlijnen vallen 61 regels die beschrijven hoe een website toegankelijker gemaakt kan worden voor mensen met een beperking. Deze zijn onderverdeeld in drie levels: A, AA en AAA. De A-regels zijn basisaanpassingen. De AA-regels zijn de ideale regels waaraan een website moet voldoen. De AAA-regels zorgen voor de grootste toegankelijkheid. Een webdesign voldoet aan het level A wanneer alle A-regels voldaan is. Level AA is bereikt wanneer alle A- én AA-regels zijn toegepast in het webdesign. Level AAA is bereikt wanneer een webdesign aan de A-, AA- én AAA-regels voldoet. Hoe meer regels zijn toegepast, hoe hoger de toegankelijkheid voor mensen met een beperking. Hieronder vind je een overzicht van de principes, richtlijnen, regels en levels:

Digitale toegankelijkheid

Eén van de websites die toegankelijk moet zijn voor mensen met een beperking, is de website van Rijksoverheid. Dat staat vastgesteld in het tijdelijk besluit digitale toegankelijkheid overheid. Dit besluit geldt voor alle Nederlandse overheidsinstanties. Op deze website kan je de link van jouw website invoeren en bekijken of het voldoet aan de WCAG. Er zijn websites die hoog scoren op deze test. Voorbeelden hiervan zijn: geleidehond.nl, duo.nl, zalando.nl, en instagram.com.

Voorbeelden

Eén van de richtlijnen die wordt omschreven in de WCAG 2.1 is dat een website volledig met toetsenbord bediend moet kunnen worden. Dat kan door op tab te drukken. Op de website van Rijksoverheid zie je een knop met: ‘Ga direct naar inhoud’ wanneer je op tab drukt. Zo hoeft de gebruiker niet langs elk menu-item te gaan, maar kan hij of zij direct naar de inhoud van de pagina.

Een andere richtlijn is het kleurencontrast. Mensen met een visuele beperking, zoals kleurenblinden en mensen met een verminderd zicht, kunnen een website veel beter lezen en begrijpen wanneer het contrast hoog is. Hieronder zie je twee voorbeelden:

Wil je de toegankelijkheid op jouw website vergroten? Stuur dan gerust een berichtje, mailtje of bel even. Dan kijken wij wat we voor de gebruikers van jouw website kunnen betekenen.