Issues:
Hercontrole audit digitale toegankelijkheid leerdam.city.nl
(Alleen de bevindingen)
Scope van de evaluatie
| Naam website | leerdam.city.nl |
|---|---|
| Datum | 6 november 2025 |
| Scope van de website |
Binnen de scope van het onderzoek valt:
|
| Conformiteitsdoel | WCAG 2.1 niveau AA |
Uitgebreide toetsresultaten
1. Waarneembaar
1.3 Aanpasbaar
1.3.1 Info en relaties (Niveau A)
Informatie over succescriterium 1.3.1 Info en relaties
Uitkomst: Onvoldoende
Bevinding 1: Op de pagina "Productkeuze" (in het Nieuwe aanvraag proces) staan, onder de kop "Productkeuze", twee selectiemogelijkheden; "Dagontheffing binnenstad Leerdam" en "Jaarontheffing autoluwe binnenstad Leerdam". Deze selectiemogelijkheden worden door voorleessoftware voorgelezen als "tabel" en "klikbaar", terwijl ze functioneren als link (want ze gaan naar een nieuwe pagina). Gebruikers van voorleessoftware weten nu niet goed wat ze kunnen verwachten, dit kan verwarrend zijn. Pas het <a> element toe in plaats van het huidige <div> element (dat als tabel fungeert). Dit geldt voor beide selectiemogelijkheden.
Bevinding 2: Advies: Op de pagina "Persoonlijk dashboard" wordt gebruik gemaakt van een <h1> element en een <h3> element. Gebruikers van hulpsoftware kunnen aan de hand van de koppenstructuur door de pagina navigeren. Hierin wordt onderscheid gemaakt in belangrijkheid door het gebruik van de verschillende kopniveaus. Op deze pagina ontbreekt het <h2> element en daarmee een niveau. Dit kan verwarrend zijn voor gebruikers van hulpsoftware. Sla geen kopniveaus over op een pagina. Vervang de <h3> elementen, op deze pagina voor <h2> elementen en pas CSS styling toe om de koppen visueel aan te passen.
1.3.5 Identificeer het doel van de input (Niveau AA)
Informatie over succescriterium 1.3.5 Identificeer het doel van de input
Uitkomst: Onvoldoende
Bevinding 3: De invoervelden op de pagina "Mijn gegevens" hebben geen autocomplete attribuut. Gebruikers, in het algemeen, maar vooral gebruikers met een cognitieve beperking of gebruikers met slecht zicht of die blind zijn of gebruikers met een motorische beperking, hebben baat bij het gebruik van het autocomplete attribuut. Het zorgt ervoor dat gebruikers geholpen worden met het invullen van persoonlijke gegevens. Geef de invoervelden het autocomplete attribuut met de juiste, bijpassende waarde.
1.4 Onderscheidbaar
1.4.3 Contrast (minimum) (Niveau AA)
Informatie over succescriterium 1.4.3 Contrast (minimum)
Uitkomst: Onvoldoende
Bevinding 4: Nieuwe bevinding: op de pagina Reden ontheffing in het nieuwe aanvraag proces hebben de rode (HEX #ff0000) foutmeldingen bij de velden onvoldoende contrast met de witte achtergrond. De contrastverhouding is 3,9:1 waar het minstens 4,5:1 moet zijn.
1.4.4 Herschalen van tekst (Niveau AA)
Informatie over succescriterium 1.4.4 Herschalen van tekst
Uitkomst: Onvoldoende
Bevinding 5: Op de pagina "Persoonlijk dashboard" staat, onder de kop "Mijn producten", een visuele tabel met vijf categorieën (beginnend met "Naam"). Bij een vergrotingspercentage van 150% (op een schermgrootte van 1280px X 1024px) verdwijnen deze categorieën van het scherm en komen nergens terug, ook niet in een uitklapmenu. Gebruikers die het scherm vergroten, omdat ze slechtziend zijn, raken informatie kwijt. Zorg ervoor dat alle informatie te allen tijde zichtbaar is of terug te vinden is in een menu.
1.4.10 Reflow (Niveau AA)
Informatie over succescriterium 1.4.10 Reflow
Uitkomst: Onvoldoende
Bevinding 6: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit: op het Persoonlijk Dashboard vallen de taalkeuze button, voor Nederlands en Engels, en de kop "Ontheffingenloket Leerdam" deels over de witte achtergrond, waardoor tekst wegvalt (op een schermgrootte van 1280px X 1024px). Ook vallen de knoppen voor Nieuwe aanvraag en Mijn gegevens vallen weg. Gebruikers die vergrotingssoftware gebruiken of die de webpagina vergroten d.m.v. de vergrotingsfunctie in de browser hebben moeite met het lezen van de tekst en het bedienen van de knop. Zorg ervoor dat tekst en interactieve elementen niet wegvallen of over elkaar heen lopen wanneer de pagina wordt ingezoomd.
Dit speelt ook op de pagina's "Mijn gegevens" en "Nieuwe aanvraag" proces. Ook ontstaan er scrollbalken, wat niet is toegestaan (enkel de tabel op het persoonlijk dashboard mag een scrollbalk veroorzaken, op andere pagina's moet de content altijd meeschalen en binnen de viewport passen.
1.4.11 Contrast van niet-tekstuele content (Niveau AA)
Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content
Uitkomst: Onvoldoende
Bevinding 7: Op de pagina "Aanvraag gegevens" staan, onder de kop "Aanvraag gegevens", twee knoppen; "Aanvraag annuleren" en "Vorige". De knoppen krijgen wel de focus, maar de huidige focusrand is nauwelijks zichtbaar. Gebruikers met slechtzicht of die kleurenblind zijn, en afhankelijk zijn van toetsenbordnavigatie, ondervinden hinder van een nauwelijks zichtbare focusrand. Geef de knoppen een andere achtergrondkleur zodat de focusrand zichtbaar is, of definieer een kleur voor de focusrand in CSS.
Dit geldt voor alle knoppen met de blauwe kleur (HEX #28347F).
Zoals op de pagina's :
- Mijn gegevens.
- Productkeuze (in het Nieuwe aanvraag proces).
2. Bedienbaar
2.2 Genoeg tijd
2.2.1 Timing aanpasbaar (Niveau A)
Informatie over succescriterium 2.2.1 Timing aanpasbaar
Uitkomst: Onvoldoende
Bevinding 8: Wanneer een gebruiker ingelogd is heeft de website een tijdslimiet bij inactiviteit. De gebruiker krijgt een melding te zien dat hij/zij binnen tien seconden uitgelogd wordt. Deze tijd is niet aan te passen en er wordt ook niet aangegeven hoe je kan voorkomen dat je uitgelogd wordt. Gebruikers met een fysieke beperking of een cognitieve beperking hebben vaak meer tijd nodig om te reageren. 10 seconden is dan te kort. Geef de gebruiker op z'n mist 20 seconden de tijd om te reageren en geef in de melding aan hoe de tijd verlengt kan worden (bijvoorbeeld: "druk op een willekeurige toets"). Zie succescriterium 4.1.3 voor het toegankelijk maken van de melding voor voorleessoftware.
2.4 Navigeerbaar
2.4.2 Paginatitel (Niveau A)
Informatie over succescriterium 2.4.2 Paginatitel
Uitkomst: Onvoldoende
Bevinding 9: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit: De pagina "Persoonlijk dashboard" heeft als paginatitel "leerdam.city.nl". Dit beschrijft niet de pagina. Verander de titel in het <title>-element naar bijvoorbeeld "Persoonlijk dashboard - Ontheffingenloket Leerdam". Een soortgelijk probleem komt voor op de pagina's in het nieuwe aanvraag proces.
2.4.6 Koppen en labels (Niveau AA)
Informatie over succescriterium 2.4.6 Koppen en labels
Uitkomst: Onvoldoende
Bevinding 10: Op de pagina "Validatie" (in het Nieuwe aanvraag proces) staat een knop, met de tekst "ok". Dit is geen beschrijvende tekst van de knop. Deze knop zorgt ervoor dat de gebruiker teruggaat naar het dashboard. Gebruikers van hulpsoftware ondervinden hinder van onduidelijke labels. Het maakt het navigeren over de pagina lastiger omdat het label, van deze knop, niet aangeeft wat het resultaat is van de actie. Geef de knop het label "Terug naar dashboard".
2.4.7 Focus zichtbaar (Niveau AA)
Informatie over succescriterium 2.4.7 Focus zichtbaar
Uitkomst: Onvoldoende
Bevinding 11: Op de pagina "Aanvraag gegevens" staan, onder de kop "Aanvraag gegevens", twee knoppen; "Aanvraag annuleren" en "Vorige". De knoppen krijgen wel de focus, maar de huidige focusrand is nauwelijks zichtbaar. Gebruikers met slechtzicht of die kleurenblind zijn, en afhankelijk zijn van toetsenbordnavigatie, ondervinden hinder van een nauwelijks zichtbare focusrand. Geef de knoppen een andere achtergrondkleur zodat de focusrand zichtbaar is, of definieer een kleur voor de focusrand in CSS.
Dit geldt voor alle knoppen met de blauwe kleur (HEX #28347F).
Zoals op de pagina's :
- Mijn gegevens.
- Productkeuze (in het Nieuwe aanvraag proces).
Bevinding 12: Op de pagina "Productkeuze" (in het Nieuwe aanvraag proces) staan twee mogelijkheden om te selecteren; "Dagontheffing binnenstad Leerdam" en "Jaarontheffing autoluwe binnenstad Leerdam". Deze selectiemogelijkheden krijgen geen focusrand wanneer een gebruiker navigeert met het toetsenbord. De achtergrond krijgt wel een grijze achtergrond, echter is deze achtergrond niet afdoende voor gebruikers die slechtzicht hebben of die kleurenblind zijn. Geef de selectiemogelijkheden een focusrand.
3. Begrijpelijk
3.1 Leesbaar
3.1.2 Taal van onderdelen (Niveau AA)
Informatie over succescriterium 3.1.2 Taal van onderdelen
Uitkomst: Onvoldoende
Bevinding 13: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit: als men een nieuwe aanvraag doet, komt men op een productkeuzepagina. Deze heeft als titel [Mobility] Productchoice. Deze is een titel in het Engels, wat verkeerd uitgesproken zal worden door hulpsoftware. Vertaal de titel naar het Nederlands.
3.3 Assistentie bij invoer
3.3.1 Foutidentificatie (Niveau A)
Informatie over succescriterium 3.3.1 Foutidentificatie
Uitkomst: Onvoldoende
Bevinding 14: Op de pagina "Mijn gegevens" staan, in het formulier onder het logo, twee invoervelden. Eén met het label "E-mail" en de tweede met het label "Telefoonnummer". Beide invoervelden geven geen foutmelding wanneer verkeerde informatie wordt ingevuld. Dit is voor veel gebruikers vervelend, maar vooral voor gebruikers die blind zijn of slecht zicht hebben en voor gebruikers met een cognitieve beperking is het vervelend dat de velden geen controle uitvoeren op de invoer. Beide invoervelden hebben een type attribuut, maar met de verkeerde waarde. Geef de juiste waarde aan het type attribuut. Voor het e-mail invoerveld is dat type="email" en voor het telefoonnummer invoerveld is dat type="tel". Zorg ervoor dat de meldingen gekoppeld zijn aan het invoerveld waar de fout plaats vindt, dat deze koppeling zichtbaar, hoorbaar en duidelijk is en dat een foutsuggestie gegeven wordt in de melding.
Dit geldt ook voor de invoervelden "Emailadres" en "Email voor bevestiging" op de pagina "Particulier account" (in het Nieuwe account aanmaken proces).
3.3.3 Foutsuggestie (Niveau AA)
Informatie over succescriterium 3.3.3 Foutsuggestie
Uitkomst: Onvoldoende
Bevinding 15: Op de pagina "Kenteken toevoegen" (in het Nieuwe aanvraag proces) staat een invoerveld voor het kenteken. Wanneer de gebruiker een ongeldig kenteken invoert komt een foutmelding tevoorschijn. Deze modal geeft aan dat een ongeldig kenteken in ingevoerd, maar geeft geen foutsuggestie. Gebruikers met een cognitieve beperking hebben moeite met het identificeren en aanpassen van een incorrecte invoer. Geef altijd een foutsuggestie in een foutmelding bij een invoerveld.
4. Robuust
4.1 Compatibel
4.1.2 Naam, rol, waarde (Niveau A)
Informatie over succescriterium 4.1.2 Naam, rol, waarde
Uitkomst: Onvoldoende
Bevinding 16: Op de pagina "Productkeuze" (in het Nieuwe aanvraag proces) staan, twee klikbare elementen; "Dagontheffing binnenstad Leerdam" en "Jaarontheffing autoluwe binnenstad Leerdam". Deze klikbare elementen hebben een verkeerde programmatische rol. Het zijn linkjes (want ze gaan naar een nieuwe pagina), maar hebben de rol row in een tabel. Voor gebruikers van hulpsoftware is dit verwarrend. Gebruik het <a> element voor deze elementen zodat duidelijk is dat het een link is. Wanneer semantisch HTML gebruikt wordt en de elementen in de juiste volgorde staan, in de HTML-code, verwijder dan het tabindex attribuut uit de elementen.
Bevinding 17: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit: op de pagina "Kenteken toevoegen" (in het Nieuwe aanvraag proces) staat een invoerveld. Dit invoerveld heeft geen <label> element gekoppeld. Voorleessoftware kan zonder <label> element geen koppeling maken tussen de uitleg over het invoerveld en het invoerveld zelf. Gebruikers van voorleessoftware weten hierdoor niet welke invoer van gegevens verwacht wordt. Voeg een <label> element toe en koppel dit in de HTML-code aan het invoerveld middels het for en id attribuut.
4.1.3 Statusberichten (Niveau AA)
Informatie over succescriterium 4.1.3 Statusberichten
Uitkomst: Onvoldoende
Bevinding 18: Nieuwe bevinding als gevolg van het oplossen van een bevinding uit een eerdere audit: op de pagina "Mijn gegevens" staat een formulier met twee invoervelden. Deze krijgen een foutmelding bij het invoeren van incorrecte informatie. Zorg ervoor dat de foutmelding en foutsuggestie voorgelezen wordt door voorleessoftware en dat de timing, van het voorlezen, klopt. Gebruik een live-region. Dit speelt ook bij het nieuwe aanvraagproces.
Bevinding 19: Wanneer een gebruiker is ingelogd verschijnt, na een kwartier inactiviteit, in het scherm een melding dat de gebruiker binnen 10 seconden afgemeld wordt. Deze melding wordt niet voorgelezen door voorleessoftware. Gebruikers van voorleessoftware hebben geen idee dat ze uitgelogd worden. Zorg ervoor dat dit soort meldingen worden voorgelezen door voorleessoftware. Zie succescriterium 2.2.1 voor het toegankelijk maken van de melding.
Onderbouwing van de evaluatie
Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.
Steekproef getoetste webpagina's
- Homepagina (Nederlands):
https://leerdam.city.nl - Homepagina (Engels):
https://leerdam.city.nl/login - Inlog stap 1 gebruikersnaam:
https://id.city.nl/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dcity-portal%26redirect_uri%3Dhttps%253A%252F%252Fleerdam.city.nl%252Fcallback%26response_type%3Dcode%26scope%3Dopenid%2520offline_access%2520email%2520conneqtApiAccess%26nonce%3Db4d48adfb6c9cc481e14e9fd4654927c05w9jHdAp%26state%3Da8786a5f330c42a17e9170c2212a122a8393QJBzy%26code_challenge%3D9pr9qAO1hzIAmWIQCUAEEp2o6TLqfu5YAkQkUJnsuJc%26code_challenge_method%3DS256%26acr_values%3Dtenant%253A652f9d3e60699ce2f24ee281 - Inlog stap 2 wachtwoord:
https://id.city.nl/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dcity-portal%26redirect_uri%3Dhttps%253A%252F%252Fleerdam.city.nl%252Fcallback%26response_type%3Dcode%26scope%3Dopenid%2520offline_access%2520email%2520conneqtApiAccess%26nonce%3Db4d48adfb6c9cc481e14e9fd4654927c05w9jHdAp%26state%3Da8786a5f330c42a17e9170c2212a122a8393QJBzy%26code_challenge%3D9pr9qAO1hzIAmWIQCUAEEp2o6TLqfu5YAkQkUJnsuJc%26code_challenge_method%3DS256%26acr_values%3Dtenant%253A652f9d3e60699ce2f24ee281 - Persoonlijk dashboard:
https://leerdam.city.nl/dashboard - Mijn gegevens pagina:
https://leerdam.city.nl/process/652fbfeb2c59e97b28cb1e65/68679f401d198de2bb082f08 - Aanvraag gegevens pagina:
https://leerdam.city.nl/process/679ce82265264e1be219bd0f/68679f6b1d198de2bb082fa5 - Nieuwe aanvraag proces:
https://leerdam.city.nl/process/666858cd6a76bc21975cecbf/68679fbd1d198de2bb083080 - Nieuwe account aanmaken proces:
https://leerdam.city.nl/process/anonymous/fe3566fe-70a7-4c76-8f95-6c7b46702bac - Persoonlijk dashboard (Engels):
https://leerdam.city.nl/dashboard
Ondersteunende technieken
Bronnen
-
Evaluatiedocument WCAG 2.0
www.drempelvrij.nl/over-het-waarmerk -
Web Content Accessibility Guidelines (WCAG) 2.0 (Geautoriseerde Nederlandse vertaling)
www.w3.org/Translations/WCAG20-nl -
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
www.w3.org/WAI/eval/conformance -
Web Content Accessibility Guidelines (WCAG)
www.w3.org/WAI/intro/wcag -
How to Meet WCAG 2.1 Quick Reference
www.w3.org/WAI/WCAG21/quickref/
Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.