Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op alle pagina's zijn in het head-element van de HTML-code maximum-scale=1 en user-scalable=no aanwezig.

Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

Focusindicator is verwijderd, en daardoor is toetsenbordfocus niet zichtbaar

Op alle pagina's van deze website is de standaardtoetsenbordfocusstijl verwijderd uit links en invoervelden. Er zijn geen aangepaste focusindicatoren als alternatief aageboden.

De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Haal outline:none weg of voeg een eigen toegankelijke focusindicator toe.

Er is geen skiplink aanwezig

Er is geen skip-link op alle pagina's van de website. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.

Oplossing:

Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Zorg dat de skiplink:

• de eerste link op de pagina is;
• visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
• naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Het cookiebannervenster heeft geen juiste ARIA-rol en geen toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Cookiebanner krijgt niet als eerste toetsenbordfocus

De eerste keer dat een bezoeker de website bezoekt, verschijnt er een cookiebanner. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt de inhoud van de pagina en als de toetsenbordfocus niet eerst daarheen gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten. Om deze banner te sluiten, moet de bezoeker met de tab-toets helemaal naar de onderkant van de pagina gaan.

Oplossing:

Zorg dat de focus als eerste naar de cookiebanner gaat.

Elementen die onder een cookiebanner vallen, krijgen nog steeds toetsenbordfocus.

De cookiebanner verbergt een deel van de pagina-inhoud. Interactieve elementen onder deze cookiebanner (zoals links in de footer) kunnen nog steeds de toetsenbordfocus krijgen, ook al zijn ze visueel verborgen.

Oplossing:

Zorg dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen.

Element heeft niet de juiste toegankelijke rol

In de cookiebanner mist het selectie-element met de tekst "Nederlands" een passende toegankelijke rol. Bovendien geeft het besturingselement niet aan of het element uitgeklapt of ingeklapt is, waardoor gebruikers de huidige status niet kunnen zien.

Elk HTML-element heeft 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 het element de juiste rol heeft.

Taalwisseling ontbreekt op anderstalige content

De cookiebanner kan in een andere taal worden ingesteld, maar deze inhoud heeft geen taalcode.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

In de cookiebanner staat blauwe tekst (#107EF1) op een witte achtergrond, zie 'Toon gedetailleerde instellingen'. De kleurcontrastverhouding is te laag: 4,0:1. De witte tekst op de blauwe achtergrond (#2775F2) op knoppen zoals "Alles accepteren" heeft ook een onvoldoende contrastverhouding van 4,3:1. De grijze tekst (#999999) "Powered by" op de grijze achtergrond (#FAFAFA) heeft een contrastverhouding van 2,7: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 bestaat alleen uit afbeelding, maar er is geen alternatieve tekst

In de cookiebanner ontbreekt bij de knop met het X-pictogram een tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven.

Hetzelfde probleem doet zich voor op de cookiebanner voor de aangepaste bedieningselementen voor toestemmingsopties naast de kop Webanalyse wanneer op de knop "Toon gedetailleerde instellingen" wordt gedrukt.

Oplossing:

Gebruik een van de volgende opties om de beschrijving toe te voegen:

• title-element: Als het pictogram een svg is, geef dan een functionele beschrijving in het title-element.
• aria-label: Voeg een aria-label-attribuut toe aan het knopelement met een beknopte beschrijving van de functie ervan.
• Visueel verborgen tekst: Voeg beschrijvende tekst toe aan het knopelement en verberg deze visueel met behulp van CSS, terwijl deze toegankelijk blijft voor schermlezers.

Knop heeft niet de juiste toegankelijke rol

In de cookiebanner heeft de X-knop om de banner te sluiten niet de juiste toegankelijke rol.

Hetzelfde probleem doet zich voor op de cookiebanner voor de aangepaste bedieningselementen voor toestemmingsopties naast de kop Webanalyse wanneer op de knop "Toon gedetailleerde instellingen" wordt gedrukt.

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 het button-element.

Knop kan niet bediend worden met spatiebalk en Enter-toets

In de cookiebanner is de knop 'Sluiten' niet toegankelijk via het toetsenbord.

Hetzelfde probleem doet zich voor op de cookiebanner voor de aangepaste bedieningselementen voor toestemmingsopties naast de kop Webanalyse wanneer op de knop "Toon gedetailleerde instellingen" wordt gedrukt.

Oplossing:

Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.

Onzichtbaar element krijgt toetsenbordfocus

In de header komt de toetsenbordfocus op onzichtbare interactieve elementen terecht vóór het logo.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

In het hoofdmenu staat grijze tekst (#888888) op een witte achtergrond. De kleurcontrastverhouding 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/.

Actieve link alleen aan kleur te herkennen

In het hoofdmenu wordt de actieve link (de link naar de huidige pagina) alleen aangegeven door een andere tekstkleur.

Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dus niet welke link actief is en welke niet.

Oplossing:

Zorg ervoor dat actieve links ook nog op een andere manier te herkennen zijn, bijvoorbeeld door ze te onderstrepen of vetgedrukt te maken.

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op een klein scherm verschijnt een menulink (het 'hamburger'-pictogram met drie horizontale lijnen) om het mobiele navigatiemenu te openen. De tekstalternatief voor het pictogram ontbreekt, waardoor de link ontoegankelijk is.

De afbeelding is dus interactief. Er is geen tekstalternatief. Daardoor heeft de link geen inhoud (dit zorgt ook voor afkeur op succescriterium 2.4.4 en 4.1.2).

Hetzelfde probleem doet zich voor bij de link met het X-pictogram wanneer het mobiele menu is geopend.

Oplossing:

Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Link heeft geen tekst, waardoor linkdoel onbekend is

Op een klein scherm verschijnt een menulink (het 'hamburger'-pictogram met drie horizontale lijnen) om het mobiele navigatiemenu te openen. Deze link bevat geen inhoud en heeft daarom geen duidelijk linkdoel.

Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden.

Hetzelfde probleem doet zich voor bij de link met het X-pictogram wanneer het mobiele menu is geopend.

Oplossing:

Om dit op te lossen moet je de link content geven. Dat kun je als volgt doen:

• Tekst toevoegen aan het a-element: voeg beschrijvende tekst toe binnen het element.
• aria-label gebruiken: voeg het aria-label-attribuut toe aan de link en plaats hier een beknopte beschrijving van de bestemming in.

Zorg dat alle links een duidelijk linkdoel hebben.

Menulink heeft geen toegankelijke naam

Op een klein scherm verschijnt een menulink (het 'hamburger'-pictogram met drie horizontale lijnen) om het mobiele navigatiemenu te openen. Deze link heeft momenteel geen toegankelijke naam.

Hetzelfde probleem doet zich voor bij de link met het X-pictogram wanneer het mobiele menu is geopend.

Oplossing:

Geef een toegankelijke naam (bijvoorbeeld met behulp van aria-label) die de functie van de link duidelijk beschrijft.

Menulink geeft geen statusinformatie weer

Op een klein scherm verschijnt een menulink om het mobiele navigatiemenu te openen. De link geeft geen informatie over de status van het menu (open of gesloten) aan bezoekers die deze niet kunnen zien, zoals gebruikers van schermlezers.

Oplossing:

Gebruik een van de volgende methoden om de status van het menu weer te geven:

• Visueel verborgen tekst: voeg naast de link tekst toe die de status beschrijft (bijvoorbeeld 'Menu geopend' of 'Menu gesloten') en verberg deze visueel met behulp van CSS, terwijl deze toegankelijk blijft voor schermlezers. Werk deze tekst dynamisch bij wanneer de status van het menu verandert.
• aria-expanded-attribuut: Gebruik het aria-expanded-attribuut op het menulinkelement. Stel aria-expanded="true" in wanneer het menu open is en aria-expanded="false" wanneer het gesloten is. Werk dit attribuut dynamisch bij wanneer de status van het menu verandert.

Volgorde toetsenbordfocus is niet logisch

Op het kleine scherm bevindt zich een menuknop. Deze knop opent een mobiel menu. De toetsenbordfocus verschuift niet naar de eerste link in het mobiele menu, maar gaat langs alle interactieve elementen op de pagina en komt pas daarna in het mobiele menu terecht. Deze volgorde van de toetsenbordfocus is niet logisch.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.

Knop heeft onvoldoende kleurcontrast

Onderaan de pagina bevindt zich een knop met een pijlpictogram waarmee gebruikers terug kunnen keren naar de bovenkant van de pagina. Dit pictogram heeft onvoldoende contrast, momenteel 1,8:1.

Oplossing:

Het contrast tussen het pictogram en de pijl, alsook tussen het pictogram en de achtergrond, bedraagt ten minste 3,0:1.

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Onderaan de pagina bevindt zich een interactief element met een pijlpictogram waarmee gebruikers terug kunnen keren naar de bovenkant van de pagina. In de HTML-code is dit een link. De tekstalternatief voor het pictogram ontbreekt, waardoor de link ontoegankelijk is.

De afbeelding is dus interactief. Er is geen tekstalternatief. Daardoor heeft de link geen inhoud (dit zorgt ook voor afkeur op succescriterium 2.4.4 en 4.1.2).

Oplossing:

Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Link heeft geen tekst, waardoor linkdoel onbekend is

Onderaan de pagina bevindt zich een interactief element met een pijlpictogram waarmee gebruikers terug kunnen keren naar de bovenkant van de pagina. In de HTML-code is dit een link. Deze link bevat geen inhoud en heeft daarom geen duidelijk linkdoel.

Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden.

Oplossing:

Om dit op te lossen moet je de link content geven. Dat kun je als volgt doen:

• Tekst toevoegen aan het a-element: voeg beschrijvende tekst toe binnen het element.
• aria-label gebruiken: voeg het aria-label-attribuut toe aan de link en plaats hier een beknopte beschrijving van de bestemming in.

Zorg dat alle links een duidelijk linkdoel hebben.

Menulink heeft geen toegankelijke naam

Onderaan de pagina bevindt zich een interactief element met een pijlpictogram waarmee gebruikers terug kunnen keren naar de bovenkant van de pagina. In de HTML-code is dit een link. Deze link heeft momenteel geen toegankelijke naam.

Oplossing:

Geef een toegankelijke naam (bijvoorbeeld met behulp van aria-label) die de functie van de link duidelijk beschrijft.

Link naar pagina: https://www.evdata.nl/

Geen bevindingen

Link naar pagina: https://evdata.irias.nl/data

Taalcode klopt niet

De primaire taal van deze pagina is Nederlands, maar het lang-attribuut is onjuist ingesteld op "en".

Je moet de primaire taal van de pagina aangeven met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen.

Oplossing:

Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staat blauwe tekst (#8EA6D7) op een witte achtergrond. Zie bijvoorbeeld de tekst "-9,8%" onder de kop "Trends gebruik laadinfrastructuur". De kleurcontrastverhouding is te laag: 2,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/.

img-element heeft geen alt-attribuut

Op deze pagina zijn de logo's bovenaan en onderaan opgenomen met behulp van een img-element, maar het alt-attribuut ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Hetzelfde probleem doet zich voor bij 15 andere afbeeldingen op de pagina, zoals pictogrammen onder de kopjes "Trends gebruik laadinfrastructuur", "Totale CO₂-besparing", "Totaal schone kilometers" en andere.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

Onjuiste implementatie van tablist-functionaliteit

Op deze pagina wordt de hoofdnavigatie geïmplementeerd met behulp van de ARIA-rol tablist en de bijbehorende tab-elementen. De rollen tablist en tab zijn echter bedoeld voor gebruik in interfaces met tabbladen, waarbij het selecteren van een tabblad de bijbehorende inhoud binnen dezelfde pagina weergeeft, en niet voor het navigeren tussen verschillende pagina's of URL's. Het gebruik van tablist voor primaire navigatie is onjuist, omdat ondersteunende technologieën tabbladachtig gedrag verwachten (bijvoorbeeld navigatie met pijltjestoetsen en bijbehorende tabbladinhoud) in plaats van standaard navigatiegedrag, wat gebruikers in verwarring kan brengen en een inconsistente ervaring kan opleveren.

Oplossing:

Gebruik een semantische navigatiestructuur voor sitenavigatie door de rollen tablist en tab te vervangen door een nav-element dat een lijst met links voor elke bestemming bevat.

De taalwisselknop is niet toegankelijk.

Deze pagina bevat een bedieningselement dat fungeert als een taalschakelaar, waarmee gebruikers de taal van de pagina kunnen wijzigen door op 'NL' of 'EN' te klikken. Dit element is echter niet geïmplementeerd met de juiste interactieve rol, biedt geen statusinformatie (zoals welke taal actief is) en kan niet met het toetsenbord worden bediend. Als gevolg hiervan kunnen gebruikers die afhankelijk zijn van toetsenbordnavigatie of hulpsoftware de huidige status van de taalschakelaar niet identificeren, gebruiken of begrijpen.

Oplossing:

Implementeer de taalwisselaar als een goede interactieve bediening met behulp van native HTML-elementen zoals button, een groep keuzerondjes of een role="switch"-element: https://www.w3.org/WAI/ARIA/apg/patterns/switch/. Zorg ervoor dat de bediening toegankelijk is met het toetsenbord en duidelijke statusinformatie geeft over welke taal momenteel actief is.

SC 2.5.8 De knoppen waarmee tooltips worden getoond zijn te klein

Op deze pagina staat naast de tekst 'Aantal gebruikte laadpunten' een pictogram waarmee tooltips kunnen worden geactiveerd. De knop is 14 pixels groot. Het probleem is dat de achtergrond waarop deze knop staat ook een klikbaar is. Omdat het tooltippictogram zo klein is, bestaat een grote kans dat mensen met motorische beperkingen deze knop niet kunnen activeren.

De oppervlakte waarop geklikt kan worden (het ‘doelgebied’) bij knoppen, links en andere interactieve elementen moet groot genoeg zijn. Anders is het voor bezoekers met een motorische beperking lastig om op het goede element te klikken.

Oplossing:

Elementen moeten óf een oppervlakte hebben van minimaal 24 bij 24 CSS-pixels, óf voldoende uit elkaar geplaatst zijn. Om te bepalen of klikbare elementen ver genoeg uit elkaar staan, teken je een denkbeeldige cirkel met een diameter van 24 pixels in het midden van het doelgebied. Deze cirkel mag op geen enkele plek (de cirkel van) een ander doelgebied raken.

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet gemarkeerd als kopjes: "Totale CO₂-besparing", "Totaal schone kilometers", "Aantal gebruikte laadpunten" en andere.

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.

Knop bestaat alleen uit afbeelding, maar alternatieve tekst beschrijft de functie niet

Op deze pagina staan knoppen met een pijlpictogram, bijvoorbeeld naast de tekst 'Aantal gebruikte laadpunten'. Deze knoppen hebben een alternatieve tekst 'logo' die de functie van de afbeelding niet beschrijft.

Bestaat een knop alléén uit een afbeelding? Dan doet de alternatieve tekst van de afbeelding dienst als de naam van de knop. In dat geval moet deze alternatieve tekst anders ingevuld worden dan bij een gewone informatieve afbeelding. Er moet niet in staan wat er te zien is, maar juist wat de functie of het doel is van de knop. Als dit niet duidelijk is, weet een schermlezer niet wat de functie van de knop is.

Oplossing:

Voeg de beschrijving toe via een alt-tekst bij het img-element, een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor de schermlezer.

Volgorde toetsenbordfocus onlogisch door gebruik tabindex-attribuut op een element dat geen focus moet krijgen

Op deze pagina zijn niet-interactieve elementen met de tekst "Trends gebruik laadinfrastructuur", "Aantal gebruikte laadpunten" en andere ten onrechte focusbaar gemaakt met tabindex="0". Deze elementen mogen geen focus krijgen en maken de focusvolgorde onlogisch.

Dit is een probleem voor bezoekers die met de Tab-toets navigeren. Bij een of meer elementen op de pagina is het tabindex-attribuut gebruikt met de waarde 0. Daardoor klopt de volgorde niet meer.

Oplossing:

Zorg ervoor dat de toetsenbordfocus logisch is als met het toetsenbord wordt genavigeerd, en gebruik tabindex="0" niet op elementen die geen toetsenbordfocus zouden moeten krijgen.

Informatieve afbeelding is als achtergrond gebruikt, en er is geen tekstalternatief

Naast de kopjes 'Aantal gebruikte laadpunten' en 'Geladen kWh per laadpunt' staan pictogrammen die een tooltip activeren. Deze pictogrammen zijn toegevoegd als achtergrondafbeeldingen en er is geen tekstalternatief voorzien.

Als je een afbeelding als achtergrond toevoegt aan een pagina, maak je de afbeelding ontoegankelijk voor schermlezers. Blinde bezoekers krijgen de informatie uit de afbeelding dus niet door.

Oplossing:

Zorg ervoor dat de informatie toch beschikbaar is via een tekstalternatief. Dit kan via een zichtbare tekst op de pagina. Je kunt de afbeelding ook via het img-element plaatsen en de informatie in de alternatieve tekst zetten.

Tooltip kan niet met het toetsenbord worden opgeroepen

Op deze pagina wordt naast de tekst 'Aantal gebruikte laadpunten' een tooltip-knop weergegeven die extra inhoud toont wanneer je er met de muis overheen gaat, maar deze functionaliteit is niet beschikbaar voor toetsenbordgebruikers.

Deze knoppen laten extra content zien als een bezoeker er met de muisaanwijzer overheen beweegt. Dit werkt niet met het toetsenbord, waardoor deze informatie ontoegankelijk is voor bezoekers die geen muis gebruiken.

Oplossing:

Zorg dat de tooltips getoond kunnen worden met het toetsenbord.

Knop heeft niet de juiste rol

Op deze pagina is het interactieve element naast de tekst 'Aantal gebruikte laadpunten' een knop om een tooltip te activeren, maar deze heeft niet de juiste toegankelijke rol.

Hierdoor kunnen schermlezers niet doorgeven dat het om een knop gaat. Blinde bezoekers weten dus niet dat op dit element geklikt kan worden. Het gevolg is dat alle content die met deze knop kan worden geopend, ook niet toegankelijk is.

Oplossing:

Zorg dat de knop de juiste toegankelijke rol heeft door één van de volgende oplossingen:

1. Gebruik het button-element: maak de knop met het button-element. Dan heeft de knop automatisch de juiste rol van knop.
2. Voeg role=”button” toe: als een ander element is gebruikt (meestal niet aan te raden), voeg dan het attribuut role=”button” toe aan dit element om de rol expliciet vast te leggen in de code.

Link naar pagina: https://www.evdata.nl/data-delen/

strong-element in plaats van kop-element

Op deze pagina zijn de volgende teksten onjuist gemarkeerd met strong in plaats van de juiste kop-elementen: "Verzoek voor delen laaddata", "Stappen", "Vragen" 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 h2 of h3.

Taalwisseling ontbreekt op anderstalige content

Op deze pagina staat onder het kopje "Toegang tot laadgegevens" een tekst in een andere taal zonder taalcode.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Beschrijving van complexe afbeelding ontbreekt

Op deze pagina staat onder 'Stappen' een complexe afbeelding met de alternatieve tekst 'stappen-aanvraag-datadelen'.

Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alternatieve tekst past. Die informatie maak je toegankelijk door twee tekstalternatieven te bieden: een korte en een lange beschrijving.

Hetzelfde probleem doet zich voor bij de afbeelding onder 'Stappen'.

Oplossing:

De korte beschrijving, meestal de alternatieve tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kun je als tekst op de pagina zelf plaatsen, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Er zijn blauwe links (#009FE3) op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,0: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/.

Link met een afbeelding, linkdoel is onbekend

Aan het einde van het artikel staat een logo van MRA-Elektrisch zonder tekstalternatief. Dit logo fungeert als een link, maar het alt-attribuut is leeg (alt=""), waardoor de afbeelding niet zichtbaar is voor schermlezers.

Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

Oplossing:

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je oplossen door de afbeelding een tekstalternatief te geven.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Aan het einde van het artikel staat een link met het logo van MRA-Elektrisch. Deze link opent een dialoogvenster. Dit dialoogvenster mist zowel een juiste ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Hetzelfde probleem doet zich voor bij de foto's aan het einde van het artikel.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Sluitknop zonder tekstalternatief en zonder toegankelijke naam

Aan het einde van het artikel staat een link met het logo van MRA-Elektrisch. Deze link opent een modaal venster. Met het X-pictogram sluit u dit venster.

Dit pictogram fungeert als een informatieve afbeelding, maar wordt toegevoegd als achtergrondafbeelding en er wordt geen tekstalternatief geboden. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Daarom heeft de knop geen toegankelijke naam, zodat gebruikers van schermlezers het doel ervan niet kunnen begrijpen.

Hetzelfde probleem doet zich voor bij de foto's aan het einde van het artikel.

Oplossing:

Gebruik een van de volgende opties om de beschrijving toe te voegen:

• aria-label: Voeg een aria-label-attribuut toe aan het knopelement met een beknopte beschrijving van de functie ervan.
• Visueel verborgen tekst: Voeg beschrijvende tekst toe aan het knopelement en verberg deze visueel met behulp van CSS, terwijl deze toegankelijk blijft voor schermlezers.

Alternatieve tekst van een informatieve afbeelding is leeg

Aan het einde van het artikel staat een link met het logo van MRA-Elektrisch. Deze link opent een modaal venster. Het logo in dit venster is een informatieve afbeelding. Maar het img-element heeft een leeg alt-attribuut en het figcaption-element binnen de figure-tag bevat geen beschrijvende tekst. Als gevolg hiervan krijgen gebruikers van schermlezers geen informatie over de inhoud of het doel van de afbeelding.

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Hetzelfde probleem doet zich voor bij de foto's aan het einde van het artikel.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

Link naar pagina: https://www.evdata.nl/over/

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina, in een sectie met verborgen inhoud, bijvoorbeeld 'G4-steden', hebben de elementen die de verborgen inhoud openen en sluiten grijze tekst (#888888) op een witte achtergrond. De kleurcontrastverhouding 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/.

Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op deze pagina zijn secties met verborgen inhoud aanwezig. Hoewel de open of gesloten status visueel duidelijk is, wordt deze niet programmatisch doorgegeven aan schermlezers.

Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Pictogrammen bij accordeon hebben geen tekstalternatief

Op deze pagina zijn secties met verborgen inhoud aanwezig, bijvoorbeeld "G4-steden". Het pluspictogram dat de aanwezigheid van de verborgen inhoud aangeeft, mist een tekstalternatief.

Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet aanwezig in de vorm van een aria-expanded-attribuut of een verborgen tekst.

Oplossing:

Je kunt bijvoorbeeld een van de volgende oplossingen gebruiken:

1. geef het pijltje een tekstalternatief
2. voeg verborgen tekst toe die verandert als accordeon opent of sluit
3. gebruik een aria-expanded-attribuut

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Er zijn blauwe links (#009FE3) op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,0: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/.

Link met een afbeelding, linkdoel is onbekend

Aan het einde van het artikel staat een logo van MRA-Elektrisch zonder tekstalternatief. Dit logo fungeert als een link, maar het alt-attribuut is leeg (alt=""), waardoor de afbeelding niet zichtbaar is voor schermlezers.

Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

Hetzelfde probleem doet zich voor bij de foto's aan het einde van het artikel.

Oplossing:

Geef de afbeelding een correcte alt-tekst waarin staat waar de link naartoe verwijst.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Aan het einde van het artikel staat een link met het logo van MRA-Elektrisch. Deze link opent een dialoogvenster. Dit dialoogvenster mist zowel een juiste ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Hetzelfde probleem doet zich voor bij de foto's aan het einde van het artikel.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Sluiticoon zonder tekstalternatief en knop zonder toegankelijke naam

Aan het einde van het artikel staat een link met het logo van MRA-Elektrisch. Deze link opent een modaal venster. Met het X-pictogram sluit u dit venster.

Dit pictogram fungeert als een informatieve afbeelding, maar wordt toegevoegd als achtergrondafbeelding en er wordt geen tekstalternatief geboden. Wanneer een knop alleen uit een afbeelding bestaat, moet de alternatieve tekst van de afbeelding de functie van de knop beschrijven. Daarom heeft de knop geen toegankelijke naam, zodat gebruikers van schermlezers het doel ervan niet kunnen begrijpen.

Oplossing:

Gebruik een van de volgende opties om de beschrijving toe te voegen:

• aria-label: Voeg een aria-label-attribuut toe aan het knopelement met een beknopte beschrijving van de functie ervan.
• Visueel verborgen tekst: Voeg beschrijvende tekst toe aan het knopelement en verberg deze visueel met behulp van CSS, terwijl deze toegankelijk blijft voor schermlezers.

Alternatieve tekst van een informatieve afbeelding is leeg

Aan het einde van het artikel staan logo’s van MRA-Elektrisch en Amsterdam University. Deze informatieve afbeeldingen hebben lege alt-attributen.

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Oplossing:

Voeg de tekst van het logo aan het alt-attribuut.

Link naar pagina: https://evdata.irias.nl/data/config?id=1&lang=nl&filter=charging-infrastructure-usage-trends

Taalcode klopt niet

De primaire taal van deze pagina is Nederlands, maar het lang-attribuut is onjuist ingesteld op "en".

Je moet de primaire taal van de pagina aangeven met de juiste taalcode via het lang-attribuut op het html-element, in dit geval lang="nl". Schermlezers gebruiken deze code om de juiste uitspraakregels toe te passen. Staat hier een verkeerde code, dan wordt de inhoud van de pagina dus met onjuiste uitspraakregels voorgelezen. De voorgelezen tekst is dan erg lastig te begrijpen.

Oplossing:

Stel de taalcode correct in voor elke pagina door lang="nl" te gebruiken.

Meerdere pagina’s hebben dezelfde title-tekst

De pagina's https://evdata.irias.nl/data en https://evdata.irias.nl/data/config?id=1&lang=nl&filter=charging-infrastructure-usage-trends hebben dezelfde tekst in het title-element van de pagina: "Evdata.nl – dashboard".

Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger.

Oplossing:

Verander de tekst in het title-element van, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Menuknop geeft geen informatie over status

Op een klein scherm verschijnt een menuknop om het navigatiemenu te openen. De knop geeft geen informatie over de status van het menu (open of gesloten) aan bezoekers die deze niet kunnen zien, zoals gebruikers van schermlezers.

Oplossing:

Voeg bijvoorbeeld een tekstuele uitleg toe (ingeklapt/uitgeklapt) die je voor ziende bezoekers met CSS verbergt. Of gebruik het aria-expanded-attribuut op de link van het mobiele menu. Dit attribuut moet de waarde "true" krijgen als het menu getoond wordt, en “false" als het menu verborgen is.

Mobiel menu werkt niet goed met toetsenbordfocus

Op een klein scherm verschijnt een menuknop om het navigatiemenu te openen. Deze knop opent een mobiel menu. Momenteel kunnen bezoekers met behulp van het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift dan naar de onderliggende pagina, terwijl het menu open blijft.

Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Oplossing:

Zorg ervoor dat de focus in het menu blijft totdat de bezoeker dit sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.

Elementen die toetsenbordfocus krijgen vallen onder mobiel menu

Wanneer deze pagina wordt bekeken op een klein scherm met het mobiele menu geopend, overlapt het menu interactieve elementen op de onderliggende pagina (zoals het invoerveld naast 'Filter periode van'). Deze onderliggende elementen kunnen nog steeds de toetsenbordfocus krijgen, ook al worden ze verborgen door het menu.

Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.

Oplossing:

Je lost dit op een van de volgende manieren op:

1. Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het chatvenster automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat.

Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.

Bij 400% zoom is een horizontale scrollbar aanwezig

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, verschijnt er een schuifbalk.

Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.

Oplossing:

Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.

Knop heeft niet de juiste toegankelijke rol

Op deze pagina, onder het kopje 'Gegevens', heeft de knop 'Terug naar dashboard' niet de juiste toegankelijke rol.

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 het button-element.

img-element heeft geen alt-attribuut

Op deze pagina zijn de logo's bovenaan en onderaan opgenomen met behulp van een img-element, maar het alt-attribuut ontbreekt.

Een img-element moet altijd een alt-attribuut hebben. Bij een decoratieve afbeelding die geen betekenis overdraagt, laat je dit attribuut leeg. Dan staat er alt="". Bij een informatieve afbeelding voeg je een duidelijke beschrijving van de afbeelding toe.

Hetzelfde probleem doet zich voor bij 10 andere afbeeldingen op de pagina, zoals pictogrammen in het menu en pictogrammen naast koppen.

Oplossing:

Voeg het alt-attribuut toe aan het img-element. Bij een decoratieve afbeelding laat je de waarde leeg, bij een informatieve afbeelding voeg je een duidelijke alternatieve tekst toe.

Hetzelfde label is gebruikt voor verschillende invoervelden

Op deze pagina staat onder het kopje 'Aantal laadsessies, per maand’ een invoerveld met bijvoorbeeld de waarde 'Aug | 2023' en 'Aug | 2025'. Het label 'datum' komt twee keer voor. Het verschil tussen deze invoervelden is niet duidelijk uit de labeltekst.

Je mag niet exact hetzelfde label gebruiken voor invoervelden waar je andere informatie in moet vullen. Zelfs niet als de velden erg op elkaar lijken. Het verschil moet duidelijk worden uit het label. Als er bijvoorbeeld twee invoervelden zijn voor “postcode” (één voor facturering en één voor verzending), moeten ze elk een uniek label hebben, zoals “Factuuradres: postcode” en “Verzendadres: postcode”.

Oplossing:

Pas de labels aan zodat het verschil tussen de beide velden duidelijk is.

Zichtbare tekst van het label staat niet in de toegankelijke naam

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina, onder het kopje 'Aantal laadsessies, per maand', bevindt zich een invoerveld met bijvoorbeeld de waarde 'Aug | 2023'. Het label voor het invoerveld is 'Filter periode van', maar de toegankelijke naam is 'datum'.

Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren.

Oplossing:

Zorg dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.

Knop heeft geen toegankelijke naam

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina, onder het kopje 'Aantal laadsessies, per maand', bevindt zich een invoerveld om de datum te selecteren, bijvoorbeeld met de waarde 'Aug | 2023'. Naast het invoerveld bevindt zich een knop met een pijlpictogram zonder tekstalternatief. Deze knop heeft dus geen toegankelijke naam.

Als gevolg hiervan begrijpen bezoekers die een schermlezer gebruiken de functie van de knop niet.

Hetzelfde probleem doet zich voor bij de pijltjesknoppen in het dialoogvenster voor het selecteren van een datum.

Oplossing:

Geef deze knop een toegankelijke naam, door gebruik te maken van een beschrijvende linktekst, een aria-label of andere geschikte technieken.

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina, onder het kopje 'Aantal laadsessies, per maand', bevindt zich een invoerveld om de datum te selecteren, bijvoorbeeld met de waarde 'Aug | 2023'. Wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium, wordt de tekst in dit invoerveld gedeeltelijk onzichtbaar en onleesbaar.

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.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina, onder het kopje 'Aantal laadsessies, per maand', bevindt zich een invoerveld om de datum te selecteren, bijvoorbeeld met de waarde 'Aug | 2023'. De knop naast dit invoerveld opent een dialoogvenster met een datumkiezer. Dit dialoogvenster mist zowel een juiste ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Maandknoppen hebben niet de juiste functie

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina, onder het kopje 'Aantal laadsessies, per maand', opent het invoerveld een dialoogvenster voor datumselectie met maandknoppen ('Jan', 'Feb' en andere). Deze knoppen hebben niet de juiste toegankelijke rol: er worden geen native button-elementen of geschikte ARIA-rollen gebruikt. Als gevolg hiervan begrijpen gebruikers van schermlezers niet welke maanden actief zijn en weten ze niet welke maand actief is, wat de interactie met de kalender verwarrend maakt.

Oplossing:

Zorg ervoor dat alle maandknoppen de juiste toegankelijke rol hebben door het HTML-element button te gebruiken. Gebruik voor maanden die niet kunnen worden geselecteerd bijvoorbeeld het attribuut aria-disabled="true".

Geef bovendien de geselecteerde maand aan in de code voor ondersteunende technologie, bijvoorbeeld door aria-current="true" toe te passen op de geselecteerde knop of door een visueel verborgen label toe te voegen, zoals <span class="sr-only">Geselecteerde maand</span> binnen het geselecteerde besturingselement.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op deze pagina staat een grijze tekst (#8D8D8D) "Source: www.evdata.nl" op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,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/.

Canvas-element heeft geen tekstalternatief

Op deze pagina staan interactieve infographics in canvas-elementen. Dit element heeft geen tekstalternatief.

Oplossing:

Een canvas-element moet altijd een tekstalternatief hebben. Deze pagina's geven goede voorbeelden van hoe canvas toegankelijk gemaakt kan worden: http://www.html5accessibility.com/tests/canvas.html en https://pauljadam.com/demos/canvas.html.

In legenda bij grafiek is alleen kleur gebruikt

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina staan interactieve infographics. In deze dia's wordt 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:

Je lost dit op door naast kleur bijvoorbeeld ook datalabels of verschillende soorten arcering te gebruiken.

Legenda-filterelementen hebben geen functie, status en kunnen niet met het toetsenbord worden bediend.

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Deze pagina bevat een reeks bedieningselementen die visueel worden weergegeven als selectievakjes in de legenda onder 'Maak hier uw selectie'. Deze selectievakjes fungeren als interactieve filters voor de grafieken. Deze elementen zijn echter niet geïmplementeerd met de juiste interactieve rol, geven geen statusinformatie (zoals welke items zijn geselecteerd) en kunnen niet met het toetsenbord worden bediend. Als gevolg hiervan kunnen gebruikers die afhankelijk zijn van toetsenbordnavigatie of ondersteunende technologieën de huidige status van de filters niet identificeren, gebruiken of begrijpen.

Oplossing:

Zorg ervoor dat de bedieningselementen in de legenda volledig interactieve elementen zijn die duidelijke statusinformatie geven en toegankelijk zijn via het toetsenbord. Dit kan bijvoorbeeld worden opgelost door native HTML-selectievakjeselementen met bijbehorende label-tags te gebruiken, of door de juiste ARIA-rollen toe te passen, zoals role="checkbox" met goed statusbeheer, zoals aria-checked.

Onvoldoende kleurcontrast in legenda-items

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina staat onder 'Maak hier uw selectie' een legenda voor de grafieken. Sommige kleurencombinaties hebben onvoldoende contrast. Bijvoorbeeld een blauw (#A7BDE5), donkerblauw (#009FE3), geel (#FBCD67) pictogram op een blauwe achtergrond met een contrastverhouding van 1,2-2,4:1.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een grafiek minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.

Kleurcontrast tussen lijnen of balken in grafiek is niet voldoende

Dit is slechts een advies omdat de gegevens uit de grafiek als een CSV-bestand kunnen worden gedownload.

Op deze pagina staan grafieken. Sommige kleurencombinaties hebben onvoldoende contrast. Zo hebben bijvoorbeeld lichtblauwe (#BDCEEB), blauwe (#009FE3) en gele (#FBCD67) balken een contrastverhouding van 1,5-2,9:1 ten opzichte van de witte achtergrond.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een grafiek minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat onder elke grafiek een knop 'Download data' zonder taalcode. Het pijltje in elke knop heeft als alternatieve tekst 'logo'.

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.