Onderzoek toegankelijkheid www.parkeren050.nl
Inleiding
Openbare voorzieningen moeten bruikbaar en toegankelijk zijn voor alle burgers. Net zoals een gebouw rolstoeltoegankelijk moet zijn, moet een website of mobiele app ook bediend kunnen worden door mensen met een beperking. Dit kunnen bijvoorbeeld visuele, auditieve of motorische beperkingen zijn. Denk aan slechtzienden, doven en slechthorenden en mensen die hun handen niet of in beperkte mate kunnen gebruiken. Ook cognitieve factoren spelen een rol: is de content voor iedereen te begrijpen?
Nederlandse overheidsorganisaties moeten voldoen aan de Web Content Accessibility Guidelines (WCAG) versie 2.1, onder de Europese standaard voor overheidswebsites EN 301 549. Deze criteria variëren van technisch functionele eisen zoals een goede werking met het toetsenbord tot aan meer inhoudelijke eisen zoals duidelijke foutmeldingen en een heldere navigatiestructuur.
Dit onderzoek is handmatig uitgevoerd volgens de WCAG-EM evaluatiemethode met ondersteuning van automatische test tools. De pagina’s uit de sample zijn onderzocht op alle 50 criteria onder WCAG 2.1 A en AA. Wanneer aan een criterium niet wordt voldaan, wordt hiervan minimaal één voorbeeld gegeven. Deze bevindingen kunnen op meer plekken voorkomen en moeten daarom structureel worden aangepakt.
De WCAG criteria zijn ingedeeld volgens vier principes, welke ook de leidraad vormen voor dit rapport: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Gedetailleerde informatie over deze criteria is te vinden op de website van het W3C (Nederlandse vertaling).
Over deze evaluatie
- Rapport auteur
- Julia Zjochova
- Evaluatie opdrachtgever
- Gemeente Groningen
- Evaluatiedatum
- 7 juni 2024
Managementsamenvatting
Uit dit onderzoek blijkt dat wordt voldaan aan 47 van de 55 criteria voor toegankelijkheid (42 van de verplichte 50 criteria). Veel onderdelen van de site zijn dus al goed toegankelijk, maar er zijn nog verbeteringen mogelijk.
Positief is bijvoorbeeld er geen zintuiglijke eigenschappen worden gebruikt om betekenis over te brengen, dat blokken met herhalende links omzeild kunnen worden en dat er een consistente navigatie aanwezig is.
Verbeteringen zijn echter nog mogelijk op diverse punten, zoals:
- Onjuiste of missende alt-teksten bij afbeeldingen
- Onjuist opgemaakte koppen en lijsten
- De focusvolgorde is niet overal logisch
Naast de verplichte WCAG 2.1 criteria zijn ook de in WCAG 2.2 toegevoegde criteria op niveau A en AA onderzocht. Hierbij waren er geen bevindingen.
Scope van de evaluatie
- Website naam
- www.parkeren050.nl
- Scope van de website
- Alle pagina's op www.parkeren050.nl.
- WCAG Versie
- 2.2
- Conformiteitsdoel
- AA
- Basisniveau van toegankelijkheid-ondersteuning
- Gangbare browsers en hulpapparatuur.
- Verdere onderzoeksvereisten
- Niet ingevuld
Uitgebreide toetsresultaten
Samenvatting
Gerapporteerd over 55 van 55 WCAG 2.2 AA Success Criteria.
- 38 Voldoende
- 7 Onvoldoende
- 10 Niet van toepassing
- 0 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.1.1: Niet-tekstuele content | Uitkomst: Onvoldoende | Bevindingen: Een informatieve afbeelding vereist een tekstalternatief. Dit stelt de schermlezer in staat om de informatie of functie van de afbeelding over te brengen aan een blinde bezoeker. Op alle pagina's staat in de header een link om de taal te wijzigen. Een pijl omlaag geeft aan om dat hier een submenu aanwezig is. Er is geen tekstalternatief voor deze informatie. https://www.parkeren050.nl Op de pagina "Parkeergarages" staan tegels met verschillende parkeergarages. Elke tegel bevat informatieve iconen, bijvoorbeeld de afbeelding van een rode cirkel met de tekst '2.05'. Deze afbeelding heeft een leeg alt-attribuut. Als een informatieve afbeelding wordt toegevoegd via een img-element, mag het alt-attribuut niet leeg zijn. Geef deze afbeelding alt=”Max. Doorrijhoogte”. https://www.parkeren050.nl/parkeren-groningen https://www.parkeren050.nl/buurtstallingen-groningen https://www.parkeren050.nl/umcg Op de pagina "Parkeergarage Forum", onder het kopje "Betaalmogelijkheden", staat een afbeelding met de alternatieve tekst "Cash only". Er is meer tekst op deze afbeelding te zien. Er was een poging gedaan om de volledige tekst van de afbeelding in de alt-tekst te plaatsen, maar de aanhalingstekens zijn op een verkeerde plek afgesloten. https://www.parkeren050.nl/parkeren-groningen/parkeergarage-forum https://www.parkeren050.nl/parkeren-groningen/parkeergarage-circus Op de pagina https://www.parkeren050.nl/parkeren-groningen/parkeergarage-forum staat onder het kopje "Betaalmogelijkheden" een afbeelding waarin het titel-attribuut "Contactloos in- en uitrijden" bevat. Deze tekst herhaalt de aangrenzende tekst. Het title-attribuut wordt niet door alle schermlezers voorgelezen. Toch is het beter om deze tekst te verwijderen om de herhaling te voorkomen. In beide PDF-documenten “algemene voorwaarden behorend bij eenmalige parkeerovereenkomsten” en “algemene voorwaarden behorend bij stallingsovereenkomsten voor abonnementhouders” staan logo's van de gemeente Groningen die toegevoegd zijn als achtergrondafbeeldingen. De informatie in deze afbeeldingen is ontoegankelijk voor blinde bezoekers en gebruikers van screenreaders. Informatieve afbeeldingen moeten via een figuur-tag worden geplaatst en worden voorzien van een beschrijving Op de pagina 'Adverteren in een parkeervoorziening', onder het kopje 'Adverteren in een parkeervoorziening', staat een decoratieve afbeelding. De tekst is alternatief voor 'Bijschrift'. Een decoratieve afbeelding voegt geen informatie toe aan de pagina en moet verborgen worden voor de schermlezer. Er zijn verschillende mogelijke oplossingen. Afbeeldingen die worden toegevoegd via een img element hebben een leeg alt attribuut nodig Het volgende is slechts een advies. Op alle pagina's, in de header, staat het logo met de tekst in het alt-attribuut 'Logo Parkeren050'. Het woord 'Logo' kan worden verwijderd, omdat schermlezers melden dat het een afbeelding is. Dezelfde situatie doet zich voor in de footer, met de logo's 'Logo Gemeente Groningen' en 'Logo Stad Groningen'. https://www.parkeren050.nl |
1.2 Op tijd gebaseerde media
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen) | Uitkomst: Niet van toepassing | |
| 1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen) | Uitkomst: Niet van toepassing | |
| 1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen) | Uitkomst: Niet van toepassing | |
| 1.2.4: Ondertitels voor doven en slechthorenden (live) | Uitkomst: Niet van toepassing | |
| 1.2.5: Audiodescriptie (vooraf opgenomen) | Uitkomst: Niet van toepassing |
1.3 Aanpasbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.3.1: Info en relaties | Uitkomst: Onvoldoende | Bevindingen: Op de pagina "Adverteren in een parkeervoorziening" is de volgende tekst opgemaakt met een strong-element: "1. Ticketreclame", "2. Billboards" en "3. Foto- of filmlocatie" in plaats van kopjes Op de pagina “Toegankelijkheidsverklaring” onder de afbeelding staat een geordende lijst met vier items. De juiste opmaak ontbreekt. De juiste opmaak voor de geordende lijst is ol- en li-elementen. Inhoud die wordt weergegeven als een lijst moet als zodanig worden opgemaakt om een blinde bezoeker dezelfde informatiestructuur te bieden als op de pagina te zien is. Een ander voordeel van het gebruik van een lijst is dat de schermlezer het aantal items aankondigt voordat ze worden voorgelezen. Zo weet een blinde bezoeker hoeveel informatie er volgt. https://www.parkeren050.nl/toegankelijkheidsverklaring Op alle pagina's, in de header, staan links om de taal te wijzigen. Deze links staan in twee ul-elementen waarvan het tweede ul-element binnen het eerste ul-element is genest. Op de pagina is te zien dat deze links van dezelfde niveau zijn. In de HTML wijkt de structuur af. Verwijder het geneste ul-element. https://www.parkeren050.nl De visuele structuur van de informatie die op de pagina is te zien, moet ook in de HTML worden weerspiegeld. Als een artikel uit een aantal alinea's bestaat, moet hetzelfde aantal aanwezig zijn in de HTML. Om een blinde bezoeker dezelfde structuur van informatie te bieden, moet elke alinea in een apart p-element worden geplaatst. Op de pagina "Adverteren in een parkeervoorziening" staan twee alinea's tekst: "2. Billboards In samenwerking met ... info@clearchannel.nl" en "3. Foto- of filmlocatie Onze parkeervoorzieningen ... onscontactformulier". In de HTML worden deze paragrafen opgemaakt als één p-element. https://www.parkeren050.nl/adverteren-in-een-parkeervoorziening https://www.parkeren050.nl/algemene-voorwaarden-parkeergarages In beide PDF-documenten “algemene voorwaarden behorend bij eenmalige parkeerovereenkomsten” en “algemene voorwaarden behorend bij stallingsovereenkomsten voor abonnementhouders”, op pagina 1-4, staan lijsten, zie bijvoorbeeld onder punt 2. De juiste opmaak ontbreekt. Inhoud die wordt weergegeven als een lijst moet als zodanig worden opgemaakt om een blinde bezoeker dezelfde informatiestructuur te bieden als te zien is in het document. Een ander voordeel van het gebruik van een lijst is dat de schermlezer het aantal items aankondigt voordat ze worden voorgelezen. Zo weet een blinde bezoeker hoeveel informatie er volgt. De lijst moet worden opgemaakt met een L- en LI-tag. Daarnaast zijn de namen van elk artikel niet als kopteksten opgemaakt. Alleen het woord “Artikel “ is een kop. Voeg de namen van de artikelen toe aan deze koppen. In het pdf-document “Algemene voorwaarden behorend bij stallingsovereenkomsten voor abonnementhouders” onder punt 2.1 staat een alinea die in de tags uit twee tags bestaat. Dit moet in een tag worden geplaatst. https://www.parkeren050.nl/uploads/fckconnector/18d9432e-ccdb-546a-9e5e-98cd0244a4f1 https://www.parkeren050.nl/uploads/fckconnector/0f96cc3a-5aca-5301-8175-31d5fe6ce9f5 |
| 1.3.2: Betekenisvolle volgorde | Uitkomst: Voldoende | |
| 1.3.3: Zintuiglijke eigenschappen | Uitkomst: Voldoende | |
| 1.3.4: Weergavestand | Uitkomst: Voldoende | |
| 1.3.5: Identificeer het doel van de input | Uitkomst: Voldoende |
1.4 Onderscheidbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.4.1: Gebruik van kleur | Uitkomst: Voldoende | |
| 1.4.2: Geluidsbediening | Uitkomst: Niet van toepassing | |
| 1.4.3: Contrast (minimum) | Uitkomst: Onvoldoende | Bevindingen: Op de pagina 'Adverteren in een parkeervoorziening' staat onder de afbeelding een lichtgrijze tekst 'Bijschrift' op een witte achtergrond. Deze tekst heeft een te lage kleurcontrastverhouding: 2,8:1. Deze tekst is minder dan 24px en is niet vet, dus het contrast moet minstens 4,5:1 zijn. Zie https://www.parkeren050.nl/adverteren-in-een-parkeervoorziening |
| 1.4.4: Herschalen van tekst | Uitkomst: Voldoende | |
| 1.4.5: Afbeeldingen van tekst | Uitkomst: Voldoende | |
| 1.4.10: Reflow | Uitkomst: Onvoldoende | Bevindingen: Wanneer de pagina “Toegankelijkheidsverklaring” wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 400%, wordt de volgende tekst afgesneden: “Toegankelijkheidsverklaring” wordt “Toegankelijkheidsv”. Zorg ervoor dat tekst leesbaar blijft. https://www.parkeren050.nl/toegankelijkheidsverklaring |
| 1.4.11: Contrast van niet-tekstuele content | Uitkomst: Voldoende | Bevindingen: Dit wordt niet afgekeurd omdat de kaart onder de uitzondering valt. Toch kan deze kaart met een kleine moeite toegankelijker worden gemaakt voor bezoekers met visuele beperkingen. De groene kleur geeft beschikbare plekken aan. In combinatie met de witte kleur heeft deze groene kleur de contrastverhouding van 1,8:1. De oranje kleur in combinatie met wit heeft ook onvoldoende kleurcontrast, momenteel 2,0:1. Zorg voor een minimaal contrast van 3,0:1. https://www.parkeren050.nl/nl |
| 1.4.12: Tekstafstand | Uitkomst: Onvoldoende | Bevindingen: Op de pagina "Parkeergarages" staan tegels met verschillende parkeergarages. Elke tegel bevat informatieve iconen. Wanneer de cursor over een icoon beweegt, verschijnt tekst die de betekenis van deze iconen verklaart, bijvoorbeeld "Camera en kentekenherkenning". Als bezoekers tekstafstand vergroten zoals beschreven in dit succescriterium, wordt deze tekst aan de linkerkant van de pagina gedeeltelijk onzichtbaar en is niet meer leesbaar. De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. https://www.parkeren050.nl/parkeren-groningen |
| 1.4.13: Content bij hover of focus | Uitkomst: Voldoende |
2 Bedienbaar
2.1 Toetsenbordtoegankelijk
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 2.1.1: Toetsenbord | Uitkomst: Onvoldoende | Bevindingen: Op de pagina "Parkeergarages" staan tegels met parkeergarages. Elke tegel bevat informatieve iconen. Wanneer een bezoeker de cursor over een icoon beweegt, verschijnt er een verklarende tekst, bijvoorbeeld "Lift". Deze informatie is echter niet toegankelijk voor een bezoeker zonder muis. Dit komt op meerdere pagina's voor: https://www.parkeren050.nl/parkeren-groningen, https://www.parkeren050.nl/buurtstallingen-groningen en https://www.parkeren050.nl/umcg. |
| 2.1.2: Geen toetsenbordval | Uitkomst: Voldoende | |
| 2.1.4: Enkel teken sneltoetsen | Uitkomst: Niet van toepassing |
2.2 Genoeg tijd
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 2.2.1: Timing aanpasbaar | Uitkomst: Voldoende | |
| 2.2.2: Pauzeren, stoppen, verbergen | Uitkomst: Voldoende |
2.3 Toevallen en fysieke reacties
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 2.3.1: Drie flitsen of beneden drempelwaarde | Uitkomst: Voldoende |
2.4 Navigeerbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 2.4.1: Blokken omzeilen | Uitkomst: Voldoende | |
| 2.4.2: Paginatitel | Uitkomst: Voldoende | |
| 2.4.3: Focus volgorde | Uitkomst: Onvoldoende | Bevindingen: Wanneer de website wordt bekeken op een klein scherm, verschijnt een menuknop in de rechterbovenhoek van elke pagina. Deze knop activeert een zijpaneel met een mobiel menu. Na het navigeren door het laatste item van dit menu, verplaatst de focus zich naar interactieve elementen op de pagina, in plaats van binnen het mobiele menu te blijven totdat de bezoeker het sluit. Dit is geen logische focusvolgorde. https://www.parkeren050.nl Op de startpagina verschijnt op een klein scherm een knop 'Filteren' op de kaart. Er is een probleem met de volgorde van de focus. Wanneer filters worden geopend, gaat de focus niet naar de selectievakjes in de filters, maar naar de volgende interactieve elementen op de pagina. Dit is geen logische focusvolgorde. https://www.parkeren050.nl |
| 2.4.4: Linkdoel (in context) | Uitkomst: Onvoldoende | Bevindingen: Op alle pagina's, in de header, staan links om de taal te wijzigen. Deze links hebben momenteel de toegankelijke namen 'NL' en 'DE'. Terwijl het voor ziende bezoekers duidelijk is dat het om Nederlands en Duits gaat, realiseren visueel gehandicapte bezoekers of bezoekers die schermlezers gebruiken zich mogelijk niet dat deze links de taal op de pagina veranderen. Om het doel van deze links voor alle bezoekers duidelijk te maken, is het nodig om de toegankelijke namen van deze links te verrijken door het woord “taal” toe te voegen. Deze aanpassing maakt het doel van deze links duidelijker is voor gebruikers van schermlezers. https://www.parkeren050.nl Op de pagina "Adverteren in een parkeervoorziening", onder het kopje '3. Foto- of filmlocatie', staan twee links met de tekst 'contactformulie' en 'r'. Dit moet een link zijn. https://www.parkeren050.nl/adverteren-in-een-parkeervoorziening |
| 2.4.5: Meerdere manieren | Uitkomst: Voldoende | |
| 2.4.6: Koppen en labels | Uitkomst: Voldoende | |
| 2.4.7: Focus zichtbaar | Uitkomst: Voldoende | |
| 2.4.11: Focus Not Obscured (Minimum) | Uitkomst: Voldoende |
2.5 Input Modaliteiten
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 2.5.1: Aanwijzergebaren | Uitkomst: Niet van toepassing | |
| 2.5.2: Aanwijzerannulering | Uitkomst: Voldoende | |
| 2.5.3: Label in naam | Uitkomst: Voldoende | |
| 2.5.4: Bewegingsactivering | Uitkomst: Niet van toepassing | |
| 2.5.7: Dragging Movements | Uitkomst: Voldoende | |
| 2.5.8: Target Size (Minimum) | Uitkomst: Voldoende |
3 Begrijpelijk
3.1 Leesbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 3.1.1: Taal van de pagina | Uitkomst: Voldoende | |
| 3.1.2: Taal van onderdelen | Uitkomst: Voldoende |
3.2 Voorspelbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 3.2.1: Bij focus | Uitkomst: Voldoende | |
| 3.2.2: Bij input | Uitkomst: Voldoende | |
| 3.2.3: Consistente navigatie | Uitkomst: Voldoende | |
| 3.2.4: Consistente identificatie | Uitkomst: Voldoende | |
| 3.2.6: Consistent Help | Uitkomst: Voldoende |
3.3 Assistentie bij invoer
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 3.3.1: Foutidentificatie | Uitkomst: Voldoende | |
| 3.3.2: Labels of instructies | Uitkomst: Voldoende | |
| 3.3.3: Foutsuggestie | Uitkomst: Voldoende | |
| 3.3.4: Foutpreventie (wettelijk, financieel, gegevens | Uitkomst: Niet van toepassing | |
| 3.3.7: Redundant Entry | Uitkomst: Voldoende | |
| 3.3.8: Accessible Authentication (Minimum) | Uitkomst: Voldoende |
4 Robuust
4.1 Compatibel
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 4.1.2: Naam, rol, waarde | Uitkomst: Voldoende | |
| 4.1.3: Statusberichten | Uitkomst: Voldoende |
Sample met getoetste webpagina's
- Homepage - https://www.parkeren050.nl
- Contact - https://www.parkeren050.nl/contact
- Zoeken - https://www.parkeren050.nl/zoeken
- Adverteren in een parkeervoorziening - https://www.parkeren050.nl/adverteren-in-een-parkeervoorziening
- Parkeergarages - https://www.parkeren050.nl/parkeren-groningen
- Buurtstallingen - https://www.parkeren050.nl/buurtstallingen-groningen
- Parkeergarage Forum - https://www.parkeren050.nl/parkeren-groningen/parkeergarage-forum
- Buurtstalling Bleekveld - https://www.parkeren050.nl/buurtstallingen-groningen/bleekveld
- Algemene voorwaarden parkeergarages - https://www.parkeren050.nl/algemene-voorwaarden-parkeergarages
- Privacystatement - https://www.parkeren050.nl/privacystatement
- Toegankelijkheidsverklaring - https://www.parkeren050.nl/toegankelijkheidsverklaring
- Parkeren UMCG - https://www.parkeren050.nl/umcg
- PDF: algemene voorwaarden behorend bij eenmalige parkeerovereenkomsten - https://www.parkeren050.nl/uploads/fckconnector/18d9432e-ccdb-546a-9e5e-98cd0244a4f1
- Parkeergarage Circus - https://www.parkeren050.nl/parkeren-groningen/parkeergarage-circus
- PDF: algemene voorwaarden behorend bij stallingsovereenkomsten voor abonnementhouders - https://www.parkeren050.nl/uploads/fckconnector/0f96cc3a-5aca-5301-8175-31d5fe6ce9f5
Webtechnologie
HTML,CSS,WAI-ARIA,JavaScript,SVG,PDF
Onderbouwing van de evaluatie
- Google Chrome, versie 125 (primair)
- Mozilla Firefox, versie 125
- Microsoft Edge, versie 125
- Adobe Acrobat Pro
- PDF Accessibility Checker (PAC)
- NVDA in combinatie met Mozilla Firefox
- VoiceOver in combinatie met Apple Safari