Ga naar hoofdinhoud

Introductie WCAG-pagina's

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Opzet

Elk WCAG-succescriterium heeft een eigen pagina waarin is opgenomen:

  • Een uitleg.
  • Links naar gerelateerde richtlijnen, zodat je weet hoe deze criteria toe te passen.
  • Bronnen over extra uitleg of voorbeelden.
  • Relevant gebruikersonderzoek.
  • Hoe voor een succescriterium zelf te testen op webpagina's.
  • Veelgemaakte fouten en de oplossingen hiervoor.
  • De links naar de officiële richtlijnen en W3C-referenties.
  • Een disclaimer over het gebruik van de richtlijnen.

Sommige succescriteria bevatten nu alleen nog links en een uitleg. Het doel is om eind van 2025 de inhoud van de A- en AA-criteria compleet te hebben.

WCAG-pagina's

Niveau A en Niveau AA

1.3.2 Betekenisvolle volgorde

Geef toetsenbordgebruikers de mogelijkheid om binnen een pagina sneller te navigeren door onderdelen te kunnen overslaan.

1.3.3 Zintuiglijke eigenschappen

Geef instructies op een inclusieve manier. De instructies kunnen begrijpen moet niet afhankelijk zijn van eigenschappen die sommige gebruikers niet ervaren, zoals vorm, kleur, afmeting, locatie op het scherm, richting, of geluid.

1.4.1 Gebruik van kleur

Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

1.4.3 Contrast (minimum)

Het contrast van de tekstkleur ten opzichte van de achtergrondkleur moet sterk genoeg zijn, zodat de tekst in het algemeen goed leesbaar wordt gevonden.

1.4.10 Reflow

De gebruiker moet de webpagina tot 400% kunnen vergroten in de browser. Dezelfde inhoud moet aanwezig zijn, en alles moet nog op eenzelfde manier werken.

2.1.2 Geen toetsenbordval

Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

2.4.1 Blokken omzeilen

Geef toetsenbordgebruikers de mogelijkheid om binnen een pagina sneller te navigeren door onderdelen te kunnen overslaan.

2.4.3 Focus volgorde

Wanneer een toetsenbordgebruiker binnen de webpagina navigeert, bijvoorbeeld met de Tab-toets, moet de tabvolgorde logisch en voorspelbaar zijn.

2.4.7 Focus zichtbaar

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Dit kan bijvoorbeeld door het gebruik van een focusring (outline).

2.5.1 Aanwijzergebaren

Acties waarbij je ingewikkelde aanwijsgebaren moet gebruiken, kunnen ook op een eenvoudige manier.

2.5.3 Label in Naam

De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.

2.5.4 Bewegingsactivering

Acties waarbij men een apparaat of zichzelf moeten bewegen, werken ook zonder die beweging. De mogelijkheid om te bewegen is ook uit te schakelen.

2.5.8 Grootte van het aanwijsgebied (minimum)

Zorg ervoor dat de aanwijsbare elementen op een pagina groot genoeg zijn om makkelijk aan te wijzen met bijvoorbeeld een muis of vinger. Hierbij geldt dat het aan te wijzen gebied ten minste 24 bij 24 pixels groot is.

3.1.1 Taal van de pagina

Geef de menselijke taal waarin de tekst van een webpagina is geschreven aan. Dit kan door in het html-element het attribuut ‘lang’ mee te geven.

3.1.2 Taal van onderdelen

Als je pagina tekst bevat in een andere taal dan de hoofdtaal, geef dit dan aan. Dit kan door in het html-element waarbinnen de tekst staat het attribuut ‘lang’ mee te geven.

3.2.1 Bij focus

Maak functionaliteit voorspelbaar en daardoor goed te begrijpen. Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

3.2.2 Bij input

Verras een gebruiker niet, maar maak functionaliteit voorspelbaar en daardoor goed te begrijpen. Als een gebruiker een formuliercomponent of -optie selecteert of een invoerveld invult met het toetsenbord of met de muis, veroorzaakt dit niet automatisch een contextwijziging.

3.3.3 Foutsuggestie

Laat een gebruiker op een toegankelijke manier weten hoe een formulierveld goed in te vullen.

3.3.7 Overbodige invoer

Zorg ervoor dat een gebruiker geen informatie dubbel hoeft in te vullen in een formulier.

4.1.1 Parsen

Zorg dat er geen fouten in de HTML-code zijn.

4.1.2 Naam, rol, waarde

Geef interactieve elementen een toegankelijke naam en een rol. Geef daarnaast, afhankelijk van de functionaliteit, het element een toestand (state), eigenschappen en een waarde mee.

4.1.3 Statusberichten

Je kunt updates met belangrijke informatie met de gebruiker delen via een statusbericht. Zorg er dan voor dat gebruikers die de melding niet zien, deze informatie toch meekrijgen.

Niveau AAA

1.2.9 Louter-geluid (live)

Maak bij een live audio-opname de inhoud ook als uitgeschreven tekst beschikbaar, als live ondertitels of vooraf als tekstdocument.

1.3.6 Identificeer het doel

Maak ten volste gebruik van de mogelijkheden van bijvoorbeeld HTML en ARIA om het doel van onderdelen van een webpagina duidelijk te maken voor software.

1.4.6 Contrast (versterkt)

Maak het contrast van de tekstkleur ten opzichte van de achtergrondkleur hoog, zodat de tekst goed gelezen kan worden door gebruikers die een hoog contrast nodig hebben.

1.4.8 Visuele presentatie

Een gebruiker moet de visuele weergave van tekstblokken zelf kunnen aanpassen om deze beter te kunnen lezen.

2.2.3 Geen timing

Geef geen tijdslimiet voor het uitvoeren van een taak, zoals het invullen van een formulier of het lezen van de tekst in een carrousel.

2.2.4 Onderbrekingen

Stel onderbrekingen uit of zorg ervoor dat de gebruiker onderbrekingen kan uitzetten, behalve in noodsituaties.

2.2.5 Herauthentisering

Zorg ervoor dat er als een geauthentiseerde sessie verloopt, de gebruiker de activiteit zonder gegevensverlies kan voortzetten na opnieuw authentiseren.

2.2.6 Time-outs

Waarschuw de gebruiker vooraf dat gegevens verloren kunnen gaan, als deze wordt uitgelogd vanwege inactiviteit op de website. Behalve wanneer deze gegevens meer dan 20 uur bewaard worden.

2.3.2 Drie flitsen

Zorg ervoor dat de website geen onderdelen bevat met meer dan drie flitsen binnen één seconde.

2.4.8 Locatie

Laat gebruikers weten waar ze zich precies bevinden binnen een website.

2.4.13 Focusweergave

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Het moet duidelijk te zien zijn waar de toetsenbordfocus zich bevindt.

2.5.6 Input gelijktijdige invoermechanismen

Geef een gebruiker de mogelijkheid om de website of app te gebruiken met alle beschikbare invoermanieren die op hun platform beschikbaar zijn. Behalve wanneer een bepaalde manier van invoeren essentieel of vereist is.

3.1.3 Ongebruikelijke woorden

Voeg uitleg toe over ongebruikelijke woorden of zinsdelen en over woorden die op een ongebruikelijke manier worden gebruikt. Dit geldt ook voor vakjargon en uitdrukkingen die niet letterlijk kunnen worden begrepen zoals idioom en spreekwoorden.

3.1.4 Afkortingen

Leg afkortingen uit. Zo help je alle gebruikers die de afkorting niet kennen.

3.1.5 Leesniveau

Zorg ervoor dat teksten begrijpelijk zijn voor een lezer uit de tweede klas van het middelbaar onderwijs. Als de tekst moeilijker is, bied dan ook een eenvoudig leesbare versie van de tekst aan als alternatief.

3.1.6 Uitspraak

Als de betekenis van de woorden in de context dubbelzinnig is zonder kennis van de uitspraak, geef dan aan hoe deze woorden uitgesproken worden.

3.2.5 Verandering op verzoek

Geef gebruikers volledige controle over veranderingen in de content. Of bied de mogelijkheid automatische veranderingen uit te zetten.

3.3.5 Hulp

Help fouten te voorkomen. Bied de gebruiker zo goed mogelijk hulp aan bij de taak waar deze mee bezig is.

3.3.6 Foutpreventie (alle)

Wanneer een gebruiker een formulier invult zorg er dan voor dat gebruiker de ingevulde gegevens kan controleren en corrigeren.

3.3.9 Toegankelijke authenticatie (uitgebreid)

Maak inloggen makkelijk. Zorg dat inloggen niet afhankelijk is van een cognitieve functietest. Dus vermijd het onthouden van een wachtwoord, herkennen van afbeeldingen of van vervormde letters in CAPTCHA's.

Help richtlijnen verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.