Rapport: toegankelijkheid van Design System

Onderzocht door
Hidde de Vries
In opdracht van
KOOP
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
13-15 januari 2021

Samenvatting

Het design system voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele kleine bevindingen die eenvoudig kunnen worden opgelost.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 18 uit 20
Bedienbaar 16 uit 17
Begrijpelijk 10 uit 10
Robuust 2 uit 3
Totaal 46 uit 50

Toelichting bij dit rapport

Doel van dit rapport

Met dit rapport krijgt u inzicht in de toegankelijkheid van uw website- of applicatie. We vinden het belangrijk dat onze rapporten niet alleen de problemen beschrijven, maar ook richting geven bij het verbeteren daarvan.

Testproces

Dit rapport is samengesteld met behulp van de WCAG EM methodologie.

Het volgende proces is daarbij gebruikt:

  1. vaststellen wat binnen en buiten scope valt
  2. vaststellen gebruikte technologieën
  3. samenstellen sample (steekproef)
  4. onderzoek van de sample
  5. beschrijven van gevonden issues

Het onderzoek omvat alle 50 eisen uit de Europese toegankelijkheidsnorm EN 301 549 (= de WCAG 2.1 niveau A + AA succescriteria).

Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Firefox Developer Tools.

Kleine letters

Komt voor op

Pagina's

Komt voor op:

Niet in scope:

Ondersteuning

De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:

Gebruikte technologieën

De onderzochte maakt gebruik van de volgende technologieën:

Sample

Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:

Bevindingen

  1. Sommige headings niet opgemaakt als heading (1.3.1)
  2. Focusindicator heeft onvoldoende contrast (1.4.11)
  3. Paginatitels onvoldoende beschrijvend en niet uniek (2.4.2)
  4. CSS-switcher heeft geen naam (4.1.2)

Sommige headings niet opgemaakt als heading

## voorbeeld

Probleem

Op de pagina “Rationale” staan een aantal headings die niet als heading zijn opgemaakt, met de tekst “## Voorbeeld”. Het lijkt erop dat hier iets is misgegaan met het parsen van Markdown.

Mogelijke oplossing

Gebruik voor headings heading-elementen: h1, h2, h3, h4, h5, h6.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
rationale
Verantwoordelijkheid:
Front-end

Focusindicator heeft onvoldoende contrast

link naar 'alert' met gouden outline

Probleem

Er wordt een gele outline gebruikt als focusindicator. Deze heeft onvoldoende contrast op zowel de blauwe achtergrond van de menubalk (2,78 : 1), als op de witte achtergrond (1,78:1).

Mogelijke oplossing

Gebruik voor de focusindicator een kleur die meer contrast heeft met de achtergrond, minimaal 3 : 1.

WCAG criterium:
1.4.11: Contrast van niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end

Paginatitels onvoldoende beschrijvend en niet uniek

Probleem

Elke pagina heeft als titel (title-element) de tekst “Preview”. Die is steeds hetzelfde en dus niet uniek, en beschrijft niet voldoende wat er op de pagina's staat.

Mogelijke oplossing

Gebruik beter beschrijvende titels, bijvoorbeeld “Componenten - KOOP Design System”, “Content - KOOP Design System”, enzovoort.

WCAG criterium:
2.4.2: Paginatitel (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

CSS-switcher heeft geen naam

lege select

Probleem

Onderin de pagina kan de gebruikte CSS worden gekozen. De dropdown hiervoor heeft geen toegankelijke naam.

Mogelijke oplossing

Voeg een label-element toe met een for-attribuut dat verwijst naar het id van de select.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end