Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website parkeren.reserveren.rotterdam.nl

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Parkeren in Rotterdam
Datum 27 maart 2024
Scope van de website
  • Alle pagina's op parkeren.reserveren.rotterdam.nl
  • Niet de pagina's op rotterdam.nl (onderdeel van een ander onderzoek)
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 73

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Het logo van de organisatie, dat zowel in de header als in de footer verschijnt, is een informatieve afbeelding die momenteel geen tekstalternatief heeft. Dit maakt de afbeelding ontoegankelijk voor bezoekers met een visuele beperking. Het is nodig om een tekstalternatief toe te voegen voor deze en andere soortgelijke afbeeldingen op diverse pagina’s, waaronder de “Login”-pagina en de pagina “Mijn boekingen”. Voor voorbeelden, zie https://parkeren.reserveren.rotterdam.nl/ en de accountgerelateerde pagina's, zoals https://parkeren.reserveren.rotterdam.nl/account/auth/signup.
Hoewel er een poging is gedaan om een tekstalternatief toe te voegen aan de link bovenaan de pagina, is het gebruik van een alt-attribuut hier niet correct, aangezien dit attribuut niet bedoeld is voor a-elementen (links).

Bevinding 2: Op de homepagina, binnen de sectie die de details van elke garage toont, zijn er informatieve iconen (zoals het euroteken, het icoon van een lopend persoon, een oplader, een auto en een rolstoel) die geen tekstalternatieven hebben en dus niet voorgelezen worden. Er is geprobeerd deze iconen te beschrijven met een aria-describedby attribuut, maar dit werkt niet op niet-interactieve elementen, waardoor de informatie niet toegankelijk is. Vergelijkbare problemen doen zich voor bij andere informatieve iconen zonder alt-teksten, zoals op de knop “Meer resultaten weergeven”, de knop om ingevoerde zoekopdrachten te wissen, de filterknop naast het zoekveld, en de “E-mail” en “Kenteken” iconen naast de invoervelden in de zoekresultaten. De website bevat meerdere voorbeelden van informatieve iconen die via CSS zijn toegevoegd zonder tekstalternatieven, bijvoorbeeld in de pop-up “Pre-boekingsbevestiging”.

Bevinding 3: Op de homepagina staat naast het zoekvak een Filterknop. Deze knop opent een pop-up. Er zijn afbeeldingen voor bij select-elementen. Deze afbeeldingen zijn toegevoegd als CSS-achtergrondafbeeldingen en zijn daarom verborgen voor hulptechnologieën. Ze moeten beschikbaar worden gemaakt voor hulptechnologieën en een zinvol tekstalternatief krijgen. De afbeeldingen worden ook gebruikt in zoekresultaten onder "Beschikbare parkeerplaatsen", na het klikken op "Boek parkeerplaats" onder "Beschikbare producten" en na het klikken op "Doorgaan" onder "Boek parkeerplaats".

Bevinding 4: In de zoekresultaten op de homepage worden afbeeldingen van een klok weergegeven, die zijn ingevoegd met het img-element maar geen alt-attribuut hebben. Het ontbreken van dit attribuut leidt ertoe dat de bestandsnaam wordt voorgelezen, wat niet informatief is voor de gebruiker. Het is belangrijk om het alt-attribuut toe te voegen en dit te voorzien van een beschrijvende tekst die de functie of betekenis van de afbeelding uitlegt. Voor meer informatie, zie de pagina https://parkeren.reserveren.rotterdam.nl/.

Bevinding 5: Bovendien, in het proces van het boeken van een garage via de "Doorgaan" knop op de homepage, komt de gebruiker verschillende schermen tegen. Op elk van deze schermen is een cirkelvormig icoon met een witte pijl zichtbaar, bedoeld om een stap terug te gaan. Dit informatieve icoon ontbeert momenteel een tekstalternatief. Zie voor meer details https://parkeren.reserveren.rotterdam.nl/.

Bevinding 6: Op de pagina "Mijn boekingen" binnen het besloten deel van de website, te vinden op https://parkeren.reserveren.rotterdam.nl/account/bookings, is er een knop met een afbeelding van een plusje die gebruikt wordt om een nieuwe boeking toe te voegen. Deze afbeelding mist een tekstalternatief, wat betekent dat gebruikers die afhankelijk zijn van hulptechnologieën zoals schermlezers, niet kunnen begrijpen wat de functie van de knop is. Het is nodig om een alt-attribuut toe te voegen aan de afbeelding van het plusje met een beschrijvende tekst zoals "Nieuwe boeking toevoegen". Dit zorgt ervoor dat de functie van de knop duidelijk is voor gebruikers die afhankelijk zijn van schermlezers, waardoor de toegankelijkheid en gebruiksvriendelijkheid van de website verbeteren.
Het ontbreken van tekstalternatieven voor afbeeldingen die als knoppen of links dienen, is in strijd met de succescriteria 4.1.2 (Naam, rol, waarde) en 2.4.4 (Linkdoel (in context)). De bovengenoemde afbeeldingen worden ook daar genoemd.
In het pdf-document “Algemene voorwaarden” is het logo van ‘Gemeente Rotterdam’ als achtergrondafbeelding toegevoegd. Het logo vertelt aan de bezoeker bij welke organisatie dit document hoort en mag geen achtergrond zijn. Een blinde bezoeker weet niet bij welke organisatie dit document hoort. Dit is alleen nodig op de eerste pagina van het document, anders wordt het logo op elke onderliggende pagina voorgelezen.
Zie https://rotterdambis.notubiz.nl/document/4837966/2/document.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op de homepage, te vinden op https://parkeren.reserveren.rotterdam.nl/book/, bevindt zich naast het zoekvak een filterknop. Wanneer erop geklikt wordt, opent zich een pop-upvenster. Binnen deze pop-up wordt de tekst "ZOEKFILTER" gebruikt als koptekst, maar deze is niet als zodanig opgemaakt met behulp van de kop elementen (<h1> tot <h6>). Dit kan de toegankelijkheid en de semantische structuur van de pagina beïnvloeden, aangezien schermlezers en andere hulptechnologieën afhankelijk zijn van correct gebruikte HTML-elementen om de inhoud te interpreteren.

Bevinding 8: Verder, in het boekingsproces onder het kopje "Beschikbare parkeerplaatsen", worden de zoekresultaten weergegeven waarbij elke optie een locatienaam in groene kleur bevat. Deze namen lijken visueel op kopteksten, maar zijn niet als zodanig opgemaakt met een kop element (<h1> tot <h6>).

Bevinding 9: Op de homepage, toegankelijk via https://parkeren.reserveren.rotterdam.nl/book/, zijn er filters beschikbaar onder het zoekvak. Wanneer een bezoeker een selectie maakt, zoals het kiezen van een begintijd in het filter, verschijnt de tekst "Vind Parkeerplaats" naast de kaart. Deze tekst, evenals "Sorry, geen parkeerplaats beschikbaar." en "Beschikbare parkeerplaatsen", lijkt visueel op een kop maar is niet als zodanig opgemaakt met HTML-kop elementen (<h1> tot <h6>).

Bevinding 10: Op de Privacyverklaring pagina, te vinden op https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement, wordt de eerste kop "Privacyverklaring" eveneens niet opgemaakt als een HTML-koptekst. Bovendien zijn alle tussenkopjes en bijbehorende paragrafen opgemaakt met definitielijsten (dt- en dd-elementen), wat niet ideaal is voor de structuur van inhoudelijke teksten zoals deze. Het omzetten van deze elementen naar meer geschikte HTML-elementen zoals kop- (<h2>, <h3>, etc.) en paragraafelementen (<p>) zou de toegankelijkheid verbeteren. Dit stelt bezoekers met visuele beperkingen in staat om efficiënter door de pagina te navigeren, aangezien ze van kop naar kop kunnen springen om snel specifieke informatie te vinden en te laten voorlezen door hun schermlezers.

Bevinding 11: Wanneer een bezoeker in het zoekveld op de website begint te typen, wordt een suggestielijst met resultaten getoond waarin de woorden die overeenkomen met de getypte zoekopdracht zijn gemarkeerd met een <strong>-element. Hoewel het <strong>-element in HTML wordt gebruikt om belang of nadruk te geven aan tekst, is het hier gebruikt voor visuele opmaakdoeleinden, wat niet de bedoeling is van dit semantische element. Voor visuele opmaak is het aanbevolen om CSS (Cascading Style Sheets) te gebruiken.

Bevinding 12: Op de pagina "Mijn boekingen", die te vinden is via https://parkeren.reserveren.rotterdam.nl/account/bookings, wordt onder de naam van de bezoeker een dropdownmenu weergegeven waarmee de taal van de website kan worden geselecteerd. De geselecteerde taal is hier ook opgemaakt met een <strong>-element. Net als in het eerdere voorbeeld, wordt dit element gebruikt voor visuele opmaak in plaats van het aanduiden van belang of nadruk. Ook in dit geval is het beter om CSS te gebruiken voor het stijlen van de tekst.

Bevinding 13: Onder het kopje "Beschikbare parkeerplaatsen" op de website worden de adres-, datum- en tijdgegevens van de zoekresultaten weergegeven met <div>-elementen in plaats van met <p>-elementen (paragraafelementen). Hoewel <div>-elementen veel gebruikt worden voor het groeperen van blokken content en het toepassen van CSS-stijlen, zijn <p>-elementen semantisch meer geschikt voor het markeren van tekstparagrafen. Het gebruik van <p>-elementen voor tekstuele inhoud helpt bij het verbeteren van de toegankelijkheid, omdat het de structuur van de content verduidelijkt voor gebruikers die afhankelijk zijn van schermlezers. Dit draagt bij aan een beter begrip van de paginastructuur en de relatie tussen de verschillende inhoudsonderdelen.

Bevinding 14: Op de inlogpagina, toegankelijk via https://parkeren.reserveren.rotterdam.nl/account/auth/login, worden de <label>-elementen van het formulier niet correct gekoppeld aan de bijbehorende <input>-elementen. Dit is een belangrijk toegankelijkheidsaspect, omdat het koppelen van labels aan invoervelden zorgt dat schermlezers en andere hulpmiddelen de formulierelementen correct kunnen identificeren en beschrijven. Om dit te corrigeren, dient elk <label>-element een for-attribuut te hebben dat overeenkomt met het id-attribuut van het gerelateerde <input>-element. Dit zorgt ervoor dat wanneer een gebruiker op het label klikt, de focus automatisch naar het bijbehorende invoerveld gaat, wat de gebruiksvriendelijkheid verbetert, vooral voor mensen met motorische beperkingen of die gebruik maken van een toetsenbord voor navigatie.

Bevinding 15: De actieve link in de navigatie op “Mijn boekingen” pagina wordt alleen in kleur aangegeven. Deze informatie is niet beschikbaar voor gebruikers van hulpsoftware. Dit kan worden opgelost door aria-current="page" toe te voegen aan het actieve menu-item. Zie https://parkeren.reserveren.rotterdam.nl/account/bookings.

Bevinding 16: In het pdf-document “Algemene voorwaarden” ontbreken kop elementen. Visueel zijn er kopjes en tussenkopjes aanwezig om het document een structuur te geven. Deze structuur ontbreekt voor een blinde bezoeker. Bijkomend nadeel is dat een blinde bezoeker de koppen niet kan gebruiken om door het document te navigeren. Zie https://rotterdambis.notubiz.nl/document/4837966/2/document.

Bevinding 17: In het pdf-document “Algemene voorwaarden” bevinden zich opsommingen die niet correct zijn opgemaakt. Het gaat om de opsommingen met letters en cijfers, bijvoorbeeld onder artikel 1, 9 en 10. Daarnaast onder artikel 5 staat een lijst die bestaat uit negen punten. In de tags bestaat deze lijst uit meerdere lijsten.
Zie https://rotterdambis.notubiz.nl/document/4837966/2/document.

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 18: Voor goede ondersteuning door browsers en hulpsoftware, is het noodzakelijk om het autocomplete-attribuut toe te voegen aan de relevante input-elementen van invoervelden die persoonlijke informatie van een bezoeker verzamelen. Bijvoorbeeld, voor het invoerveld voor een e-mailadres moet het attribuut autocomplete="email" worden toegevoegd. Dit geeft aan dat het veld bedoeld is voor het invullen van e-mailadressen en helpt browsers en hulpsoftware om relevante suggesties te bieden.
Op de homepagina (https://parkeren.reserveren.rotterdam.nl) tijdens het boeken van een garage, dient een e-mailadres van de bezoeker te worden ingevuld. Dit invoerveld mist een autocomplete attribuut.
Ook op de account gerelateerde pagina’s staan dergelijke invoervelden. Zie de Login pagina, Wachtwoordreset pagina, de Account aanmaken pagina en de pagina om de account te activeren. Zie https://parkeren.reserveren.rotterdam.nl/account/auth/login, https://parkeren.reserveren.rotterdam.nl/account/auth/signup en https://parkeren.reserveren.rotterdam.nl/account/auth/activation/.
Lees pagina https://www.w3.org/Translations/WCAG21-nl/#input-purposes voor alle benodigde waardes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 19: In de pop-up schermen heeft de focusrand een aangepaste focusrand. Op de Sluit of Annuleren knoppen is de rand lichtblauw (HEX#CBDEFF). Op de andere knoppen is het lichtroze. In combinatie met een witte achtergrond hebben deze kleuren te weinig kleurcontrast, namelijk 1,4:1. Omdat het contrast minder is dan 3,0:1 is het gebruik van kleur om informatie te geven. Zie bijvoorbeeld het scherm “Pre-boekingsbevestiging”.

Bevinding 20: Op de “Mijn boekingen” pagina bevindt zich een link “click to book”. De link verschilt van de statische tekst alleen in kleur. Zorg voor een andere visuele aanwijzing.
Zie https://parkeren.reserveren.rotterdam.nl/account/bookings

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: Op de website worden diverse tinten groen gebruikt voor teksten, links, knoppen, en meer. De combinatie van deze groene kleur met wit resulteert in een kleurcontrast dat varieert tussen 2,6:1 en 3,6:1. Dit contrastniveau is onvoldoende voor tekst van normale grootte (kleiner dan 24px of niet vetgedrukt). Het is noodzakelijk om alle pagina's van de website te controleren op het gebruik van deze groene kleur en de kleuren aan te passen om een minimumcontrast van 4,5:1 te bereiken. Voor tekst groter dan 24px is een minimumkleurcontrast van 3,0:1 toereikend.
Op de homepagina opent een datepicker wanneer een bezoeker probeert gegevens in te voeren in het veld "Begintijd" en “Eindtijd”. Deze kalenderwidget is de enige methode om een datum te selecteren en kampt met kleurcontrastproblemen, met name in combinaties van grijs en wit, alsook het eerder genoemde groen met wit.

Bevinding 22: Op de homepagina, binnen het hoofdmenu, is er een link genaamd "Account maken". De kleur van de tekst is groen (HEX #019c4e) tegen een witte achtergrond. Het contrastniveau is 3,6:1, wat onder de vereiste minimum van 4,5:1 ligt. Zie voor meer informatie https://parkeren.reserveren.rotterdam.nl/.
Op de homepagina bevindt zich een zoekveld. Wanneer een gebruiker een waarde intypt, verschijnt er een venster met adresvoorstellen. De tekstkleur van de adressen is wit op een blauwe achtergrond (HEX #007bff), met een contrast van 4,1:1. Dit is net onder het vereiste minimum van 4,5:1. Meer details zijn te vinden op https://parkeren.reserveren.rotterdam.nl/.
Op de inlogpagina worden kleurcombinaties van grijs en wit, en groen en wit gebruikt die niet voldoen aan de minimale eis voor kleurcontrast van 4,5:1. Het contrast varieert tussen 2,1:1 en 2,6:1. Dit probleem doet zich voor bij teksten zoals "Log in op je account", "Heb je nog geen account?", "Inloggen", "Wachtwoord vergeten?" en "Verstuur", en is aanwezig op alle accountgerelateerde pagina's. Voor voorbeelden, zie https://parkeren.reserveren.rotterdam.nl/account/auth/login en https://parkeren.reserveren.rotterdam.nl/account/auth/signup.

Bevinding 23: Op de pagina "Mijn boekingen" bevindt zich een link met de tekst "click to book". De tekstkleur is blauw (HEX #77A1DD) en heeft een onvoldoende contrast van 2,6:1 tegen de achtergrond. Het contrast moet minimaal 4,5:1 zijn om aan de toegankelijkheidsnormen te voldoen. Zie voor meer informatie https://parkeren.reserveren.rotterdam.nl/account/bookings.
Op de pagina "Mijn profiel en instellingen" is er tekst in groen (HEX #11B3A2). Het kleurcontrast met de witte achtergrond is 2,6:1, wat eveneens onder de vereiste minimum van 4,5:1 ligt. Deze specifieke groene kleur wordt ook op veel andere pagina's gebruikt in combinatie met wit, wat overal tot vergelijkbare contrastproblemen leidt. Voor meer details, zie https://parkeren.reserveren.rotterdam.nl/account/myprofile.
Wanneer een bezoeker op "Boek parkeerplaats" klikt, opent een zoekresultaat met verschillende opties. Elke optie bevat een knop "Doorgaan" met witte tekst op een groene achtergrond (HEX #50BA7A). De namen van de locaties zijn groen (HEX#22ac73). De achtergrondkleur is wit. Het contrast is 2,9:1.Het contrast van 2,4:1 is onvoldoende volgens de toegankelijkheidsstandaarden, waar een minimum van 4,5:1 vereist is.

Bevinding 24: In het pop-upscherm "Pre-boekingsbevestiging" heeft de knop "Bevestigen & betalen", wanneer deze geactiveerd is, witte tekst op een groene achtergrond (HEX #47BA80). Het contrast is 2,4:1, wat aanzienlijk lager is dan de vereiste 4,5:1 voor voldoende leesbaarheid volgens de toegankelijkheidsrichtlijnen. Dit is een voorbeeld van het groen-wit kleurcontrastprobleem dat op verschillende plaatsen op de website voorkomt.
Bovendien zijn er op de website meerdere gevallen waar grijze tekst op een witte achtergrond wordt gebruikt, wat niet voldoet aan de minimale contrasteisen voor toegankelijkheid. Een voorbeeld hiervan is te vinden op de homepage naast het zoekveld, waar een filterknop leidt naar een pop-up getiteld "Zoekfilter". De tekstkleur van "Zoekfilter" is grijs (HEX #ABABAB) op een witte achtergrond, met een contrast van slechts 2,3:1, terwijl de standaard vereist dat dit 4,5:1 moet zijn. Voor meer informatie, zie https://parkeren.reserveren.rotterdam.nl/book/.

Bevinding 25: Wanneer bezoekers in de zoekresultaten op "Doorgaan" klikken en het scherm "Boek parkeerplaats" wordt weergegeven, wordt de prijs gepresenteerd met het label "Bedrag". De tekstkleur van dit label is grijs (HEX #A5A5A5) tegen een witte achtergrond. Het contrast van deze kleurcombinatie is 2,5:1, wat ruim onder de aanbevolen minimale contrastverhouding van 4,5:1 ligt voor goede leesbaarheid volgens WCAG (Web Content Accessibility Guidelines).
Binnen het besloten deel van de website ervaren bijna alle grijze teksten een soortgelijk probleem van onvoldoende kleurcontrast. Een specifiek voorbeeld hiervan is op de pagina "My Profile and settings" te vinden, waar het kopje "OPTIES" in een grijze kleur (HEX #9C9A9A) op een witte (#FFFFFF) achtergrond staat. Het contrast is hier 2,8:1.
Deze voorbeelden illustreren een breder probleem van ontoereikend kleurcontrast tussen grijze tekst en witte achtergronden op de website. Dit issue komt niet alleen voor op de genoemde pagina's, maar is ook geobserveerd op andere delen van de website.

Bevinding 26: In het pop-upscherm "Pre-boekingsbevestiging" wordt een belangrijke waarschuwingstekst getoond in rode kleur (HEX #CA9595) op een witte achtergrond, met de mededeling "Om verder te gaan, moet u akkoord gaan met de voorwaarden." Het kleurcontrast van deze tekst is 2,5:1, wat aanzienlijk lager is dan de aanbevolen minimale contrastverhouding van 4,5:1 volgens de WCAG-richtlijnen voor goede leesbaarheid. Dit kan het moeilijk maken voor sommige gebruikers, vooral die met een visuele beperking, om deze belangrijke informatie te lezen.
Daarnaast heeft de "Annuleren" knop grijze tekst (HEX #828282) op een witte achtergrond, met een kleurcontrast van 3,8:1. Ook dit contrast is lager dan de aanbevolen richtlijn van 4,5:1, waardoor de tekst voor sommige gebruikers moeilijk leesbaar kan zijn.
Op de "Privacyverklaring" pagina zijn er blauwe links (HEX #3689FE) die een kleurcontrast hebben van slechts 3,4:1 tegen de witte achtergrond. Dit contrast is ook lager dan de aanbevolen 4,5:1, wat de toegankelijkheid en gebruikerservaring voor personen met visuele beperkingen negatief beïnvloedt. Zie https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 27: Wanneer op de website wordt ingezoomd tot 200% bij een schermresolutie van 1280px breed en 1024px hoog, treedt er een probleem op met de toegankelijkheid en bruikbaarheid van de site. Een deel van de content en functionaliteit gaat verloren. Specifiek verdwijnen enkele cruciale links - zoals "Uitloggen" en "Afmelden" - uit het zicht wanneer het mobiele menu (geactiveerd door de hamburgerknop) wordt gebruikt en daar kan niet naartoe gescrolld worden. Deze links zijn belangrijk voor de navigatie en het beheer van de gebruikersaccount. Zie https://parkeren.reserveren.rotterdam.nl/book/.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 28: Onder succescriterium 1.4.4 is beschreven dat een deel van het mobiele menu verdwijnt wanneer sterk wordt ingezoomd. Dit gebeurt ook bij een schermgrootte van 1280px bij 1024px ingezoomd wordt tot 400%.
Zie https://parkeren.reserveren.rotterdam.nl/book/.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 29: Op de website worden diverse tinten groen gebruikt voor teksten, links, knoppen, en meer. De combinatie van deze groene kleur met wit resulteert in een kleurcontrast dat varieert tussen 2,6:1 en 3,6:1. Het vereiste minimum is 3,0:1. Controleer alle pagina’s van de website op aanwezigheid van deze kleurcombinaties en pas de kleuren aan.

Bevinding 30: Op de pagina "Mijn boekingen" bevindt zich een knop die qua ontwerp lijkt op een schakelaar. Deze knop is uitgevoerd in een groene kleur (HEX#11B3A2) die, in combinatie met een witte achtergrond, een kleurcontrast van 2,6:1 oplevert. Volgens de toegankelijkheidsrichtlijnen moet dit contrast minimaal 4,5:1 zijn voor voldoende leesbaarheid. Zie https://parkeren.reserveren.rotterdam.nl/account/myprofile voor meer informatie.

Bevinding 31: Op de homepagina, naast het zoekveld, bevindt zich een knop voor het filter. Wanneer hierop wordt geklikt, verschijnt er een pop-up met de titel "Zoekfilter". Binnen deze pop-up fungeren afbeeldingen als labels, waardoor ze informatief zijn. Echter, de afbeelding van een benzinepomp, uitgevoerd in groen (HEX#7cc165) tegen een witte achtergrond, heeft een kleurcontrast van slechts 2,2:1, wat aanzienlijk lager is dan de aanbevolen norm. Zie https://parkeren.reserveren.rotterdam.nl/ voor verdere details.

Bevinding 32: In het pop-upvenster "Pre-boekingsbevestiging" is een sluitknop aanwezig. De gebruikte grijze kleur (HEX#BDBDBD) biedt op een witte achtergrond een contrast van slechts 1,9:1, wat duidelijk onvoldoende is voor goede zichtbaarheid. Daarnaast is er een checkbox in kleur (HEX#DDE1E5) die een nog lager kleurcontrast heeft, namelijk 1,3:1. Beide elementen voldoen niet aan de minimale eisen voor toegankelijkheid en zouden aangepast moeten worden om beter leesbaar en toegankelijk te zijn.

Bevinding 33: In de pop-up schermen heeft de focusrand een aangepaste focusrand. Op de Sluit of Annuleren knoppen is de rand lichtblauw (HEX#CBDEFF). Op de andere knoppen is het lichtroze. In combinatie met een witte achtergrond hebben deze kleuren te weinig kleurcontrast, namelijk 1,4:1. Dit moet minimaal 3,0:1 zijn.

Bevinding 34: De standaard browser focusindicator is vervangen door een zelfgemaakte focusrand, die in verschillende kleuren kan verschijnen. Een voorbeeld hiervan is een lichtblauwe rand (HEX#80bdff), die, wanneer gecombineerd met een witte achtergrond, een kleurcontrast van slechts 2,1:1 heeft. Er is ook een variant met een groene rand (HEX#17b3a3), waarbij het kleurcontrast 2,6:1 bedraagt. Een andere optie is een lichtpaarse rand (HEX#d9c3fc) met een kleurcontrast van 1,6:1. Er zijn aanvullende kleurkeuzes mogelijk die hier niet nader zijn gespecificeerd.
Dit issue is te zien in de pop-upschermen, bijvoorbeeld "Pre-boekingsbevestiging". Bij de "Sluit" of "Annuleren" knoppen is de rand lichtblauw (HEX#CBDEFF), terwijl deze bij andere knoppen lichtroze is. Deze kleuren, in combinatie met een witte achtergrond, leveren een te laag kleurcontrast op van slechts 1,4:1, terwijl dit minimaal 3,0:1 moet zijn. Dit duidt op een significante afwijking van de toegankelijkheidsnormen, die een voldoende hoog contrast vereisen om de bruikbaarheid voor gebruikers met visuele beperkingen te waarborgen.

Bevinding 35: De rand rond invoervelden op pagina's met formulieren is lichtgrijs (HEX#E8E8E9), met een kleurcontrast van slechts 1,2:1 tegen een witte achtergrond, wat ver onder de aanbevolen minimum van 3,0:1 ligt. Voor meer details zie de pagina https://parkeren.reserveren.rotterdam.nl/account/auth/login.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 36: Op de website zijn er meerdere links die niet via het toetsenbord te bedienen zijn. Voorbeelden hiervan zijn de links in het hoofdmenu, zoals "Veelgestelde vragen" en "Inloggen", alsmede links in het mobiele menu en alle links in de footer. Dit probleem ontstaat doordat de href-attributen bij deze links zijn verwijderd, waardoor ze niet toegankelijk zijn met het toetsenbord. Voor meer informatie, zie https://parkeren.reserveren.rotterdam.nl/.

Bevinding 37: Op de website zijn er diverse knoppen die niet met het toetsenbord bediend kunnen worden. Dit betreft onder meer de filterknop naast het zoekveld, de knop om ingevoerde zoekopdrachten te verwijderen, de hamburgerknop, en de "Boek parkeerplaats" knoppen in de zoekresultaten. Er zijn nog meer interactieve elementen op de website die niet via het toetsenbord te bedienen zijn. Zorg dat knoppen de focus krijgen en met de spatiebalk of met Enter zzijn te activeren.

Bevinding 38: Een specifiek probleem doet zich voor op de homepage: wanneer een gebruiker probeert gegevens in te voeren in het veld "Begintijd", opent er een datepicker. Deze datepicker is niet met toetsenbord te bedienen. Er is geen alternatieve methode om een datum in te voeren buiten deze datepicker om. De invoervelden "Begindatum" en "Einddatum" zijn daarom niet in te vullen zonder bijvoorbeeld een muis te gebruiken.

Bevinding 39: Op de pagina "Mijn boekingen" op de website https://parkeren.reserveren.rotterdam.nl/account/bookings, bevindt zich in de kop van de pagina een menu onder de gebruikersnaam. Dit menu biedt onder andere de optie om de taal te selecteren. Echter, deze taalselectie is niet bedienbaar met het toetsenbord, wat een belemmering vormt voor gebruikers die afhankelijk zijn van toetsenbordnavigatie.

Bevinding 40: Op de "Mijn boekingen" pagina worden de gemaakte parkeerreserveringen weergegeven. Elke reservering bevat een "Ga naar de boeking" link, maar deze links zijn niet bedienbaar met het toetsenbord. Dit beperkt de toegankelijkheid voor gebruikers die navigeren via het toetsenbord.

Bevinding 41: Bij het doorklikken op een specifieke reservering worden details van de reservering getoond, met aan de onderkant drie knoppen: "Annuleer", "Download" en "E-mail". Van deze drie is enkel de middelste knop, "Download", toegankelijk met het toetsenbord. De andere twee knoppen, "Annuleer" en "E-mail", kunnen niet met het toetsenbord bediend worden. Dit is een significant toegankelijkheidsprobleem voor gebruikers die afhankelijk zijn van toetsenbordnavigatie.

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 42: De meldingen op de website die kortstondig verschijnen om de acties van de bezoeker te bevestigen, zoals het invoeren van gegevens of het maken van een boeking, zijn voorzien van tijdlimieten. Dit kan een uitdaging vormen voor sommige gebruikers, zoals mensen die extra tijd nodig hebben om informatie te lezen en te verwerken. Volgens het succescriterium 2.2.1 (Timing aanpasbaar), moeten gebruikers in staat zijn om tijdslimieten uit te schakelen, aan te passen of te verlengen, tenzij de tijdslimiet absoluut noodzakelijk is. Onderaan de homepagina (https://parkeren.reserveren.rotterdam.nl/) verschijnen meldingen “Selecteer alstublieft een geldige locatie!”, “Een geldig e-mailadres is verplicht.” en “Een geldig kenteken is vereist.”
Zie succescriterium 4.1.3 voor meer voorbeelden.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 43: Op geen van de pagina's van het domein is een mechanisme aanwezig om blokken met herhalende content over te slaan. Dit kan bijvoorbeeld worden opgelost door een skiplink toe te voegen voor bezoekers die zonder muis met het toetsenbord navigeren. De skiplink is de eerste link op een pagina die verwijst naar de unieke inhoud van die pagina. De skiplink mag verborgen zijn, maar moet zichtbaar worden wanneer de toetsenbordfocus erop staat.
Zie https://parkeren.reserveren.rotterdam.nl/.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 44: Op alle pagina’s van de website is de paginatitel “Parkeren in Rotterdam”. De titel van de webpagina moet een adequate beschrijving van de inhoud van de pagina geven. Een geschikte paginatitel hoort de inhoud van de pagina te omschrijven en vervolgens gevolgd te worden door de naam van de organisatie. Zie bijvoorbeeld:

Bevinding 45: De titel van het pdf-document https://rotterdambis.notubiz.nl/document/4837966/2/document beschrijft de inhoud van het document niet correct. In het document staan algemene voorwaarden, terwijl de titel “Gemeenteblad 1999” luidt. Voor gebruikers van hulpsoftware is het voor de navigatie tussen documenten belangrijk dat de titel duidelijk maakt waar ze zijn. Dit kan worden ingesteld via de bestandseigenschappen. Hier moet ook worden ingesteld dat de titel wordt getoond in de titelbalk en niet de bestandsnaam, zoals nu het geval is.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 46: Op alle pagina’s van de website is de focusvolgorde niet logisch. Wanneer de website wordt bekeken met 200% ingezoomd, verdwijnt het hoofdmenu achter de zogenaamde hamburgerknop (drie horizontale streepjes). De focus zakt dan in het menu, loopt door de links in het menu en gaat vervolgens verder op de onderliggende pagina. Dit is niet de gewenste focusvolgorde. De focus mag het menu niet verlaten totdat de bezoeker dit scherm heeft afgesloten. Dit geldt voor alle pop-upschermen op de website. De focus mag het scherm niet verlaten.

Bevinding 47: Op de inlogpagina komt de volgorde waarin elementen focus krijgen niet overeen met de visuele volgorde van de elementen. De inlogformuliervelden ontvangen als eerste de focus, hoewel er interactieve elementen in de header zijn, zoals de link 'Home' en de taalkeuze.
Zie https://parkeren.reserveren.rotterdam.nl/account/auth/login.

Bevinding 48: Op de pagina "Mijn boekingen" zijn er twee tabbladen: "Boekingen" en "Vorige boekingen". De volgorde waarin elementen focus ontvangen volgt geen logische structuur. Na de eerste tabtitel "Boekingen" zou de focus naar de inhoud van dit tabblad moeten springen, en pas na het doorlopen van deze inhoud naar het tweede tabblad "Vorige boekingen" moeten gaan. Momenteel springt de focus eerst langs alle tabtitels voordat het naar de inhoud van de tabbladen gaat. Zie https://parkeren.reserveren.rotterdam.nl/account/bookings.

Bevinding 49: Op de website zijn vele knoppen en links geprogrammeerd op de manier waarop ze niet toegankelijk zijn voor bezoekers met vele functiebeperkingen. Een van deze tekortkomingen is het ontbreken van de toetsenbordtoegankelijkheid. Elementen die niet te bedienen zijn met het toetsenbord zijn ook niet aanwezig in de focusvolgorde. Zie gerelateerde succescriterium 2.1.1 en 4.1.2.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 50: Het logo van de website fungeert als een link naar de homepagina. Het linkdoel van deze link is onduidelijk. De link bevat geen tekst, de afbeelding van het logo is toegevoegd als een achtergrond en wordt niet voorgelezen. Geef deze link content om duidelijk te maken waar deze link naartoe leidt. Dit geldt ook voor de "Maak een nieuwe boeking" link op de pagina "Mijn boekingen". Dit zijn slechts enkele voorbeelden, ZIe:

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 51: Op het pop-upscherm met het kopje “Pre-boekingsbevestiging” staat een sluitknop. Deze knop heeft als toegankelijke naam “X”. Dit is onvoldoende om de functie van de knop te beschrijven.

Bevinding 52: Op de homepagina https://parkeren.reserveren.rotterdam.nl/ staat een zoekveld om een garage te zoeken. De velden Begindatum en Einddatum openen een kalenderwidget. In deze kalender hebben de knoppen om door de maand te bladeren de volgende toegankelijke namen: "<" en ">". De functie van de knop is niet goed beschreven.

Bevinding 53: In het pop-upvenster getiteld "Pre-boekingsbevestiging" bevindt zich een sluitknop met de toegankelijke naam "X". Deze tekst biedt onvoldoende beschrijving van de functie van de knop.
Op de homepage https://parkeren.reserveren.rotterdam.nl/ is er een zoekveld om parkeergarages te vinden. De velden voor de 'Begindatum' en 'Einddatum' activeren een kalenderwidget. De knoppen in deze widget om door de maanden te navigeren hebben de toegankelijkheidsnamen "<" en ">", wat geen duidelijke beschrijving geeft van hun functie.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 54: Op de homepage https://parkeren.reserveren.rotterdam.nl/, boven de kaart, zijn invoervelden aanwezig waar gebruikers gegevens kunnen invoeren of wijzigen. Echter, de focusindicatie voor de velden "Begintijd" en "Eindtijd" is niet zichtbaar, wat het voor gebruikers moeilijk maakt om te zien waar de focus zich bevindt.

Bevinding 55: Op de pagina "Mijn boekingen" https://parkeren.reserveren.rotterdam.nl/account/bookings komt de focus eerst op een onzichtbaar element terecht voordat deze naar de link met de gebruikersnaam gaat. Dit kan leiden tot het onbedoeld activeren van een verborgen link of knop, wat de navigatie voor gebruikers verwarrend maakt.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 56: Het logo bovenaan de pagina fungeert als een link naar de homepagina. De zichtbare tekst op het logo is niet aanwezig in de toegankelijke naam waardoor deze link niet met stem te bedienen is.
Zie https://parkeren.reserveren.rotterdam.nl/.

Bevinding 57: Op de homepagina staan interactieve elementen met zichtbare labels waarbij de labeltekst niet aanwezig is in de toegankelijke naam. Enkele voorbeelden zijn boven de kaart staan invoervelden met “Begindatum”, “Einddatum”, “Begintijd”, “Eindtijd” en het inputveld van het zoekveld. Deze elementen zijn niet met stem te bedienen.
Zie https://parkeren.reserveren.rotterdam.nl/.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 58: Op de website is een functionaliteit voor taalwisseling geïmplementeerd, waarmee gebruikers tussen Nederlands en Engels kunnen kiezen. Het is echter noodzakelijk dat deze schakelaar niet alleen de weergavetaal van de inhoud verandert, maar ook de waarde van het lang-attribuut in de HTML-code correct bijwerkt. Momenteel blijft, zelfs wanneer de Nederlandse taal is geselecteerd, het lang-attribuut ingesteld op "en". Dit resulteert in een scenario waarbij Nederlandstalige content wordt voorgelezen volgens Engelstalige uitspraakregels. Het is belangrijk dat bij selectie van Nederlands het lang-attribuut verandert naar "nl", om de toegankelijkheid en juiste voorleeservaring via schermlezers te waarborgen.

Bevinding 59: Daarnaast is in het PDF-document "Gemeenteblad 1999", beschikbaar op https://rotterdambis.notubiz.nl/document/4837966/2/document, de taalinstelling verkeerd ingesteld op Engels, terwijl de daadwerkelijke inhoud in het Nederlands is. Het is essentieel dat de taalinstelling van dit document wordt aangepast naar Nederlands om overeen te komen met de inhoud, waardoor de toegankelijkheid voor Nederlandstalige gebruikers en correcte werking met voorleessoftware wordt verbeterd.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 60: Op de Nederlandstalige pagina’s komen soms Engelstalige teksten voor die lang="en" missen. Op elke pagina van de website staat een knop met de toegankelijke naam “Back to top”. Beter is om de knop een naam te geven in de taal van de pagina.
Zie https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement

3.2 Voorspelbaar

3.2.3 Consistente navigatie (Niveau AA)

Informatie over succescriterium 3.2.3 Consistente navigatie

Uitkomst: Onvoldoende

Bevinding 61: In de footer staat een menu met links “Algemene voorwaarden”, “Privacyverklaring” en “Over ons”. Wanneer de bezoeker de pagina “Privacyverklaring” opent, verdwijnt de link “Privacyverklaring” uit het footermenu.
Zie https://parkeren.reserveren.rotterdam.nl/.

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 62: Op de website https://parkeren.reserveren.rotterdam.nl/ ontbreken toegankelijkheidsnamen voor verschillende interactieve elementen. Deze namen zijn cruciaal voor voorleessoftware om blinde of slechtziende gebruikers te informeren over de functie van deze elementen. De elementen die een toegankelijke naam missen, omvatten het logo van de organisatie, de hamburgerknop, het selectie-element voor de taal, de filterknop, en de selectie-elementen voor "Begintijd" en "Eindtijd" boven de kaart, evenals selectie-elementen in de pop-up met filters.

Bevinding 63: In het besloten deel van de website, op de pagina "Mijn boekingen" (https://parkeren.reserveren.rotterdam.nl/account/bookings), is er een link met een plusje waarmee gebruikers een nieuwe boeking kunnen toevoegen. Ook deze link mist een toegankelijke naam die de functie ervan beschrijft.
Op de homepagina heeft het inputelement van het zoekveld zijn toegankelijke naam gekregen van een placeholder tekst. Dit is de minst betrouwbare manier om een element een naam te geven. Gebruik liever een label of aan aria-label. Zie https://parkeren.reserveren.rotterdam.nl/.

Bevinding 64: De topegankelijke naam dient te worden gecontroleerd op alle interactieve elementen op de website. Zie ook SC 2.4.6.

Bevinding 65: Op de website https://parkeren.reserveren.rotterdam.nl/ zijn diverse interactieve elementen te vinden die niet correct zijn voorzien van een toegankelijkheidsrol. Het toekennen van een rol aan interactieve elementen is belangrijk voor hulptechnologieën, zoals schermlezers, omdat deze rollen helpen bij het begrijpen van de functie van elk element op een webpagina.
Enkele specifieke voorbeelden van elementen die een toegankelijkheidsrol missen, omvatten: op de homepagina zijn dat de knop "Meer resultaten weergeven", de knop om ingevoerde gegevens in het zoekveld te verwijderen, de filterknop naast het zoekveld. In de zoekresultaten zijn dat de "Doorgaan" knop die bezoekers door verschillende schermen leidt om een garage te boeken, een circle icoon met een witte pijl bedoeld om een stap terug te gaan, die geen rol heeft, de knoppen “Doorgaan” en "Boek parkeerplaats" zijn ook niet voorzien van een rol. Het zoekveld boven de kaart genereert een suggestielijst wanneer een gebruiker een waarde invoert. Deze suggestielijst mist de juiste ARIA-rol om aan te geven dat het een lijst met suggesties is. De bovenstaande opsommingen zijn niet volledig.

Bevinding 66: Sommige interactieve elementen die extra content openen of sluiten hebben een statusaanduiding nodig. Het gaat om bijvoorbeeld de filterknop, de hamburger knop, de “meer opties” knop. Dit kan worden opgelost door het toevoegen van aria-expanded attribuut. Zie https://parkeren.reserveren.rotterdam.nl/.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 67: Wanneer nieuwe informatie op het scherm verschijnt zonder dat de focus hier automatisch naartoe wordt geleid, is het essentieel dat gebruikers geïnformeerd worden over deze belangrijke wijzigingen in de content. Dit moet gebeuren op een manier die hun werk niet onnodig onderbreekt. Het gaat hierbij om de situatie als nieuwe informatie verschijnt op een pagina en dat onverwachts kan zijn voor de gebruiker.

Bevinding 68: Wanneer een bezoeker begint te typen in het zoekveld, worden suggesties weergegeven. Echter, de focus wordt niet automatisch naar deze suggesties verplaatst en ze worden niet voorgelezen door schermlezers.
Aan de onderkant van de homepagina worden foutmeldingen weergegeven, zoals “Selecteer alstublieft een geldige locatie!”, “Een geldig e-mailadres is verplicht.” en “Een geldig kenteken is vereist.” Deze meldingen zijn belangrijk voor de gebruiker maar worden niet automatisch voorgelezen door schermlezers omdat ze niet als statusberichten zijn gemarkeerd.

Bevinding 69: Tijdens verschillende stappen van het proces, van het laden van de homepagina tot de doorverwijzing naar de betaalpagina, wordt een laadanimatie getoond. Deze voortgangsinformatie wordt niet voorgelezen aan gebruikers van schermlezers.

Bevinding 70: Wanneer de sessie bijna verloopt, verschijnt er een waarschuwing, maar deze statusupdate wordt niet programmatisch gecommuniceerd aan hulptechnologieën. Het toepassen van een role="alert" of het gebruik van ARIA live regions kan ervoor zorgen dat deze berichten automatisch worden voorgelezen. Meer informatie hierover is te vinden op https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html#techniques.

Bevinding 71: Na het selecteren van een garage en het plaatsen van een definitieve boeking, verschijnt er een melding “Uw aanvraag wordt verwerkt... even geduld alstublieft. U wordt binnenkort doorgestuurd naar een betaalpagina.” Dit is een belangrijk statusbericht dat niet automatisch voorgelezen wordt door schermlezers. Door het toevoegen van het attribuut role="status" aan dit bericht, wordt de inhoud automatisch voorgelezen zonder dat de focus hoeft te wijzigen.

Bevinding 72: Bij het aanmaken van een account wordt een kortdurende melding weergegeven. Deze snelle statusupdate wordt niet als zodanig gecommuniceerd aan hulptechnologieën.

Bevinding 73: In het afgeschermde deel van de website, op de pagina "Mijn profiel en instellingen", is een knop die een schakelaar voorstelt. Na het klikken op deze knop verschijnt er een melding "Instellingen opgeslagen" aan de bovenkant van het scherm. Hoewel deze informatie niet kritiek is, is de melding onjuist gemarkeerd met role="alertdialog", wat bedoeld is voor kritische waarschuwingen. Een betere keuze zou role="alert" of role="status" zijn voor dergelijke niet-kritieke meldingen. Dit geldt ook voor een soortgelijke melding die verschijnt op de pagina "Account aanmaken" nadat een gebruiker het registratieformulier succesvol heeft ingevuld en op "Account aanmaken" heeft geklikt.

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

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-03-14 14:32:59 v2.5-011