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:
vaststellen wat binnen en buiten scope valt
vaststellen gebruikte technologieën
samenstellen sample (steekproef)
onderzoek van de sample
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
Dit rapport is een momentopname.
De beoordeling per criterium is een falsificatie: “voldoet” betekent dat we niets hebben kunnen vinden dat aanleiding gaf om te beoordelen als “voldoet niet”.
We geven per probleem één of meer voorbeelden. Het kan zijn dat hetzelfde probleem vaker of op andere plekken voorkomt.
Voor dit onderzoek is gebruik gemaakt van de laatste versies van Firefox, Chrome, Safari en Microsoft Edge.
Komt voor op
Pagina's
Komt voor op:
Alle pagina's op https://puc.overheid.nl/
Niet in scope:
Collecties met eigen huisstijlen, zoals Nederlandse Zorgautoriteit ne Raad voor strafrechtstoepassing en jeugdbescherming
Ondersteuning
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
Microsoft Edge 96
Mozilla Firefox 95
Google Chrome 96
Apple Safari 14
Apple Safari op iOS 15
gangbare hulptechnologieën
Gebruikte technologieën
De onderzochte maakt gebruik van de volgende technologieën:
HTML
CSS
JavaScript
WAI-ARIA
Sample
Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:
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.
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.
Het item “Home” heeft voldoende contrast, maar “Zoeken” en “Collecties” niet
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:
In de pagina “Zoekresultaat”: de links om naar volgende pagina's te gaan
Focusstijl en hoverstijl van alle links
Secundaire knoppen, zoals “Wis alles” op de zoekpagina
Inhoudsopgave op documentpagina
Knop “Maak een PDF” op documentpagina
Knop om actief filter te verwijderen op zoekresultaatpagina
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.
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.
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.
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.
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:
<ahref="">Beleid en regels</a> <span>4670</span>
Door het totaal binnen de link te plaatsen, wordt dit onderdeel van de linknaam.
Pagina herlaadt wanneer keuze geldigheid wordt aangepast
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.
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.