Introductie WCAG pagina's
De WCAG pagina’s op NL Design System geven praktische uitleg en voorbeelden op basis van de nieuwe WCAG 2.2 specificatie. Het doel is om met deze pagina’s te helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen en veelgemaakte fouten te voorkomen.
Wil je weten waar je volgens de wet aan moet voldoen? Ga dan naar naar de website van DigiToegankelijk: Wat is verplicht?.
Opzet
- Een uitleg.
- Links naar gerelateerde componenten en 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.
WCAG-pagina’s
Niveau A en Niveau AA
WCAG 1.1.1: Niet-tekstuele content
Zorg bij niet-tekstuele content voor een tekstalternatief.
WCAG 1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)
Opnames van geluid en video hebben een alternatief.
WCAG 1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Opgenomen video heeft ondertiteling.
WCAG 1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)
Opgenomen audio en video heeft een transcript of audiodescriptie.
WCAG 1.2.4: Ondertitels voor doven en slechthorenden (live)
Voor alle live audio-streams zijn ondertitels beschikbaar.
WCAG 1.2.5: Audiodescriptie (vooraf opgenomen)
Opgenomen video's hebben audiodescriptie.
WCAG 1.3.1: Info en relaties
Alle gebruikers moeten over dezelfde informatie kunnen beschikken.
WCAG 1.3.2: Betekenisvolle volgorde
Als het belangrijk is dat de inhoud van een pagina in een bepaalde volgorde wordt gelezen, moet hulpsoftware die volgorde ook kunnen volgen.
WCAG 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.
WCAG 1.3.4: Weergavestand
Een website is staand en liggend gelijkwaardig.
WCAG 1.3.5: Identificeer het doel van de input
Zorg dat de browser kan begrijpen wat een gebruiker moet invoeren, zodat die kan helpen en het makkelijker kan maken.
WCAG 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.
WCAG 1.4.2: Geluidsbediening
Geluiden moet je kunnen pauzeren, stoppen of dempen.
WCAG 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.
WCAG 1.4.4: Herschalen van tekst
Tekst moet twee keer zo groot kunnen zijn.
WCAG 1.4.5: Afbeeldingen van tekst
Laat tekst buiten afbeeldingen.
WCAG 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.
WCAG 1.4.11: Contrast van niet-tekstuele content
Het contrast van essentiele onderdelen van componenten en de directe omgeving moet sterk genoeg zijn, zodat de onderdelen herkenbaar zijn.
WCAG 1.4.12: Tekstafstand
Tekst is door bezoekers aan te passen.
WCAG 1.4.13: Content bij hover of focus
Maak tijdelijke inhoud voorspelbaar.
WCAG 2.1.1: Toetsenbord
Elke actie is uit te voeren met een toetsenbord.
WCAG 2.1.2: Geen toetsenbordval
Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.
WCAG 2.1.4: Enkel teken sneltoetsen
Bied geen sneltoetsen aan die bestaan uit één teken.
WCAG 2.2.1: Timing aanpasbaar
Tijdslimieten zijn aan te passen.
WCAG 2.2.2: Pauzeren, stoppen, verbergen
Beweging mag niet storen.
WCAG 2.3.1: Drie flitsen of beneden drempelwaarde
Maximaal drie flitsen in een seconde.
WCAG 2.4.1: Blokken omzeilen
Geef toetsenbordgebruikers de mogelijkheid om binnen een pagina sneller te navigeren door onderdelen te kunnen overslaan.
WCAG 2.4.2: Paginatitel
Webpagina's hebben titels die het onderwerp of doel beschrijven.
WCAG 2.4.3: Focus volgorde
Wanneer een toetsenbordgebruiker binnen de webpagina navigeert, bijvoorbeeld met de Tab-toets, moet de tabvolgorde logisch en voorspelbaar zijn.
WCAG 2.4.4: Linkdoel (in context)
De linktekst vertelt aan de gebruiker waar de link naar toe gaat (het linkdoel).
WCAG 2.4.5: Meerdere manieren
Een webpagina is op meerdere manieren te vinden.
WCAG 2.4.6: Koppen en labels
Koppen en labels beschrijven het onderwerp of het doel.
WCAG 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).
WCAG 2.4.11: Focus niet bedekt (minimum)
Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.
WCAG 2.5.1: Aanwijzergebaren
Acties waarbij je ingewikkelde aanwijsgebaren moet gebruiken, kunnen ook op een eenvoudige manier.
WCAG 2.5.2: Aanwijzerannulering
Het annuleren van acties die je met een aanwijzer uitvoert is voorspelbaar.
WCAG 2.5.3: Label in Naam
De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.
WCAG 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.
WCAG 2.5.7: Sleepbewegingen
Acties waarbij men moet slepen, kunnen ook zonder slepen.
WCAG 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.
WCAG 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.
WCAG 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.
WCAG 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.
WCAG 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.
WCAG 3.2.3: Consistente navigatie
Delen van de navigatie staan overal in dezelfde volgorde.
WCAG 3.2.4: Consistente identificatie
Onderdelen die hetzelfde doen moeten ook hetzelfde te herkennen zijn.
WCAG 3.2.6: Consistente hulp
Hulp moet op elke pagina binnen de website op dezelfde plek terugkomen.
WCAG 3.3.1: Foutidentificatie
Laat een gebruiker weten als er fouten zijn bij het invullen van een formulier.
WCAG 3.3.2: Labels of instructies
Geef invoervelden een label of uitleg.
WCAG 3.3.3: Foutsuggestie
Laat een gebruiker op een toegankelijke manier weten hoe een formulierveld goed in te vullen.
WCAG 3.3.4: Foutpreventie (wettelijk, financieel, gegevens)
Wanneer een gebruiker een formulier invult met juridische, financiële of persoonlijke gegevens, zorg er dan voor dat gebruiker de ingevulde gegevens kan controleren en corrigeren.
WCAG 3.3.7: Overbodige invoer
Zorg ervoor dat een gebruiker geen informatie dubbel hoeft in te vullen in een formulier.
WCAG 3.3.8: Toegankelijke authenticatie (minimum)
Zorg dat inloggen niet afhankelijk is van een cognitieve functietest, zoals het onthouden van een wachtwoord.
WCAG 4.1.1: Parsen
Zorg dat er geen fouten in de HTML-code zijn.
WCAG 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.
WCAG 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
WCAG 1.2.6: Gebarentaal (vooraf opgenomen)
Voeg gebarentaal toe aan een vooraf opgenomen video met gesproken woord.
WCAG 1.2.7: Verlengde audiodescriptie (vooraf opgenomen)
Is er te weinig tijd om audiodescriptie uit te spreken, voeg dan een verlengde audiodescriptie toe. Deze pauzeert de video zodat er tijd is om de aanvullende informatie toe te voegen.
WCAG 1.2.8: Media-alternatief (vooraf opgenomen)
Voeg bij opgenomen video's de inhoud ook als uitgeschreven tekst toe.
WCAG 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.
WCAG 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.
WCAG 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.
WCAG 1.4.7: Weinig of geen achtergrondgeluid
Zorg ervoor dat opgenomen en uitgesproken tekst te verstaan is en niet gehinderd wordt door achtergrondgeluid.
WCAG 1.4.8: Visuele presentatie
Een gebruiker moet de visuele weergave van tekstblokken zelf kunnen aanpassen om deze beter te kunnen lezen.
WCAG 1.4.9: Afbeeldingen van tekst (geen uitzondering)
Gebruik geen afbeelding voor tekstweergave, behalve als het echt niet anders kan.
WCAG 2.1.3: Toetsenbord (geen uitzondering)
Zorg dat alle functionaliteit met een toetsenbord te bedienen is. Hier gelden geen uitzonderingen.
WCAG 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.
WCAG 2.2.4: Onderbrekingen
Stel onderbrekingen uit of zorg ervoor dat de gebruiker onderbrekingen kan uitzetten, behalve in noodsituaties.
WCAG 2.2.5: Herauthentisering
Zorg ervoor dat er als een geauthentiseerde sessie verloopt, de gebruiker de activiteit zonder gegevensverlies kan voortzetten na opnieuw authentiseren.
WCAG 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.
WCAG 2.3.2: Drie flitsen
Zorg ervoor dat de website geen onderdelen bevat met meer dan drie flitsen binnen één seconde.
WCAG 2.3.3: Animatie uit interacties
Zorg ervoor dat de gebruiker beweging en animatie uit kan zetten.
WCAG 2.4.8: Locatie
Laat gebruikers weten waar ze zich precies bevinden binnen een website.
WCAG 2.4.9: Linkdoel (alleen link)
Maak duidelijk waar een link naartoe gaat. Zorg dat de linktekst op zichzelf het doel duidelijk beschrijft.
WCAG 2.4.10: Paragraafkoppen
Gebruik paragraafkoppen (kopjes) om de content te structureren.
WCAG 2.4.12: Focus niet bedekt (uitgebreid)
Zorg ervoor dat een element dat de toetsenbordfocus heeft volledig zichtbaar is en niet bedekt is door andere inhoud.
WCAG 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.
WCAG 2.5.5: Grootte van het aanwijsgebied (uitgebreid)
Maak het aanwijsgebied van buttons, links en formuliervelden groot genoeg, zodat het makkelijker is om deze te selecteren.
WCAG 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.
WCAG 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.
WCAG 3.1.4: Afkortingen
Leg afkortingen uit. Zo help je alle gebruikers die de afkorting niet kennen.
WCAG 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.
WCAG 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.
WCAG 3.2.5: Verandering op verzoek
Geef gebruikers volledige controle over veranderingen in de content. Of bied de mogelijkheid automatische veranderingen uit te zetten.
WCAG 3.3.5: Hulp
Help fouten te voorkomen. Bied de gebruiker zo goed mogelijk hulp aan bij de taak waar deze mee bezig is.
WCAG 3.3.6: Foutpreventie (alle)
Wanneer een gebruiker een formulier invult zorg er dan voor dat gebruiker de ingevulde gegevens kan controleren en corrigeren.
WCAG 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.