Introductie WCAG-pagina's

Practische uitleg en voorbeelden

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

Waarneembaar

• 1.1.1 Niet-tekstuele content
• 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
• 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
• 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
• 1.2.4 Ondertitels voor doven en slechthorenden (live)
• 1.2.5 Audiodescriptie (vooraf opgenomen)
• 1.2.6 Gebarentaal (vooraf opgenomen)
• 1.2.7 Verlengde audiodescriptie (vooraf opgenomen)
• 1.2.8 Media-alternatief (vooraf opgenomen)
• 1.2.9 Louter-geluid (live)
• 1.3.1 Info en relaties
• 1.3.2 Betekenisvolle volgorde
• 1.3.3 Zintuiglijke eigenschappen
• 1.3.4 Weergavestand
• 1.3.5 Identificeer het doel van de input
• 1.3.6 Identificeer het doel
• 1.4.1 Gebruik van kleur
• 1.4.2 Geluidsbediening
• 1.4.3 Contrast (minimum)
• 1.4.4 Herschalen van tekst
• 1.4.5 Afbeeldingen van tekst
• 1.4.6 Contrast (versterkt)
• 1.4.7 Weinig of geen achtergrondgeluid
• 1.4.8 Visuele weergave
• 1.4.9 Afbeeldingen van tekst (geen uitzondering)
• 1.4.10 Reflow
• 1.4.11 Contrast van niet-tekstuele content
• 1.4.12 Tekstafstand
• 1.4.13 Content bij hover of focus

Bedienbaar

• 2.1.1 Toetsenbord
• 2.1.2 Geen toetsenbordval
• 2.1.3 Toetsenbord (geen uitzondering)
• 2.1.4 Enkel teken sneltoetsen
• 2.2.1 Timing aanpasbaar
• 2.2.2 Pauzeren, stoppen, verbergen
• 2.2.3 Geen timing
• 2.2.4 Onderbrekingen
• 2.2.5 Herauthentisering
• 2.2.6 Time-outs
• 2.3.1 Drie flitsen of beneden drempelwaarde
• 2.3.2 Drie flitsen
• 2.3.3 Animatie uit interacties
• 2.4.1 Blokken omzeilen
• 2.4.2 Paginatitel
• 2.4.3 Focus volgorde
• 2.4.4 Linkdoel (in context)
• 2.4.5 Meerdere manieren
• 2.4.6 Koppen en labels
• 2.4.7 Focus zichtbaar
• 2.4.8 Locatie
• 2.4.9 Linkdoel (alleen link)
• 2.4.10 Paragraafkoppen
• 2.4.11 Focus niet bedekt (minimum)
• 2.4.13 Focusweergave
• 2.5.1 Aanwijzergebaren
• 2.5.2 Aanwijzerannulering
• 2.5.3 Label in naam
• 2.5.4 Bewegingsactivering
• 2.5.5 Grootte van het aanwijsgebied
• 2.5.6 Input gelijktijdige invoermechanismen
• 2.5.7 Sleepbewegingen
• 2.5.8 Grootte van het aanwijsgebied (minimum)

Begrijpelijk

• 3.1.1 Taal van de pagina
• 3.1.2 Taal van onderdelen
• 3.1.3 Ongebruikelijke woorden
• 3.1.4 Afkortingen
• 3.1.5 Leesniveau
• 3.1.6 Uitspraak
• 3.2.1 Bij focus
• 3.2.2 Bij input
• 3.2.3 Consistente navigatie
• 3.2.4 Consistente identificatie
• 3.2.5 Verandering op verzoek
• 3.2.6 Consistente hulp
• 3.3.1 Foutidentificatie
• 3.3.2 Labels of instructies
• 3.3.3 Foutsuggestie
• 3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
• 3.3.5 Hulp
• 3.3.6 Foutpreventie (alle)
• 3.3.7 Overbodige invoer
• 3.3.8 Toegankelijke authenticatie (minimum)
• 3.3.9 Toegankelijke authenticatie (uitgebreid)

Robuust

• 4.1.1 Parsen
• 4.1.2 Naam, rol, waarde
• 4.1.3 Statusberichten

Help richtlijnen verbeteren

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