Rapport: toegankelijkheid van identifier.overheid.nl

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
7 december 2021

Samenvatting

De website identifier.overheid.nl voldoet grotendeels aan de WCAG 2.1 A + AA succescriteria, maar op een aantal cruciale punten wordt afgeweken:

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 17 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. Logo heeft geen alternatieve tekst (1.1.1)
  2. Scrollbars in twee richtingen als gebruiker inzoomt (1.4.10)
  3. Invoerveld heeft geen naam (1.4.11)
  4. Invoerveld heeft geen naam (4.1.2)

Logo heeft geen alternatieve tekst

logo overheid.nl

Probleem

Bovenin de pagina staat het logo van overheid.nl. Het is niet voorzien van alternatieve tekst, waardoor mensen die voorleessoftware gebruiken niet weten wat de afbeelding doet.

In dit geval zit de afbeelding in een link, waardoor het ook zorgt dat de pagina niet aan “4.1.2 Naam, Rol, Waarde” voldoet. Bij links die als enige content een afbeelding hebben, vormt de alternatieve tekst de “toegankelijke naam” van de link. Zonder alternatieve tekst, heeft de link dus geen naam, waardoor mensen met voorleessoftware of stembediening de link niet goed kunnen gebruiken.

Mogelijke oplossing

Voeg `alt="Homepage, logo overheid.nl” toe als alternatieve tekst. Dan wordt eerst het linkdoel aangeduid, dan de afbeelding beschreven.

WCAG criterium:
1.1.1: Niet-tekstuele content (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end

Scrollbars in twee richtingen als gebruiker inzoomt

Probleem

Als de gebruiker 400% inzoomt zijn zowel horizontaal als verticaal scrollbalken zichtbaar. Dit komt doordat het veld om een URI in te vullen en het stukje tekst ”https://identifier.overheid.nl/“ niet naast elkaar passen als er weinig ruimte is.

Mogelijke oplossing

Zorg dat het stukje “https://identifier.overheid.nl/” en het invoerveld onder elkaar komen wanneer er weinig ruimte is.

WCAG criterium:
1.4.10: Reflow (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
homepage
Verantwoordelijkheid:
Front-end

Invoerveld heeft geen naam

Button URI zoeken met gouden rand

Probleem

Wanneer het veld “URI zoeken” focus heeft, verschijnt een gouden rand. Deze heeft onvoldoende contrast met de achtergrond: 1.52 : 1 (zie Contast Ratio).

Mogelijke oplossing

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

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

Invoerveld heeft geen naam

logo overheid.nl

Probleem

Het invoerveld voor een zoekterm heeft geen naam. Er is wel een label toegevoegd, door een label-element te koppelen aan het input-veld, maar dat label bevat geen tekst, waardoor er geen naam is.

Mogelijke oplossing

Voeg binnen het label-element tekst toe die het invoerveld beschrijft, bijvoorbeeld “zoekterm”.

WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end