De website puc.overheid.nl voldoet grotendeels aan WCAG 2.1 A + AA succescriteria, met enkele kleine bevindingen die eenvoudig kunnen worden opgelost.
| Principe | Resultaten per principe |
|---|---|
| Waarneembaar | 16 uit 20 |
| Bedienbaar | 13 uit 17 |
| Begrijpelijk | 9 uit 10 |
| Robuust | 2 uit 3 |
| Totaal | 40 uit 50 |
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.
Dit rapport is samengesteld met behulp van de WCAG EM methodologie.
Het volgende proces is daarbij gebruikt:
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.
Komt voor op:
Niet in scope:
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
De onderzochte maakt gebruik van de volgende technologieën:
Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:
De homepage geeft toegang tot de verschillende publieke kanalen, handleidingen en verslagen.
Overzicht van alle collecties
Voorbeeld van een document
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.
Gebruik een <button>-element in plaats van een <a>-element.
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.
Definieer een expliciete focusstijl, die ruim voldoende contrast heeft.
Het item “Home” heeft voldoende contrast, maar “Zoeken” en “Collecties” niet
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.
Verhoog het contrast, bijvooorbeeld door donkerblauw te gebruiken.
Op de volgende plekken is ook onvoldoende contrast gebruikt:
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.
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.
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.
Dit kan op twee manieren worden opgelost: door focus te verplaatsen of door de date picker te verplaatsen in de code.
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).
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.
Onderaan elke pagina staan vier blokken, met in elk blog een heading (<h1>-element). Deze headings zijn leeg.
Verwijder de headings.
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.
Zorg dat de focus blijft staan in de modal, terwijl deze open staat, zodat deze niet terechtkomt op elementen die onder de modal liggen.
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.
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>
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.
Pas het filter pas toe na een duidelijke actie, bijvoorbeeld wanneer de gebruiker de knop “Zoek” gebruikt.
Er is voor het veld “Vul een zoekterm in” geen label beschikbaar.
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">