Rapport: toegankelijkheid van Oproepingen applicatie

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
29 januari 2022

Samenvatting

De website KIWI voldoet grotendeels aan de WCAG 2.1 A + AA succescriteria en heeft een sterke basis van semantische HTML. Het grootste deel van de issues is eenvoudig op te lossen, een klein deel is iets complexer.

Resultaat per principe

Principe Resultaten per principe
Waarneembaar 17 uit 20
Bedienbaar 15 uit 17
Begrijpelijk 10 uit 10
Robuust 2 uit 3
Totaal 44 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. Knop om kalender te openen is niet opgemaakt als knop (1.3.1)
  2. Lijst zoekresultaten is niet opgemaakt als lijst (1.3.1)
  3. Scrollen in twee richtingen bij 400% zoom (1.4.10)
  4. Tekst in footer heeft onvoldoende contrast met achtergrondkleur (1.4.3)
  5. Knoppen in teksteditor niet bereikbaar met toetsenbord (2.1.1)
  6. Paginatitel beschrijft doel pagina's niet (2.4.2)
  7. Knop om kalender te openen heeft geen inhoud (4.1.2)
  8. Zoekveld heeft geen label (4.1.2)

Knop om kalender te openen is niet opgemaakt als knop

Veld laatste status wijziging, met bij van en tot en met velden een knop voor het openen van een kalender

Probleem

In sommige formulieren staat bij datumvelden een kalendericoon. Dat kan worden gebruikt om een kalender te openen. De knop is opgemaakt als a-element (link), terwijl het eigenlijk een knop is. Links navigeren, knops voeren een actie uit; hier is sprake van dat laatste.

Mogelijke oplossing

Gebruik een button-element voor de knop om een kalender te openen.

Herhaling

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

Lijst zoekresultaten is niet opgemaakt als lijst

Zoekresultaat, tekst er zijn 38 documenten, lijst met resultaten

Probleem

Na een zoekopdracht krijgt de gebruiker een lijst van zoekresultaten te zien. Deze lijst is opgemaakt met div- en span-elementen. Dit geeft onvoldoende hun samenhang weer.

Mogelijke oplossing

Gebruik een ul- of ol-element met daarin voor elk resultaat een li-element.

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

Scrollen in twee richtingen bij 400% zoom

screenshot browser met 400% zoom, groot deel van interface is afgekapt

Probleem

Wie 400% inzoomt moet zowel horizontaal als verticaal scrollen. Daardoor is het voor mensen met slecht zicht moeilijk om de informatie tot zich te nemen.

Mogelijke oplossing

Bouw de pagina's responsive, zorg dat inhoud die niet naast elkaar past onder elkaar verschijnt.

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

blauwe tekst op lichtblauwe achtergrond

Probleem

De tekst in de footer, blauw op grijsblauw, heeft onvoldoende contrast met de achtergrond: 3.24 : 1. Dit zou minimaal 4.5 : 1 moeten zijn.

Mogelijke oplossing

Kies twee kleuren die minimaal een contrast van 4.5 : 1 hebben.

Herhaling

Dit probleem is ook geconstateerd bij:

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

Knoppen in teksteditor niet bereikbaar met toetsenbord

aantal knoppen op een rij, zoals opslaan, knippen, plakken, verwijderen

Probleem

Wanneer een nieuwe publicatie wordt aangemaakt, verschijnt een teksteditor. De knoppen die in deze editor functies als knippen, plakken en lijsten toevoegen zijn niet toegankelijk met het toetsenbord.

Mogelijke oplossing

Zorg dat de knoppen met toetsenbord werken, bijvoorbeeld door button-elementen te gebruiken, die werken standaard met het toetsenbord. Zorg ook dat er focusstijlen aanwezig zijn, zodat een toetsenbordgebruiker weet waar hij of zij op zeker moment is.

WCAG criterium:
2.1.1: Toetsenbord (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end / design

Paginatitel beschrijft doel pagina's niet

Probleem

De pagina's hebben een title-element om de pagina te beschrijven, maar de inhoud van dit element is op elke pagina “DRP”. Die tekst beschrijft het doel van de pagina's niet.

Mogelijke oplossing

Gebruik op elke pagina een unieke tekst voor de title, bijvoorbeeld “Groep werkvoorraad - Oproepingen”, “Nieuwe publicatie - Oproepingen. Het is aan te raden het meest algemene deel, Oproepingen, als laatste te zetten, en het meest specifieke, zoals de naam van de pagina, als eerste.

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

Knop om kalender te openen heeft geen inhoud

Veld laatste status wijziging, met bij van en tot en met velden een knop voor het openen van een kalender

Probleem

In de Uitgebreid Zoeken pagina staat bij datumvelden een kalendericoon. Dat kan worden gebruikt om een kalender te openen. Dit veld is opgemaakt als link zonder tekst:

<a 
class="calendarbutton"
target="[object HTMLInputElement]"
href="#">

</a>

Zonder tekst heeft de link geen naam.

Mogelijke oplossing

Voeg tekst toe aan de link, bijvoorbeeld “Toon kalender”.

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

Zoekveld heeft geen label

zoekveld heeft geen label

Probleem

Op elke pagina staat linksboven een zoekveld. Aan dit veld is geen label-element gekoppeld, waardoor het geen toegankelijke naam heeft. Het is daardoor niet makkelijk bruikbaar voor hulptechnologieën. Een gebruiker van een schermlezer zal bijvoorbeeld minder makkelijk kunnen achterhalen waar het veld voor is.

Mogelijke oplossing

Voeg een label-element toe, met een for-attribuut dat verwijst naar het id van het zoekveld, bijvoorbeeld:

<label for="zoeken">zoekterm</label>
<input id="zoeken">
WCAG criterium:
4.1.2: Naam, rol, waarde (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end