Audit toegankelijkheid NLDesignSystem.nl versie 1.0

Dit is het WCAG EM Auditrapport van NLDesignSystem.nl.

Gerelateerd: toegankelijkheidsverklaring NLDesignSystem.nl.

Over deze evaluatie

Rapport auteur: Rian Rietveld en Hidde de Vries
Evaluatie opdrachtgever: NL Design System
Evaluatiedatum: 20 november 2023

Managementsamenvatting

Het menu in desktop en mobiele weergave heeft problemen met de toetsenbordnavigatie, resize en reflow. Dit is de meest ingrijpende aanpassing die moet gebeuren. Daarnaast moet er een goede responsive weergave voor tabellen komen. De overige afkeuringen zijn makkelijker op te lossen.

Scope van de evaluatie

Website naam: NL Design System
Scope van de website: Alle webcontent van de publieke website van het NL Design System op nldesignsystem.nl
WCAG Versie: 2.1
Conformiteitsdoel: AA
Basisniveau van toegankelijkheid-ondersteuning: Safari 14 met VoiceOver, Chrome Version 119.0.6045.123 (Official Build) (arm64), FireFox 119.0.1 (64-bit), iOS 16.7.2
Verdere onderzoeksvereisten: In dit rapport worden alleen de gevonden problemen vermeld en geen oplossingen geboden.

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 50 van 50 WCAG 2.1 AA Success Criteria.

24 Voldoende
11 Onvoldoende
0 Onbekend
15 Niet van toepassing
0 Niet getoetst

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven

Success Criterium	Uitkomst	Bevindingen
1.1.1: Niet-tekstuele content	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Pagina: https://nldesignsystem.nl/project/kernteam De SVG’s met de afbeeldingen van de teamleden hebben geen alternatief.

Success Criterium

Uitkomst

Bevindingen

1.1.1: Niet-tekstuele content

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Pagina: https://nldesignsystem.nl/project/kernteam

De SVG’s met de afbeeldingen van de teamleden hebben geen alternatief.

1.2 Op tijd gebaseerde media

Success Criterium	Uitkomst	Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Pagina: https://nldesignsystem.nl/events/heartbeat Vimeo video's hebben geen ondertiteling.
1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Pagina: https://nldesignsystem.nl/events/heartbeat Vimeo video's hebben geen ondertiteling.
1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)	Hele sample Uitkomst: Niet van toepassing
1.2.4: Ondertitels voor doven en slechthorenden (live)	Hele sample Uitkomst: Niet van toepassing
1.2.5: Audiodescriptie (vooraf opgenomen)	Hele sample Uitkomst: Niet van toepassing

1.3 Aanpasbaar

Success Criterium	Uitkomst	Bevindingen
1.3.1: Info en relaties	Hele sample Uitkomst: Voldoende
1.3.2: Betekenisvolle volgorde	Hele sample Uitkomst: Voldoende
1.3.3: Zintuiglijke eigenschappen	Hele sample Uitkomst: Voldoende
1.3.4: Weergavestand	Hele sample Uitkomst: Voldoende
1.3.5: Identificeer het doel van de input	Hele sample Uitkomst: Voldoende

1.4 Onderscheidbaar

Success Criterium	Uitkomst	Bevindingen
1.4.1: Gebruik van kleur	Hele sample Uitkomst: Voldoende
1.4.2: Geluidsbediening	Hele sample Uitkomst: Niet van toepassing
1.4.3: Contrast (minimum)	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Zoekoptie in de menubalk. De tekst en de placeholder in het zoek-modal hebben te weinig contrast.
1.4.4: Herschalen van tekst	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: In het menu op alle pagina’s. Het menu hakt af bij schalen naar 200% alleen tekst.
1.4.5: Afbeeldingen van tekst	Hele sample Uitkomst: Niet van toepassing
1.4.10: Reflow	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Pagina https://nldesignsystem.nl/events/design-systems-week-2023/tijdschema/. Tabellen op Tijdschema \| NL Design System hakken af bij een kleiner scherm. En er is geen horizontale scrollbar (zou kunnen bij tabel). Pagina https://nldesignsystem.nl/events/design-systems-week-2022Op Design Systems Week 2022 valt het submenu links over de tekst bij een kleiner beeldscherm.
1.4.11: Contrast van niet-tekstuele content	Hele sample Uitkomst: Voldoende
1.4.12: Tekstafstand	Hele sample Uitkomst: Voldoende
1.4.13: Content bij hover of focus	Hele sample Uitkomst: Voldoende

2 Bedienbaar

2.1 Toetsenbordtoegankelijk

Success Criterium	Uitkomst	Bevindingen
2.1.1: Toetsenbord	Hele sample Uitkomst: Voldoende
2.1.2: Geen toetsenbordval	Hele sample Uitkomst: Voldoende
2.1.4: Enkel teken sneltoetsen	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: Pagina: https://nldesignsystem.nl/events/heartbeat Keyboard shortcuts zijn niet disabled voor de Vimeo player (Disable shortcuts voor vimeo video, keyboard="false").

Success Criterium

Uitkomst

Bevindingen

2.1.1: Toetsenbord

Hele sample

Uitkomst: Voldoende

2.1.2: Geen toetsenbordval

Hele sample

Uitkomst: Voldoende

2.1.4: Enkel teken sneltoetsen

Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Pagina: https://nldesignsystem.nl/events/heartbeat

Keyboard shortcuts zijn niet disabled voor de Vimeo player (Disable shortcuts voor vimeo video, keyboard="false").

2.2 Genoeg tijd

Success Criterium	Uitkomst	Bevindingen
2.2.1: Timing aanpasbaar	Hele sample Uitkomst: Niet van toepassing
2.2.2: Pauzeren, stoppen, verbergen	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

2.2.1: Timing aanpasbaar

Hele sample

Uitkomst: Niet van toepassing

2.2.2: Pauzeren, stoppen, verbergen

Hele sample

Uitkomst: Niet van toepassing

2.3 Toevallen en fysieke reacties

Success Criterium	Uitkomst	Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

2.3.1: Drie flitsen of beneden drempelwaarde

Hele sample

Uitkomst: Niet van toepassing

2.4 Navigeerbaar

Success Criterium	Uitkomst	Bevindingen
2.4.1: Blokken omzeilen	Hele sample Uitkomst: Voldoende
2.4.2: Paginatitel	Hele sample Uitkomst: Voldoende
2.4.3: Focus volgorde	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: In het menu op alle pagina’s. De toetsenbordfocus komt op onzichtbare items bij het mobiele menu waardoor de volgorde anders is dan de zichtbare volgorde.
2.4.4: Linkdoel (in context)	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: In het logo in de header op alle pagina’s. De linktekst op het logo is onduidelijk en verwijst niet naar de voorpagina.
2.4.5: Meerdere manieren	Hele sample Uitkomst: Voldoende
2.4.6: Koppen en labels	Hele sample Uitkomst: Voldoende
2.4.7: Focus zichtbaar	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: In het menu op alle pagina’s. Wanneer navigatie kleine schermen “open” staat is focus soms onzichtbaar (want mogelijk om buiten navigatie te tabben).

2.5 Input Modaliteiten

Success Criterium	Uitkomst	Bevindingen
2.5.1: Aanwijzergebaren	Hele sample Uitkomst: Niet van toepassing
2.5.2: Aanwijzerannulering	Hele sample Uitkomst: Niet van toepassing
2.5.3: Label in naam	Hele sample Uitkomst: Onvoldoende	Hele sample Bevindingen: In het menu op alle pagina’s. Het label van de menuknop komt niet overeen met de visuele tekst.
2.5.4: Bewegingsactivering	Hele sample Uitkomst: Niet van toepassing

3 Begrijpelijk

3.1 Leesbaar

Success Criterium	Uitkomst	Bevindingen
3.1.1: Taal van de pagina	Hele sample Uitkomst: Voldoende
3.1.2: Taal van onderdelen	Hele sample Uitkomst: Voldoende

Success Criterium

Uitkomst

Bevindingen

3.1.1: Taal van de pagina

Hele sample

Uitkomst: Voldoende

3.1.2: Taal van onderdelen

Hele sample

Uitkomst: Voldoende

3.2 Voorspelbaar

Success Criterium	Uitkomst	Bevindingen
3.2.1: Bij focus	Hele sample Uitkomst: Voldoende
3.2.2: Bij input	Hele sample Uitkomst: Voldoende
3.2.3: Consistente navigatie	Hele sample Uitkomst: Voldoende
3.2.4: Consistente identificatie	Hele sample Uitkomst: Voldoende

3.3 Assistentie bij invoer

Success Criterium	Uitkomst	Bevindingen
3.3.1: Foutidentificatie	Hele sample Uitkomst: Niet van toepassing
3.3.2: Labels of instructies	Hele sample Uitkomst: Voldoende
3.3.3: Foutsuggestie	Hele sample Uitkomst: Niet van toepassing
3.3.4: Foutpreventie (wettelijk, financieel, gegevens	Hele sample Uitkomst: Niet van toepassing

4 Robuust

4.1 Compatibel

Success Criterium	Uitkomst	Bevindingen
4.1.1: Parsen	Hele sample Uitkomst: Voldoende
4.1.2: Naam, rol, waarde	Hele sample Uitkomst: Voldoende
4.1.3: Statusberichten	Hele sample Uitkomst: Niet van toepassing

Success Criterium

Uitkomst

Bevindingen

4.1.1: Parsen

Hele sample

Uitkomst: Voldoende

4.1.2: Naam, rol, waarde

Hele sample

Uitkomst: Voldoende

4.1.3: Statusberichten

Hele sample

Uitkomst: Niet van toepassing

Sample met getoetste webpagina's

Voorpagina - https://nldesignsystem.nl/
Meedoen - https://nldesignsystem.nl/meedoen
Richtlijnen - https://nldesignsystem.nl/richtlijnen
Formulierenoverzicht - https://nldesignsystem.nl/richtlijnen/formulieren/overzicht
Toegankelijkheid - https://nldesignsystem.nl/richtlijnen/formulieren/toegankelijk
Componenten - https://nldesignsystem.nl/componenten/)
Onderzoek - https://nldesignsystem.nl/onderzoek/
Project - https://nldesignsystem.nl/project
Kernteam - https://nldesignsystem.nl/project/kernteam
Blog - https://nldesignsystem.nl/project/blog
Blogpost - https://nldesignsystem.nl/project/blog/design-systems-week-2023-komt-eraan
Events met Engelse content - https://nldesignsystem.nl/events/design-systems-week-2023/en/overview
Timetable met Engelse content - https://nldesignsystem.nl/events/design-systems-week-2023/en/timetable
 Met Video - https://nldesignsystem.nl/events/design-systems-week-2023/programma/
Event Heartbeat - (https://nldesignsystem.nl/events/heartbeat
Tijdschema (met tabel) - https://nldesignsystem.nl/events/design-systems-week-2023/tijdschema
404 pagina - (https://nldesignsystem.nl/asdasdasd
Links - https://nldesignsystem.nl/project/links
Toegankelijkheidsverklaring - https://nldesignsystem.nl/toegankelijkheidsverklaring

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG