Audit digitale toegankelijkheid van website laadpaal.mrae.nl
Samenvatting
Wij hebben het proces op laadpaal.mrae.nl onderzocht tussen 25 en 27 september 2025. Op dit moment zijn 41 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 14 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Beoordeling van succescriteria
Voldoet of niet van toepassing: 41
Voldoet niet: 14
Totaal: 55 succescriteria
Deze succescriteria zijn afgekeurd: 1.1.1, 1.3.1, 1.3.5, 1.4.1, 1.4.3, 1.4.10, 1.4.11, 1.4.12, 2.1.1, 2.4.4, 2.5.3, 3.1.1, 3.3.2, 4.1.2.
Hoe maak je de kaart toegankelijker?
De kaart en de kaartapplicatie vallen op dit moment onder de uitzondering voor de overheid. Dat betekent dat je de applicatie zelf niet toegankelijk hoeft te maken. Wel moet je de informatie uit de kaart op een andere manier beschikbaar stellen voor de bezoekers van je website.
Je hebt al een goede eerste stap gezet met de zoekfunctie: een bezoeker kan een adres invoeren en krijgt vervolgens informatie te zien in het zijpaneel. Deze functionaliteit werkt echter nog niet optimaal. Niet alle informatie die in de kaart zichtbaar is, verschijnt ook in het zijpaneel.
Hoeveel informatie moet je tonen? Denk vanuit de bezoeker. Hoe ver zou je zelf bereid zijn om naar een laadpaal te lopen? Stel bijvoorbeeld een maximum van 500 meter. Plaats dan bovenaan het zijpaneel een tekst als:
“Er worden resultaten getoond binnen maximaal 500 meter van het ingevoerde adres.”
Onder deze melding toon je vervolgens alle gevonden resultaten in tekstvorm.
Zorg ervoor dat alle informatie in het zijpaneel voldoet aan de WCAG-succescriteria. De specifieke aandachtspunten en issues vind je in dit rapport.
Niet de pagina's op het mra-e.nl. Deze website wordt binnenkort vernieuwd.
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 139
Google Chrome, versie 139
Apple Safari, versie 18
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
Alle pagina’s missen het lang-attribuut op het html-element. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is.
Oplossing:
Zorg dat het lang-attribuut aanwezig is op het html-element, en dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.
Op deze pagina staat lichtblauwe tekst (#009FE3) op een witte achtergrond of andersom, bijvoorbeeld “Ik wil elektrisch laden!”. De contrastverhouding is te laag: 2,97:1.
Oplossing:
Voor tekst kleiner dan 24px en niet vetgedrukt moet de contrastverhouding minimaal 4,5:1 zijn, en voor tekst groter dan 24px minimaal 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Links door kleur te onderscheiden van gewone tekst
Impact: MediumType: ContentWCAG: 1.4.1
Op deze pagina, in stap 1, in de alinea met de link “mra-e.nl”, is kleur het enige verschil tussen de link en de statische tekst. Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.
Oplossing:
Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur. Bijvoorbeeld:
Onderstrepen: geef de links een onderstreping.
Rand: voeg een subtiele rand (kader) toe aan de links.
Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.
Kop is niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1
Op deze pagina, in de footer, is de volgende tekst niet als kop gemarkeerd: ”MRA-Elektrisch”. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3
Op deze pagina staat een knop met witte tekst “Volgende” op een lichtblauwe achtergrond (#5BC0F1). De contrastverhouding is te laag: 2:1.
Hetzelfde probleem komt voor in stap 3, “3. Uw gegevens,” onder de kop “Opmerkingen,” bij de knop “Dien verzoek in”.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Keuzelijst heeft geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2
Op deze pagina, in stap 1, onder de kop “1. Verzoek tot het plaatsen van een publieke laadpaal”, staat een keuzelijst (select-element). De toegankelijke naam ontbreekt. Hierdoor is de keuzelijst niet toegankelijk.
Oplossing:
Geef het select-element een toegankelijke naam.
Contrast tussen focusindicator en achtergrond is te laag
Impact: MediumType: TechniekWCAG: 1.4.11
Op deze pagina, in stap 1, onder de kop “1. Verzoek tot het plaatsen van een publieke laadpaal”, staat een keuzelijst (select-element). Wanneer dit select-element toetsenbordfocus krijgt, is dit zichtbaar door een lichtblauwe rand (#4CA7E8). De contrastverhouding tussen deze focusrand en de witte achtergrond is 2,6:1.
Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Hetzelfde probleem komt voor in stap 3, “3. Uw gegevens,” bij de invoervelden.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
strong-element in plaats van kop-element
Impact: MediumType: ContentWCAG: 1.3.1
Op deze pagina, na het selecteren van de eerste optie in het select-element, in stap 2, “2. Vragen”, zijn de volgende teksten onjuist opgemaakt met strong in plaats van met correcte kop-elementen, bijvoorbeeld “Verzoeken”, “Publieke voorziening” en andere.
Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.
Oplossing:
Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h3 of h4.
Toestand van de schakelknop is niet vastgelegd in de code
Impact: MediumType: TechniekWCAG: 4.1.2, 1.3.1
Op deze pagina, na het selecteren van de eerste optie in het select-element, in stap 2, “2. Vragen”, staan de knoppen “Ja” en “Nee”. Deze knoppen hebben meerdere toestanden (bijvoorbeeld ingedrukt, niet ingedrukt), maar missen een programmatische aanduiding van hun huidige toestand. Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knop.
Dit probleem houdt ook verband met SC 1.3.1; de actieve knop wordt alleen visueel aangegeven, en er is geen overeenkomstige informatie in de code.
Hetzelfde probleem komt voor in stap 3, “3. Uw gegevens”, bij de knoppen “Mevrouw”, “De heer” en andere knoppen.
Oplossing:
Zorg dat de toestand van de knop ook in de code wordt weergegeven.
label-element is niet gekoppeld aan invoerveld
Impact: GrootType: TechniekWCAG: 1.3.1, 4.1.2
Op deze pagina, in stap 3, “3. Uw gegevens”, staat een formulier waarin de label-elementen niet expliciet gekoppeld zijn aan de bijbehorende invoervelden, bijvoorbeeld “Voorletter(s)” en andere.
label-elementen moeten gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.
Oplossing:
Koppel de label-elementen aan hun bijbehorende invoervelden door het for attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.
Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut
Impact: MediumType: TechniekWCAG: 1.3.5
Op deze pagina, in stap 3, “3. Uw gegevens”, bevat een formulier invoervelden voor persoonsgegevens, bijvoorbeeld “Achternaam”, maar ontbreekt het autocomplete-attribuut.
Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
De kleur van de rand van het invoerveld heeft niet genoeg contrast
Impact: MediumType: TechniekWCAG: 1.4.11
Op deze pagina, in stap 3, “3. Uw gegevens”, staat een formulier. Alle invoervelden hebben lichtgrijze randen (#CCCCCC) op een witte achtergrond. De contrastverhouding is te laag: 1,6:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
label-element is niet gekoppeld aan keuzelijst
Impact: GrootType: TechniekWCAG: 1.3.1, 4.1.2
Op deze pagina, in stap 3, “3. Uw gegevens”, staat een formulier waarin het label-element met de tekst "Merk” niet expliciet gekoppeld is aan het bijbehorende select-element.
label-elementen moeten gekoppeld zijn aan de bijbehorende keuzelijst. Hierdoor krijgt het keuzelijst een toegankelijke naam, en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker. Omdat het keuzelijst op dit moment geen toegankelijke naam heeft, wordt deze bevinding ook bij succescriterium 4.1.2 vermeld.
Oplossing:
Koppel de label-elementen aan hun bijbehorende invoervelden door het for attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.
Kop is niet gemarkeerd als koptekst
Impact: MediumType: ContentWCAG: 1.3.1
Op deze pagina, in stap 3, “3. Uw gegevens”, onder de kop “Bijlagen”, zijn de volgende teksten niet als kop gemarkeerd: “Tips” en “Upload”.
Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Op deze pagina staat een instructie hoe je zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Dialoogvenster heeft geen toegankelijke naam
Impact: MediumType: TechniekWCAG: 4.1.2
Op deze pagina, in stap 3, “3. Uw gegevens”, staat een formulier. Wanneer het formulier met fouten wordt verstuurd, verschijnt er een dialoogvenster. Dit dialoogvenster heeft geen toegankelijke naam. Hulpsoftware kan hierdoor niet doorgeven welke inhoud het dialoogvenster heeft.
Oplossing:
Voeg een aria-label aan het dialoogvenster toe met een duidelijke beschrijving van de inhoud.
Informatie is niet meer leesbaar als tekstafstand wordt aangepast
Impact: MediumType: TechniekWCAG: 1.4.12
Op deze pagina, in stap 3, “3. Uw gegevens”, wordt de tekst “Leasemaatschappij” onder de kop "Elektrische auto" gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstanden toepassen zoals beschreven in dit succescriterium.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
Oplossing:
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Het logo bovenaan deze pagina toont de volledige tekst "MRA electrisch", maar de alt-tekst is alleen "Logo".
In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.
Hetzelfde probleem houdt verband met SC 2.4.4: het doel van de link is onduidelijk, en met SC 2.5.3: de zichtbare linktekst komt niet overeen met de toegankelijke naam, waardoor de link niet met spraak kan worden aangestuurd.
Oplossing:
Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “MRA electrisch”.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3
Op deze pagina staat witte tekst “Geen laadpaal in de buurt? Dien verzoek in” op een lichtblauwe achtergrond (#00A4E9) of andersom. De contrastverhouding is te laag: 2,8:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3
Op deze pagina staat grijze tekst (#888888) “Klik een locatie aan op de kaart...” op een witte achtergrond. De contrastverhouding is te laag: 3,5:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Knop heeft geen toegankelijke naam
Impact: MediumType: TechniekWCAG: 4.1.2, 1.1.1
Op deze pagina staat een zoekveld met een knop met een “vizier”-icoon. Deze knop heeft geen toegankelijke naam.
Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.
Dit probleem houdt ook verband met SC 1.1.1; dit icoon heeft geen tekstalternatief.
Oplossing:
Voorzie deze knop van een toegankelijke naam, bijvoorbeeld door een beschrijvende knoptekst, een aria-label of een andere geschikte techniek te gebruiken.
Het zoekveld heeft niet de juiste rol
Impact: MediumType: TechniekWCAG: 4.1.2
Het zoekveld geeft tijdens het typen suggesties in een keuzelijst en functioneert daarmee als een combobox. De vereiste ARIA-rol ontbreekt echter.
Daarnaast wordt voor elementen met de rol textbox de status “uitgeklapt/ingeklapt” niet aangegeven. Hierdoor negeren schermlezers het attribuut aria-expanded.
Oplossing:
Om deze zoekbalk toegankelijk te maken, voeg je het volgende toe: role="combobox": voeg dit attribuut toe aan het invoerveld om aan te geven dat het een keuzelijst is.
Keuzelijst (select-element) heeft geen label, omdat eerste optie als label is gebruikt
Impact: MediumType: TechniekWCAG: 3.3.2
Op deze pagina staan onderaan de kaart select-elementen zonder label. De eerste optie in het select-element kan niet als label dienen, omdat deze verdwijnt zodra een andere optie is geselecteerd.
Hierdoor weten de bezoekers niet waar de keuzelijst over gaat. De teksten van de opties zijn in dit geval niet zelfverklarend.
Oplossing:
Geef dit element een label dat altijd zichtbaar is.
SC 4.1.2 Keuzelijst heeft geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2
Op deze pagina staan onderaan de kaart keuzelijsten (select-elementen). De toegankelijke namen ontbreken. Hierdoor is de keuzelijst niet toegankelijk.
Oplossing:
Geef het select-element een toegankelijke naam.
Contrast tussen focusindicator en achtergrond is te laag
Impact: MediumType: TechniekWCAG: 1.4.11
Op deze pagina staan onderaan de kaart keuzelijsten (select-elementen). Wanneer deze select-elementen toetsenbordfocus krijgen, is dit zichtbaar door een lichtblauwe (#4CA7E8) focusrand. De contrastverhouding tussen de focusrand en de witte achtergrond is 2,6:1.
Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.
Oplossing:
Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.
Alleen kleur gebruikt in legenda bij grafiek
Impact: MediumType: ContentWCAG: 1.4.1
Op deze pagina wordt in de legenda en op de kaart uitsluitend kleur gebruikt om informatie over te brengen. Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden zie je welke balk / lijn bij welke categorie in de legenda hoort.
Oplossing:
Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.
Het kleurcontrast tussen de informatieve pictogrammen in de legenda/kaart is niet voldoende
Impact: MediumType: TechniekWCAG: 1.4.11
Op deze pagina staan onderaan de kaart een legenda en een kaart met informatieve iconen. Gele iconen (#FACB47) op een witte achtergrond hebben een contrastverhouding van 1,5:1. Groene iconen (#0AC420) op een witte achtergrond hebben een contrastverhouding van 2,4:1. Lichtblauwe iconen (#009FE3) op een witte achtergrond hebben een contrastverhouding van 2,97:1.
Oplossing:
Zorg dat het contrast tussen informatieve elementen van de legenda/kaart minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.
Staat van knop niet doorgegeven aan schermlezer
Impact: MediumType: TechniekWCAG: 4.1.2
Op deze pagina staat onderaan de kaart een knop met een “i”-icoon die extra inhoud opent en sluit. Deze knop heeft geen open-/geslotenstatus.
Bezoekers die de pagina zien, kunnen bepalen of de extra inhoud open of gesloten is. Voor blinde of slechtziende bezoekers die schermtoegangsprogramma’s gebruiken, is dit echter niet het geval.
Oplossing:
Het probleem kan worden opgelost door het aria-expanded-attribuut aan de knop toe te voegen of door visueel verborgen tekst toe te voegen die de status aangeeft.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3
Op deze pagina opent er, wanneer op de iconen op de kaart wordt geklikt, gedetailleerde informatie met blauwe (#337AB7) tekst op een lichtgrijze (#F9F9F9) achtergrond, bijvoorbeeld de link “Bekijk omgeving in Google Street View”. De contrastverhouding is te laag: 4,3:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Impact: MediumType: ContentWCAG: 1.4.3
Op deze pagina opent er, wanneer op de iconen op de kaart wordt geklikt, gedetailleerde informatie met grijze (#888888) tekst, bijvoorbeeld “inloggen als gemeente of provincie”, op een lichtgrijze (#F9F9F9) achtergrond. De contrastverhouding is te laag: 3,4:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Informatieve afbeeldingen hebben geen alternatieve tekst
Impact: GrootType: TechniekWCAG: 1.1.1
Op deze pagina opent er, wanneer op de iconen op de kaart wordt geklikt, extra inhoud. Deze extra inhoud bevat informatieve iconen voor gewone of snellaadstations zonder alternatieve tekst.
Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.
Oplossing:
Voeg beschrijvende alternatieve tekst toe aan deze iconen.
strong-element in plaats van kop-element
Impact: MediumType: ContentWCAG: 1.3.1
Op deze pagina wordt extra inhoud geopend wanneer op bepaalde grijze iconen op de kaart wordt geklikt. In deze extra inhoud zijn de volgende teksten onjuist opgemaakt met strong in plaats van met juiste kop-elementen, bijvoorbeeld “Straatbeeld”, “Bovenaanzicht”.
Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.
Oplossing:
Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.
Interactieve elementen hebben geen juiste toegankelijke rol en toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2
Op deze pagina staan op de kaart interactieve elementen met laadiconen die gedetailleerde informatie openen. Deze elementen hebben geen juiste rol en geen toegankelijke naam.
Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.
Oplossing:
Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik hiervoor bijvoorbeeld het button-element.
Voorzie deze interactieve elementen daarnaast van een toegankelijke naam, bijvoorbeeld door een aria-label te gebruiken of een andere geschikte techniek.
SC 2.1.1 Interactive elements cannot be operated with the keyboard
Impact: GrootType: TechniekWCAG: 2.1.1
Op deze pagina staan op de kaart interactieve elementen met laadiconen die gedetailleerde informatie openen. Deze interactieve elementen zijn niet toegankelijk via het toetsenbord. Alle interactieve elementen, moeten met alleen het toetsenbord te bedienen zijn.
Oplossing:
Zorg dat alle interactieve elementen met de Enter-, Return- of spatietoetsen kunnen worden bediend.
Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Impact: MediumType: TechniekWCAG: 1.4.10
Op deze pagina staan onderaan de kaart select-elementen. Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, zijn deze select-elementen niet zichtbaar en niet bedienbaar, bijvoorbeeld “Exploitant...”.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.