Rapport: toegankelijkheid van Verkeersbesluiten

Onderzocht door
Hidde de Vries
In opdracht van
Ask Atticus BV
Methode
WCAG-EM
Conformiteitsdoel
WCAG 2.1, Level A + AA (50 succescriteria) conform EN 301 549
Datum
29 december 2021

Samenvatting

De website verkeersbesluiten-acc.overheid.nl voldoet deels aan de WCAG 2.1 A + AA succescriteria. In dit rapport wordt beschreven van welke criteria deze website nog afwijkt.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 13 uit 17
Begrijpelijk 10 uit 10
Robuust 2 uit 3
Totaal 42 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. Label bij groep opties niet goed geassocieerd (1.3.1)
  2. Pagina's vereisen scrollen in twee richtingen bij zoom (1.4.10)
  3. Footertekst heeft onvoldoende contrast met achtergrond (1.4.3)
  4. Kalender: kan geen datum selecteren met alleen toetsenbord (2.1.1)
  5. Paginatitels beschrijven pagina's niet (2.4.2)
  6. Kalender zit op onlogische plek in tabvolgorde (2.4.3)
  7. Focus state knop “Nieuwe publicatie” is niet te onderscheiden (2.4.7)
  8. Doel kalenderlinks niet vast te stellen (4.1.2)
  9. Zoekveld heeft geen naam (4.1.2)

Label bij groep opties niet goed geassocieerd

label documentstatus met lijst opties met checkboxes ervoor

Probleem

Op de pagina “Uitgebreid zoeken” staan enkele meerkeuzevragen, bijvoorbeeld “Documentstatus”, met daaraan gekoppeld een serie checkboxes met opties. “Documentstatus” is opgemaakt als label en verwijst in het for-attribuut naar het name-attribuut dat de checkboxes delen. In HTML vormt dit geen geldige associatie.

Mogelijke oplossing

Deze elementen zitten samen in een fieldset. Gebruik het legend-element als eerste element binnen de fieldset om deze groep van keuzes te labelen.

WCAG criterium:
1.3.1: Info en relaties (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end ontwikkelaar

Pagina's vereisen scrollen in twee richtingen bij zoom

Probleem

Wanneer de gebruiker inzoomt, bijvoorbeeld 150%, past de inhoud van de pagina op een gegeven moment niet meer in het scherm. De gebruiker moet dan horizontaal en verticaal scrollen.

Mogelijke oplossing

Bouw de pagina responsive, en zorg dat content bij onvoldoende ruimte in de breedte onder elkaar wordt getoond, zodat er geen dubbele scrollbars nodig zijn.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end ontwikkelaar

Footertekst heeft onvoldoende contrast met achtergrond

footertekst met contrast-aanduiding 3.24

Probleem

Onderin elke pagina staat een blauwe tekst op een grijze achtergrond. Tussen voorgrond en achtergrond zit onvoldoende contrast, namelijk 3.24 : 1. Dit zou 4.5 : 1 moeten zijn.

Mogelijke oplossing

Gebruik een contrastchecker en zorg dat er een contrast van minimaal 4.5 : 1 is tussen voor- en achtergrondkleur.

Herhaling

Er zijn ook kleurcontrastproblemen bij:

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end ontwikkelaar / ontwerper

Kalender: kan geen datum selecteren met alleen toetsenbord

uitgeklapte kalender

Probleem

Op de pagina “Uitgebreid zoeken” is het bij sommige velden mogelijk een datum te kiezen met behulp van een kalender. Het is hierin mogelijk de maand en het jaar te selecteren met alleen het toetsenbord, maar niet de individuele dagen.

Dit komt doordat ze zijn opgemaakt als links zonder href-attribuut, die zijn niet toegankelijk met alleen het toetsenbord.

Mogelijke oplossing

Gebruik voor elk van de opties het button-element, want het zijn in feite knoppen, omdat ze nergens naartoe linken. Het button-element is toetsenbordtoegankelijk en heeft de juiste semantiek.

Mocht dit heel lastig zijn is de toetsenbordtoegankelijkheid ook toe te voegen door het href-attribuut toe te voegen aan de links (bijvoorbeeld href=""). Voeg dan ook role="button" toe, om ook de juiste semantiek toe te wijzen.

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end ontwikkelaar

Paginatitels beschrijven pagina's niet

Probleem

Elke pagina heeft als titel “DRP”. Dit is geen goede beschrijving van het onderwerp of doel van de pagina.

Mogelijke oplossing

Beschrijf elke pagina in het title element. Begin in de beschrijving liefst met het meest specifieke en eindig met het meest generieke, bijvoorbeeld “Nieuwe publicatie - Verkeersbesluiten - overheid.nl”.

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

Kalender zit op onlogische plek in tabvolgorde

twee velden voor een datum, van en naar, met na elk veld een kalendericoon

Probleem

Op de pagina “Uitgebreid zoeken” is het bij sommige velden mogelijk een datum te kiezen met behulp van een kalender. Er staat hiervoor een kalendericoon naast de betreffende invoervelden.

Wie de kalender opent met het toetsenbord en vervolgens verder TABt, komt niet terecht in de kalender, zoals waarschijnlijk verwacht, maar in het volgende veld. Pas na lang tabben komt de focus uiteindelijk in de kalender terecht. Dit komt omdat de kalender onderaan in de broncode staat.

Mogelijke oplossing

Plaats de kalender vlak na het kalendericoon in de broncode, zodat de inhoud van de kalender gelijk erna in de tabvolgorde komt.

WCAG criterium:
2.4.3: Focus volgorde (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end ontwikkelaar

Focus state knop “Nieuwe publicatie” is niet te onderscheiden

knop nieuwe publicatie

Probleem

Wanneer de knop “Nieuwe publicatie” focus heeft, is dit in Firefox niet te onderscheiden van “geen focus”.

Mogelijke oplossing

Voeg een duidelijke focusaanduiding toe wanneer deze link focus heeft door met CSS op :focus te stylen.

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
nieuwe-publicatie
Verantwoordelijkheid:
Front-end ontwikkelaar

twee velden voor een datum, van en naar, met na elk veld een kalendericoon

Probleem

Op de pagina “Uitgebreid zoeken” is het bij sommige velden mogelijk een datum te kiezen met behulp van een kalender. Er staat hiervoor een kalendericoon naast de betreffende invoervelden. Dit icoon is een knop en is als volgt opgemaakt:

Het doel van de link is niet vast te stellen op basis van de inhoud (want die is leeg), en ook niet op basis van de context.

Mogelijke oplossing

Voeg tekst toe binnen de link om aan te duiden waar de link naartoe leidt.

Beter zou zijn om voor deze knoppen een button-element te gebruiken. Zorg ook dan dat er tekst in de button staat, of een aria-label is gebruikt, zodat de knop een naam heeft.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
uitgebreid-zoeken
Verantwoordelijkheid:
Front-end ontwikkelaar

Zoekveld heeft geen naam

zoekveld met tekst vul een zoekterm in

Probleem

Linksboven in de pagina staat een zoekveld met daarin de tekst ‘Vul een zoekterm in’. Dit veld heeft geen “toegankelijke naam”, waardoor het veld niet goed te gebruiken is voor gebruikers van hulpsoftware.

Mogelijke oplossing

Voeg een label toe, bijvoorbeeld door:

Een geschikt label zou kunnen zijn: “zoekterm”.

Herhaling

Op de pagina “Nieuwe publicatie” zit er geen label gekoppeld aan het veld “Maak een keuze” bij “Type publicatie”.

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