Ga naar hoofdinhoud

Home

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.
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-2022 Op 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").
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
2.3 Toevallen en fysieke reacties
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
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

Sample met getoetste webpagina's

  1. Voorpagina - https://nldesignsystem.nl/
  2. Documentatie - https://nldesignsystem.nl/documentatie
  3. Richtlijnen - https://nldesignsystem.nl/richtlijnen
  4. Formulierenoverzicht - https://nldesignsystem.nl/richtlijnen/formulieren/overzicht
  5. Toegankelijkheid - https://nldesignsystem.nl/richtlijnen/formulieren/toegankelijk
  6. Componenten - https://nldesignsystem.nl/componenten/)
  7. Onderzoek - https://nldesignsystem.nl/onderzoek/
  8. Project - https://nldesignsystem.nl/project
  9. Kernteam - https://nldesignsystem.nl/project/kernteam
  10. Blog - https://nldesignsystem.nl/project/blog
  11. Blogpost - https://nldesignsystem.nl/project/blog/design-systems-week-2023-komt-eraan
  12. Events met Engelse content - https://nldesignsystem.nl/events/design-systems-week-2023/en/overview
  13. Timetable met Engelse content - https://nldesignsystem.nl/events/design-systems-week-2023/en/timetable
  14. 
Met Video - https://nldesignsystem.nl/events/design-systems-week-2023/programma/
  15. Event Heartbeat - (https://nldesignsystem.nl/events/heartbeat
  16. Tijdschema (met tabel) - https://nldesignsystem.nl/events/design-systems-week-2023/tijdschema
  17. 404 pagina - (https://nldesignsystem.nl/asdasdasd
  18. Links - https://nldesignsystem.nl/project/links
  19. Toegankelijkheidsverklaring - https://nldesignsystem.nl/toegankelijkheidsverklaring

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG