Rapport: toegankelijkheid van (PUC) Publicatieplatform UitvoeringsContent

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
16 november 2020

Samenvatting

De website puc.overheid.nl 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 16 uit 20
Bedienbaar 13 uit 17
Begrijpelijk 9 uit 10
Robuust 2 uit 3
Totaal 40 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. Button opgemaakt als link (1.3.1)
  2. Onvoldoende contrast in focusstijl (1.4.11)
  3. Onvoldoende contrast in menu-items (1.4.3)
  4. Sommige content verborgen wanneer gebruiker inzoomt (1.4.4)
  5. Date picker te ver verwijderd van knop (2.4.3)
  6. Sommige headings zijn leeg (2.4.6)
  7. Focus soms niet zichtbaar (2.4.7)
  8. Bij filterknoppen missen de totalen in de naam (2.5.3)
  9. Pagina herlaadt wanneer keuze geldigheid wordt aangepast (3.2.2)
  10. Zoekveld heeft geen label (4.1.2)

knop abonneer mij op dit zoekresultaat

Probleem

De knop “Abonneer mij op dit zoekresultaat” is opgemaakt als link, terwijl die dat semantisch gezien niet is. Er wordt niet genavigeerd naar een nieuwe pagina of een andere sectie van de pagina. Er wordt een overlay geopend.

Mogelijke oplossing

Gebruik een <button>-element in plaats van een <a>-element.

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

Onvoldoende contrast in focusstijl

menu met Home, Zoeken en Collecties, die laatste omlijnd met een dunne, witte stippellijn

Probleem

Veel interactieve elementen, waaronder de links in het hoofdmenu, hebben geen expliciete focusstijl. Daardoor vallen browsers terug op een standaardstijl, en die hebben niet in alle browsers voldoende contrast. In Firefox is dit een dunne stuppellijn, en die heeft onvoldoende contrast met de achtergrond.

Mogelijke oplossing

Definieer een expliciete focusstijl, die ruim voldoende contrast heeft.

Lees verder

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

Onvoldoende contrast in menu-items

menu item home, zwart op lichtblauw, en zoeken, collecties, wit op lichtblauw Het item “Home” heeft voldoende contrast, maar “Zoeken” en “Collecties” niet

links naar pagina's 1, 2, 3, etcetera

Probleem

In de navigatie hebben de inactieve items onvoldoende contrast tussen de tekstkleur en de achtergrondkleur. Het contrast is 1.78 : 1, dit zou 4.5 : 1 moeten zijn.

Mogelijke oplossing

Verhoog het contrast, bijvooorbeeld door donkerblauw te gebruiken.

Herhaling

Op de volgende plekken is ook onvoldoende contrast gebruikt:

WCAG criterium:
1.4.3: Contrast (Minimum) (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end, design

Sommige content verborgen wanneer gebruiker inzoomt

titel pagina links en zoekveld rechts, het zoekveld valt over de titel, waardoor deze maar deels leesbaar is

Probleem

Wanneer de gebruiker op 200% inzoomt, valt het zoekveld over de paginaheader heen, waardoor de tekst “Publicatieplatform UitvoeringsContent (PUC)” en de payoff “Alle uitvoeringsinformatie van de Nederlandse Overheid bij elkaar“ maar deels leesbaar zijn.

Mogelijke oplossing

Maak gebruik van responsive design: zorg dat wanneer er onvoldoende ruimte is om logo en zoekveld naast elkaar te zetten, ze onder elkaar worden geplaatst.

WCAG criterium:
1.4.4: Herschalen van tekst (externe link)
Complexiteit:
Hoog
Ernst:
Hoog
Sample:
homepage
Verantwoordelijkheid:
Front-end

Date picker te ver verwijderd van knop

Onder Datum document is een date picker geopend

Probleem

Op de zoekresultatenpagina is het op sommige plekken mogelijk om te filteren met behulp van data. Een datum kan worden geselecteerd met behulp van een “date picker”. Wanneer deze wordt geopend met het toetsenbord, is het lastig de date picker te gebruiken. De code voor de date picker bevindt zich namelijk helemaal onderaan het document. Wie daar met de TAB-toets naartoe wil, zal eerst langs de rest van het document moeten tabben.

Mogelijke oplossing

Dit kan op twee manieren worden opgelost: door focus te verplaatsen of door de date picker te verplaatsen in de code.

Manier 1: verplaats focus

Zet na het openen van de date picker wordt geopend, dus zodra deze actief is, de focus op het element van de date picker.

In JavaScript kan dat zo:

const datepickerElement = document.getElementById("ui-datepicker-div");

datepickerElement.focus();

Hiervoor is het wel van belang dat het element een tabindex="-1" heeft. De waarde -1 zorgt dat het element met behulp van script focus kan krijgen. Let op: gebruik nooit een positief getal als tabindex, dat kan de tabvolgorde ernstig verstoren (tenzij voor elk element toegevoegd).

Manier 2: verplaats de date picker

Een andere manier om het op te lossen is door de HTML voor de datepicker direct na de knop te zetten die 'm opent, zodat een gebruiker die met TAB navigeert de elementen in de date picker als eerste tegenkomt na openen.

WCAG criterium:
2.4.3: Focus volgorde (externe link)
Complexiteit:
Medium
Ernst:
Hoog
Sample:
zoekresultaat
Verantwoordelijkheid:
Front-end

Sommige headings zijn leeg

Probleem

Onderaan elke pagina staan vier blokken, met in elk blog een heading (<h1>-element). Deze headings zijn leeg.

Mogelijke oplossing

Verwijder de headings.

WCAG criterium:
2.4.6: Koppen en labels (externe link)
Complexiteit:
Laag
Ernst:
Laag
Sample:
Alle pagina's
Verantwoordelijkheid:
Front-end

Focus soms niet zichtbaar

overlay met zoekveld 'vul een zoekterm in' en een aantal opties met voor elke optie een checkbox; achter de overlay is de rest van de pagina niet goed zichtbaar, omdat er een halftransparante laag overheen ligt

Probleem

Voor sommige instellingen wordt er in de interface gebruik gemaakt van een modal overlay, een venster dat over de hele pagina ligt. Als de modal open is, is de rest van de pagina verduisterd. Wanneer een gebruiker met de TAB-toets werkt om naar het volgende element te gaan, is het soms niet mogelijk om te zien welk element focus heeft.

Mogelijke oplossing

Zorg dat de focus blijft staan in de modal, terwijl deze open staat, zodat deze niet terechtkomt op elementen die onder de modal liggen.

Lees verder

WCAG criterium:
2.4.7: Focus zichtbaar (externe link)
Complexiteit:
Laag
Ernst:
Hoog
Sample:
resultaat
Verantwoordelijkheid:
Front-end

Bij filterknoppen missen de totalen in de naam

kop informatietype, met een aantal filters en achter elk filter een getal

Probleem

Achter elk van de filters staat een totaal aantal. Dit aantal zit niet in de “accessible name” van de knoppen waarmee wordt gefilterd. Daardoor zal iemand die gebruik maakt van hulpsoftware niet gelijk weten wat het totaal aantal resultaten is dat met een specifiek filter kan worden gevonden.

Mogelijke oplossing

De huidige code (ingekort tot het minimum) is:

<a href="">Beleid en regels</a>
<span>4670</span>

Door het totaal binnen de link te plaatsen, wordt dit onderdeel van de linknaam.

<a href="">Beleid en regels <span>4670</span></a>
WCAG criterium:
2.5.3: Label in naam (externe link)
Complexiteit:
Laag
Ernst:
Medium
Sample:
resultaat
Verantwoordelijkheid:
Front-end

Pagina herlaadt wanneer keuze geldigheid wordt aangepast

filter geldigheid, met keuze tussen opties nieuwste versies, geldig vandaag en geldig op met datumveld

Probleem

Wanneer de waarde van het veld “Geldig” wordt aangepast, bijvoorbeeld door met de muis op één van de opties te klikken of met de pijltoetsen op het toetsenbord, herlaadt de hele pagina. Dit zorgt ervoor dat gebruikers van hulptechnologieën zonder waarschuwing hun context verliezen, doordat ze weer aan het begin van de pagina beginnen.

Mogelijke oplossing

Pas het filter pas toe na een duidelijke actie, bijvoorbeeld wanneer de gebruiker de knop “Zoek” gebruikt.

WCAG criterium:
3.2.2: Bij input (externe link)
Complexiteit:
Medium
Ernst:
Medium
Sample:
zoekresultaat
Verantwoordelijkheid:
Front-end

Zoekveld heeft geen label

overlay met zoekveld 'vul een zoekterm in' en een aantal opties met voor elke optie een checkbox; achter de overlay is de rest van de pagina niet goed zichtbaar, omdat er een halftransparante laag overheen ligt

Probleem

Er is voor het veld “Vul een zoekterm in” geen label beschikbaar.

Mogelijke oplossing

Voeg een label toe. Dat kan bijvoorbeeld door een <label>-element te koppelen aan de <input>, door in het label een for attribuut te gebruiken dat gelijk is aan het id van de input.

<label for="doctype">Zoekterm</label>
<input id="doctype" type="text">

Lees verder

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