Bevindingen voor je spreadsheet: Audit digitale toegankelijkheid website Parkeren in Rotterdam

Naam website	Parkeren in Rotterdam
Scope	Alle pagina's op parkeren.reserveren.rotterdam.nl Niet de pagina's op rotterdam.nl (onderdeel van een ander onderzoek)

`nr`	`Bevinding`	`WCAG SC`	`Mogelijk verantwoordelijk`	`Status`
`1`	`In de cookie-instellingen widget staat onder de kop “Uw huidige stand” een opsomming. Voor het item “Noodzakelijk” staat een afbeelding van een slotje, die aangeeft dat dit onderdeel niet kan worden aangepast. Het tekstalternatief is echter “Consent given”. Dat geeft niet de betekenis van de afbeelding weer. Pas dit daarom aan en gebruik hiervoor een Nederlandstalige omschrijving.`	`1.1.1`	`techniek, content, visuele vormgeving`
`2`	Op alle pagina’s staat links onderin de pagina een knop die wordt weergegeven met een afbeelding van een paperclip. Als deze wordt geactiveerd dan opent er een popup-venster. Hierin staan de kopteksten “Cookie-instellingen”, “Uw huidige stand”, “Datum van toestemming:” en “Uw toestemming ID:”. Deze zijn opgemaakt met een strong-element, maar zijn niet opgemaakt als echte koppen. Het strong-element is niet bedoeld om kopteksten vetgedrukt weer te geven. Verwijder hier het strong-element en maak de koppen op met de juiste HTML-code.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`3`	Op de homepagina zijn labels die niet geassocieerd met de erbij horende invoervelden. Tekstlabels moeten gekoppeld worden aan invoervelden door gebruik te maken van het for-attribuut bij het label-element die verwijst naar een id-attribuut bij het invoerveld. Zo krijgt een bezoeker die gebruikmaakt van schermlezersoftware direct te horen om welk veld het gaat als direct naar het invoerveld wordt gesprongen. En zijn de velden met spraak en met de muis makkelijker bereikbaar. Zie https://parkeren.reserveren.rotterdam.nl.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`4`	Als je op pagina https://parkeren.reserveren.rotterdam.nl een datum (zowel Begindatum als Einddatum) bewerkt verschijnt er een kalender. Deze kalender is opgebouwd via een table. Bovenaan deze tabel staan de dagen afgekort, "ma.", "di.". Deze staan netjes in een tabelkop (th-element) echter de namen van deze tebelkoppen zijn allemaal via aria-label omgezet naar "weekday". Zo weet iemand die door de tabel navigeert en gebruikmaakt van schermleessoftware niet om welke dag het gaat. Elke kolom heet nu "weekday". Geef elke kolom de juiste dagnaam, dus "Maandag", "Dinsdag", etc. zodat de datum en dag correct wordt voorgelezen. Geef voor de zekerheid elke th in de eerste rij als attribuut ook het bereik mee (scope="col") Bij hercontrole is gebleken dat in de tabelkop de naam weeknummer en de namen van de dagen zijn toegevoegd. Echter staan deze in de verkeerde kolom. De eerste cel in de eerste is overgeslagen zodat 'weeknummer' in de kolom van 'maandag' staat.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`5`	Als je op pagina https://parkeren.reserveren.rotterdam.nl een datum (zowel Begindatum als Einddatum) bewerkt verschijnt er een kalender. Deze kalender heeft in de eerste kolom weeknummers staan. Deze weeknummers geven betekenis aan de regel en moeten dus met een th-element opgemaakt worden. Tevens moet je er het bereik aan meegeven via het scope-attribuut (scope="row"). Tot slot moet deze kolom een in de (eerste regel in de tabel) de naam "weeknummer" krijgen. Deze tekst hoeft visueel niet zichtbaar te zijn.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`6`	`Op pagina https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement is de kop "Privacyverklaring" niet opgemaakt als een HTML-kop en dat moet wel. Dit is de belangrijkste kop van de pagina, dus gebruik hiervoor bij voorkeur het h1-element.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`7`	`In de footer op pagina’s https://parkeren.reserveren.rotterdam.nl/ bevindt zich het footermenu. Dit menu is opgenomen in een geneste opsomming. Dat is hier niet nodig en niet correct. Verwijder daarom de opsomming (ul- en li-element). Dit footermenu komt op veel pagina's voor, waaronder op - https://parkeren.reserveren.rotterdam.nl/book/bookingError - https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement.`	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`8`	Op pagina https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement is alle content onder de kop "Privacyverklaring" opgenomen in een definitielijst (dl-element). Alle kopjes, vanaf "Introductie" tot en met "Contactgegevens Autoriteit persoonsgegevens", zijn opgemaakt met het dt-element en de erbij horende content, de alinea's en/of opsommingen, zijn opgenomen in een dd-element. Een definitielijst is hier niet de juiste keuze. Pas dit aan door het dl-element en alle dt- en dd-elementen te verwijderen. Maak van de kopteksten echte koppen en plaats de alinea's binnen een p-element. De opsommingen zijn al correct opgemaakt met een ul-element, dus dat kan zo blijven.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`9`	In de PDF "privacystatement.pdf" staan op pagina 1 in de code twee h2-koppen direct na elkaar. Het gaat om de koppen “Parkeren in gemeentelijke parkeergarages …” en “November 2023”. Dat is niet correct. Logisch beschouwd lijkt dit één kop te moeten zijn. Voeg deze teksten daarom samen binnen één H2-tag en haal de 3e H2-tag die leeg is weg. Visueel mag het er wel hetzelfde uit blijven zien. Daarmee wordt ook een ander probleem verholpen, namelijk dat de kop “Parkeren in gemeentelijke parkeergarages …” geen content heeft. Een kop mag namelijk geen kop van eenzelfde niveau bevatten en dat is nu wel het geval. Zie: https://static.mp.bookandpark.nl/rotterdam/privacystatement.pdf?_gl=1196lykt_gcl_au*MTMwODc5NDcyMC4xNzQ1NTg2ODcw.	`1.3.1`	`techniek, interactieontwerp, content, visuele vormgeving`
`10`	`De actieve link in de paginanavigatie op pagina https://parkeren.reserveren.rotterdam.nl/account/bookings is alleen herkenbaar omdat deze een andere kleur heeft dan de niet-actieve pagina's. Deze informatie is niet beschikbaar voor gebruikers van hulpsoftware. Los dit op door bijvoorbeeld het attribuut aria-current="page" toe te voegen aan het actieve menu-item.`	`1.4.1`	`interactieontwerp, visuele vormgeving`
`11`	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 kleurcontrastverhouding 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 minimumcontrastverhouding van 4,5:1 te bereiken. Voor tekst groter dan 24px is een minimumkleurcontrastverhouding van 3,0:1 toereikend. Als er bijvoorbeeld over de knop “+ Boek een parkeerplaats” wordt gehoverd, dan is het contrastverschil tussen de witte tekst en de lichtergroene achtergrond met 2,7:1 te laag. Dit moet minimaal 4,5:1 zijn. Hieronder volgen nog een aantal voorbeelden. Controleer dit voor alle pagina's.	`1.4.3`	`interactieontwerp`
`12`	`Op de pagina https://parkeren.reserveren.rotterdam.nl/ is onder de knop zoekfilter de mogelijkheid om te filteren op oplaadmogelijkheid en autohoogte. De knop "TOEPASSEN" heeft een te laag contrast. De contrastverhouding is ongeveer 2,2:1 waar dit 4,5:1 moet zijn.`	`1.4.3`	`interactieontwerp`
`13`	Op alle pagina’s staat links onderin de pagina een knop, die wordt weergegeven met een paperclip. Als deze wordt geactiveerd dan opent er een popup-venster. De contrastverhouding van de groene tekst op de knoppen “Details tonen” en “Geen details” is met 4,4:1 te laag ten opzichte van de witte achtergrond. En ook die witte tekst “Verander uw toestemming” heeft ten opzichte van de groene achtergrond een te laag contrast. Wanneer er over deze knoppen gehoverd wordt, is het contrast nog lager. Zorg dat de contrastverhouding minimaal 4,5:1 is, ook bij hover en focus.	`1.4.3`	`interactieontwerp`
`14`	`Onderaan het cookievenster staat de knop “Weigeren”. De contrastverhouding tussen de groene tekst en de lichtgrijze achtergrond is met 4,1:1 te laag. Dit moet minimaal 4,5:1 zijn. Hetzelfde doet zich voor met de knop “Selectie toestaan” die zichtbaar wordt als de knop “Cookie details tonen” wordt geactiveerd.`	`1.4.3`	`interactieontwerp`
`15`	`Onderaan het cookievenster staat de link “Cookiebot”. De contrastverhouding tussen de blauwe tekst en de lichtgrijze achtergrond is 4,1:1, maar moet minimaal 4,5:1 zijn. Dit is ook het geval als de link focus krijgt. En als er over de link gehoverd wordt verandert de kleur van de tekst naar groen. Ook hier is de contrastverhouding te laag met 3,9:1.`	`1.4.3`	`interactieontwerp`
`16`	`Op pagina https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement contrasteren de blauwe links, waaronder “Parkeren Rotterdam privacybeleid” en “Rotterdam privacybeleid”, onvoldoende met de witte achtergrond. De contrastverhouding is 4,3:1, maar moet minimaal 4,5:1 zijn. Ook bij focus is het contrast te laag.`	`1.4.3`	`interactieontwerp`
`17`	`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, vooral in combinaties van grijs en wit, net als het eerder genoemde groen met wit.`	`1.4.3`	`interactieontwerp`
`18`	`Op elke pagina staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1" en "user-scalable=no". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.`	`1.4.4`	`interactieontwerp, content`
`19`	`Bij een schermgrootte van 1280px bij 1024px ingezoomd wordt tot 400% is niet alle informatie binnen het mobiele menu meer zichtbaar.`	`1.4.10`	`interactieontwerp, content`
`20`	`Bij een schermgrootte van 1280px bij 1024px ingezoomd wordt tot 400% is bij de cookiemelding (popup) een deel van het logo van de gemeente Rotterdam niet zichtbaar.`	`1.4.10`	`interactieontwerp, content`
`21`	Op de website worden diverse tinten groen gebruikt als focusindicator. 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. Op pagina https://parkeren.reserveren.rotterdam.nl/account/bookings staat de checkbox “Ja, bewaar mijn boekingsgeschiedenis.”. Als deze focus krijgt verschijnt er een lichtgroene focusindicator omheen. Deze contrasteert onvoldoende met de witte achtergrond. Dit moet minimaal 3,0:1 zijn.	`1.4.11`	`interactieontwerp`
`22`	`Als op pagina https://parkeren.reserveren.rotterdam.nl/account/auth/signup de knop “Account maken” focus krijgt verschijnt er een lichtgroene rand omheen. Deze rand contrasteert met 1,7:1 onvoldoende met de witte achtergrond. Het contrast moet minimaal 1,7:1. Zorg voor een goed zichtbare focusindicator.`	`1.4.11`	`interactieontwerp`
`23`	Op pagina https://parkeren.reserveren.rotterdam.nl/ staan onder de kop “Beschikbare parkeerplaatsen” blokken met parkeerplaatsen. Bij elk blok staan afbeeldingen met informatie, waaronder een icoon van een lift een rolstoel enzovoorts. Als hier overheen gehoverd wordt met de muis verschijnt er aanvullende content. De bezoeker kan deze content niet weghalen zonder de muis te bewegen of de focus met het toetsenbord te verplaatsen. Een bezoeker moet dit bijvoorbeeld met de escape toets kunnen doen. Ook moet deze content aanwijsbaar zijn en dat is nu ook niet het geval. Er wordt veelvuldig gebruikgemaakt van aanvullende content onder hover of focus. Controleer dit voor alle pagina's.	`1.4.13`	`techniek, interactieontwerp, content`
`24`	`Als in het cookievenster de knop “Cookie details tonen” wordt geactiveerd verschijnt er extra inhoud. Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen de checkbox “Noodzakelijk (2)” niet gebruiken. Hierdoor missen zij de browsermelding die wel beschikbaar is voor gebruikers die een muis gebruiken. Zorg ervoor dat alle elementen die bereikbaar en bedienbaar zijn met de muis ook beschikbaar zijn met het toetsenbord.`	`2.1.1`	`techniek, content`
`25`	Op pagina https://parkeren.reserveren.rotterdam.nl/ staan onder de kop “Beschikbare parkeerplaatsen” blokken met parkeerplaatsen. Bij elk blok staan afbeeldingen met informatie, waaronder een icoon van een lift een rolstoel enzovoorts. Als hier overheen gehoverd wordt met de muis verschijnt er extra informatie. Deze functionaliteit is niet met het toetsenbord beschikbaar en dat moet wel. Dit doet zich ook voor als er bijvoorbeeld over de tijdsduur en de prijs wordt gehoverd. Controleer dit voor alle elementen.	`2.1.1`	`techniek, content`
`26`	Op pagina https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement bevindt zich onderin de viewport een div-element met een afbeelding van een groene cirkel met een pijltje omhoog die bedoeld is om naar het begin van de pagina te gaan. Dit element is alleen met de muis te bedienen. Zorg ervoor dat dit ook met het toetsenbord werkt. Bij hercontrole blijkt deze link nog steeds niet te werken. Dit komt met name door de tabvolgorde van de pagina. Gebruik geen tabindex met een waarde groter dan nul.	`2.1.1`	`techniek, content`
`27`	Op de website zijn er meerdere links die niet direct via het toetsenbord te bedienen zijn. Voorbeelden hiervan zijn de links in het hoofdmenu, zoals "Veelgestelde vragen" en "Inloggen", evenals links in het mobiele menu en alle links in de footer. Dit probleem ontstaat doordat de href-attributen bij deze links is verwijderd, waardoor ze niet toegankelijk zijn met het toetsenbord. De focus komt dan ook niet op de link, maar op het omvattende element, dat actief is gemaakt met javascript. Dat is niet de bedoeling. Zorg ervoor dat de link voorzien wordt van het href-attribuut en dat de focus daarop komt. Voor meer informatie, zie https://parkeren.reserveren.rotterdam.nl/.	`2.1.1`	`techniek, content`
`28`	Op de website zijn er diverse knoppen die niet met het toetsenbord bediend kunnen worden. Dit betreft onder andere de knop om ingevoerde zoekopdrachten te verwijderen 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 zijn te activeren. Een specifiek probleem doet zich voor op de homepage: wanneer een gebruiker probeert gegevens in te voeren in het veld "Begintijd", dan opent er een datepicker. Deze datepicker is niet geheel 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 goed in te vullen zonder bijvoorbeeld een muis te gebruiken.	`2.1.1`	`techniek, content`
`29`	`Op de pagina "Mijn boekingen" op de website https://parkeren.reserveren.rotterdam.nl/account/bookings, bevindt zich in de header van de pagina een keuzelijst 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.`	`2.1.1`	`techniek, content`
`30`	`Wanneer in het formulier op pagina https://parkeren.reserveren.rotterdam.nl/account/auth/login een formulierveld niet goed wordt ingevuld, verschijnt er een foutmelding. Deze melding verdwijnt na enige tijd, waardoor sommige bezoekers niet voldoende tijd hebben om de melding te lezen. Zorg ervoor dat foutmeldingen blijven staan totdat de bezoeker de fout heeft opgelost. Hetzelfde doet zich voor op pagina https://parkeren.reserveren.rotterdam.nl/account/auth/signup.`	`2.2.1`	`techniek, content`
`31`	`In het formulier op pagina https://parkeren.reserveren.rotterdam.nl/book/booking/ staat een veld waarin het kentekennummer moet worden ingevoerd. Na een tijdje verschijnt de melding "Oeps, de boeking is niet gelukt ...". Ook hier is geen mogelijkheid om deze tijdslimiet uit te stellen. Controleer dit voor alle formuliervelden op de website.`	`2.2.1`	`techniek, content`
`32`	`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.1`	`techniek, content`
`33`	`Op onder andere pagina https://parkeren.reserveren.rotterdam.nl/ en https://parkeren.reserveren.rotterdam.nl/account/auth/expired bevat de paginatitel alleen de naam van de organisatie, namelijk "Parkeren in Rotterdam". Dat is niet voldoende. Er moet ook een beschrijving van de pagina aanwezig zijn. Ook pagina https://parkeren.reserveren.rotterdam.nl/book/bookingError mist een beschrijving van de pagina. Controleer dit voor alle pagina’s.`	`2.4.2`	`content, visuele vormgeving`
`34`	`Advies: Op pagina https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement is de paginatitel Privacyverklaring. Dat is in principe voldoende, maar het is wel beter om tevens de naam van de organisatie te vermelden. Liefst achteraan. Ook op pagina’s https://parkeren.reserveren.rotterdam.nl/account/auth/login en https://parkeren.reserveren.rotterdam.nl/account/auth/signup ontbreekt de naam van de organisatie.`	`2.4.2`	`content, visuele vormgeving`
`35`	De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookievenster over de pagina heen. Dit venster krijgt niet als eerste focus. Dit belemmert het gebruik van de website voor bezoekers die met het toetsenbord navigeren. Zij kunnen dan niet altijd zien waar de focus zich bevindt en ook moeten zij eerst door de hele pagina heen met de tabtoets navigeren voordat ze bij het cookievenster komen. Zorg dat de focus direct naar het venster gaat en er niet buiten kan komen, totdat een keuze is gemaakt. Er zijn meer problemen met dit venster, deze staan beschreven bij SC 2.4.6 en SC 4.1.2.	`2.4.3`	`techniek, content`
`36`	`Als op pagina https://parkeren.reserveren.rotterdam.nl/ een van de knoppen “Boek parkeerplaats” wordt geactiveerd dan opent de pagina https://parkeren.reserveren.rotterdam.nl/book/booking/. De focus gaat dan direct naar het invoerveld “Kenteken”, terwijl erboven meer invoer aanwezig is en de tekst door hulpsoftware overgeslagen wordt. De focus moet dan bovenaan de pagina staan, zodat duidelijk is wat er allemaal getoond wordt op de pagina.`	`2.4.3`	`techniek, content`
`37`	`In het pop-up venster “Pre-boekingsbevestiging” op pagina https://parkeren.reserveren.rotterdam.nl/book/booking kun je als je met de tabtoets verder navigeert het dialoogvenster verlaten. Daardoor kan je niet meer zien waar je bent. Zorg dat je het dialoogvenster pas kan verlaten als deze gesloten wordt.`	`2.4.3`	`techniek, content`
`38`	`Op pagina https://parkeren.reserveren.rotterdam.nl/account/auth/login staat de link “Wachtwoord vergeten?”. De focus komt hier pas op nadat deze eerst op de link “Account maken” is geweest. Dit is geen logische volgorde. Plaats deze link ook bij voorkeur buiten het label-element. ![screenshot 2](screenshot02.png)`	`2.4.3`	`techniek, content`
`39`	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.	`2.4.3`	`techniek, content`
`40`	`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.`	`2.4.3`	`techniek, content`
`41`	Op pagina https://parkeren.reserveren.rotterdam.nl/ staat bovenaan de pagina een link met het logo van de gemeente Rotterdam. Het doel van de link is nu niet voldoende duidelijk. Bij SC 1.1.1 staat beschreven wat een goed tekstalternatief is dat ook een goede linktekst geeft. Dit doet zich voor op meerdere pagina’s, waaronder https://parkeren.reserveren.rotterdam.nl/book/bookingError en https://parkeren.reserveren.rotterdam.nl/book/help/privacy-statement. Bij hercontrole is gebleken dat dit deels is opgelost. Op de pagina's die je ziet als je ingelogd bent ontbreekt nog een goede naam.	`2.4.4`	`techniek, interactieontwerp, content, visuele vormgeving`
`42`	Op alle pagina’s staat links onderin de pagina een knop, die wordt weergegeven met een paperclip. De toegankelijke naam bevindt zich in het aria-label op de knop en is “Open widget”. Dat beschrijft onvoldoende het doel van deze knop. Maak hier bijvoorbeeld van “Ga naar cookie-instellingen”. Als deze knop wordt geactiveerd dan gaat de focus naar de knop “Close widget”. Ook dat is geen duidelijke naam en bovendien Engelstalig. Wijzig dit bijvoorbeeld in “Sluit cookie-instellingen”. Bij hercontrole is de naam van de widget-knop aangevuld met "CMP" n heet de knop bijvoorbeeld "Open CMP widget". Dit is geen duidelijke naam.	`2.4.6`	`techniek, visuele vormgeving`
`43`	`Op alle pagina’s staat links onderin de pagina een knop, die wordt weergegeven met een paperclip. Als deze wordt geactiveerd dan opent er een popup-venster. Als de knop “Details tonen” wordt geactiveerd verandert de naam van de knop in “Geen details”. Dit beschrijft niet het doel van de knop. Verander dit daarom in bijvoorbeeld “Details verbergen”.`	`2.4.6`	`techniek, visuele vormgeving`
`44`	`De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookievenster over de pagina heen. Dit venster heeft als naam “Wij waarderen jouw privacy”. Dat is geen duidelijke naam. Als de oplossing wordt toegepast zoals voorgesteld bij SC 3.2.2 is het probleem opgelost. De toegankelijke naam is namelijk gekoppeld aan deze koptekst met aria-describedby en verandert mee als de koptekst wordt aangepast.`	`2.4.6`	`techniek, visuele vormgeving`
`45`	`Het popup-venster “Pre-boekingsbevestiging” op pagina https://parkeren.reserveren.rotterdam.nl/book/booking/ mist een toegankelijke naam. Gebruik hiervoor bijvoorbeeld de kop “Pre-boekingsbevestiging”. Dit kan door gebruik te maken van het attribuut aria-labelledby en deze te laten verwijzen naar deze kop.`	`2.4.6`	`techniek, visuele vormgeving`
`46`	`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: "<" (kleiner dan) en ">" (groter dan). De functie van de knop is niet goed beschreven. Geef de knoppen een naam waaruit blijkt wat de knop doet.`	`2.4.6`	`techniek, visuele vormgeving`
`47`	`Op pagina https://parkeren.reserveren.rotterdam.nl/account/bookings komt de focus na het paginamenu op een lege link (routerLink). De focus is dan niet zichtbaar. Als het de bedoeling is dat deze link geen focus krijgt, zorg er dan voor dat deze niet bereikbaar is.`	`2.4.7`	`interactieontwerp, content`
`48`	`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. Zo zijn er meer actieve elementen waarop de focus niet zichtbaar is. Controleer dit voor alle pagina's.`	`2.4.7`	`interactieontwerp, content`
`49`	`Advies: Als je op pagina https://parkeren.reserveren.rotterdam.nl/account/auth niet dezelfde wachtwoorden invoert komt er geen melding en blijft de knop “Verder” op disabled staan. Dit is voor iedereen een probleem, maar bezoekers die blind zijn hebben dan totaal geen idee wat er fout is. Het advies is om hier te voorzien in een duidelijke foutmelding.`	`3.3.1`	`techniek`
`50`	`De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookievenster over de pagina heen. De koptekst “Wij waarderen jouw privacy” dekt niet voldoende de lading van de content onder de kop. Los dit bijvoorbeeld op door deze kop aan te passen naar “Cookie-instellingen”.`	`3.3.2`	`techniek`
`51`	`De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookievenster over de pagina heen. Dit popup-venster heeft al de rol role="dialog" maar mist nog het attribuut aria-modal=”true”. Voeg dit alsnog toe en zorg dat de onderliggende content "inert" is. Bij hercontrole is gebleken dat de rol en het attribuut zijn togvoegd. De onderliggend content is echter nog steeds bereikbaar.`	`4.1.2`	`techniek, content, visuele vormgeving`
`52`	`Wanneer een bezoeker begint te typen in het zoekveld (Plaats), worden suggesties weergegeven. Typ je bijvoorbeeld "schietbaan" dan worden er 3 resultaten getoond. Als de bezoeker hier doorheen navigeert leest schermleessoftware dit voor als "schietbaan" in plaats van de volledige huisadressen die in beeld staan. Zorg dat de volledige tekst wordt voorgelezen.`	`4.1.2`	`techniek, content, visuele vormgeving`
`53`	Op alle pagina’s staat links onderin de pagina een knop, die wordt weergegeven met een paperclip. Als deze wordt geactiveerd dan opent er een popup-venster. Dit venster mist een rol en een naam. Los dit op door op het div-element de attributen `role=”dialog”` en `aria-modal=”true”` te plaatsen. En voorzie dit element vervolgens ook van een naam. Gebruik daarvoor bijvoorbeeld het attribuut aria-label of aria-labelledby.	`4.1.2`	`techniek, content, visuele vormgeving`
`54`	Nadat er is ingelogd opent pagina https://parkeren.reserveren.rotterdam.nl/account/bookings en verschijnt er een popup-venster. Dit venster heeft een rol, namelijk role=”dialog”, maar mist nog het attribuut `aria-modal=”true”`. Ook mist het venster een naam. Voeg dit attribuut alsnog toe en voorzie dit element vervolgens ook van een naam die het venster beschrijft. Gebruik daarvoor bijvoorbeeld het attribuut aria-label of aria-labelledby. En zorg ervoor dat alle content buiten de popup "inert" is.	`4.1.2`	`techniek, content, visuele vormgeving`
`55`	`Sommige interactieve elementen die extra content openen of sluiten hebben een statusaanduiding nodig. Het gaat om bijvoorbeeld de hamburger knop. En bij de filterknop wordt wel aria-expanded gebruikt, maar wordt de status niet aangepast. Dit kan worden opgelost door het correct implementeren van het attribuut aria-expanded. Zie https://parkeren.reserveren.rotterdam.nl/.`	`4.1.2`	`techniek, content, visuele vormgeving`
`56`	`Op pagina https://parkeren.reserveren.rotterdam.nl/ bevindt zich een knop met de naam "Meer opties". De status is samengevouwen. Zodra je de knop bedient komt er content te voorschijn. De status van de knop "uitgevouwen" wordt niet gesignaleerd door hulpsoftware. Iemand die het scherm niet kan zien heeft geen idee dat er nieuwe content in beeld is, of dat de content weer verborgen is. Zorg voor een goede afhandeling van de status (aria-expanded).`	`4.1.3`	`techniek, content`
`57`	`Als je op pagina https://parkeren.reserveren.rotterdam.nl een datum (zowel Begindatum als Einddatum) bewerkt verschijnt er een kalender. Zorg ervoor dat bij openen van de kalender duidelijk is in welke maand en jaar de bezoeker een keuze maakt van de dag. Met schermleessoftware wordt alleen het nummer van de dag genoemd, bijvoorbeeld 22. Dit geldt ook als met de bladerknoppen door de maanden bladert. Ook dan is niet duidelijk wat er in beeld verschijnt.`	`4.1.3`	`techniek, content`
`58`	Wanneer bezoekers in het formulier op pagina https://parkeren.reserveren.rotterdam.nl/account/auth/login een formulierveld niet goed invullen, verschijnt er zonder dat de pagina ververst een melding, bijvoorbeeld de melding “Sorry. Er is een probleem opgetreden bij het inloggen”. Blinden en slechtzienden die met voorleessoftware werken krijgen geen signaal dat er iets is gewijzigd en dat er foutmeldingen staan op het scherm. Los dit op met bijvoorbeeld role="alert". Dit doet zich op meerdere pagina’s voor, waaronder https://parkeren.reserveren.rotterdam.nl/account/auth/signup en op pagina https://parkeren.reserveren.rotterdam.nl/book/booking. Controleer dit voor alle pagina’s.	`4.1.3`	`techniek, content`
`59`	`Op de homepagina worden foutmeldingen weergegeven, zoals “Sorry, geen parkeerplaats beschikbaar. ...”. Deze meldingen zijn belangrijk voor de gebruiker maar worden niet automatisch voorgelezen door schermlezers omdat ze niet als statusberichten zijn gemarkeerd.`	`4.1.3`	`techniek, content`
`60`	`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.`	`4.1.3`	`techniek, content`
`61`	`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.`	`4.1.3`	`techniek, content`
`62`	`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.`	`4.1.3`	`techniek, content`
`63`	`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.`	`4.1.3`	`techniek, content`

Bevindingen voor je spreadsheet:
Audit digitale toegankelijkheid website Parkeren in Rotterdam

Scope van de evaluatie

Uitgebreide toetsresultaten

Onderbouwing van de evaluatie

Steekproef getoetste webpagina's

Ondersteunende technieken

Webbrowsers (useragents) en andere software

Bronnen