Cookiebanner krijgt niet als eerste toetsenbordfocus

De eerste keer dat een bezoeker de website opent, verschijnt 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 daar niet direct naartoe wordt gestuurd, kunnen bezoekers die alleen met het toetsenbord navigeren de banner niet meteen sluiten. Om de banner te sluiten, moet de bezoeker helemaal naar de onderkant van de pagina tabben.

De cookiebanner op deze website is een product van een derde partij. Daarom zijn slechts enkele toegankelijkheidsproblemen beschreven binnen de scope van deze audit om te laten zien dat deze banner niet toegankelijk is. Een volledige audit van dit onderdeel is niet uitgevoerd, omdat het is geïmplementeerd als een externe oplossing en buiten de controle van het ontwikkelingsteam van de website valt. Ons advies is om op zoek te gaan naar een toegankelijk alternatief.

Oplossing:

Zorg dat de focus als eerste naar de cookiebanner gaat.

Cookiebanner bedekt elementen die focus krijgen

Wanneer de website voor het eerst wordt bezocht, verschijnt er onderaan de pagina een cookiebanner. De toetsenbordfocus komt terecht op elementen die verborgen zijn onder de cookiebanner, bijvoorbeeld op de links “Uitlegvideo’s”, “Nieuws” en “Contact”. Hierdoor is het niet mogelijk te zien waar de focus zich bevindt.

Oplossing:

Zorg dat alleen de interactieve elementen die in beeld zijn toetsenbordfocus kunnen krijgen.

Het selectievakje heeft geen rol, geen toegankelijke naam en is niet met het toetsenbord te bedienen

In de cookiebanner wordt extra inhoud getoond na een klik op de knop “Toon gedetailleerde instellingen”. Het selectievakje “Webanalyse” heeft geen rol, geen toegankelijke naam (SC 4.1.2) en is niet met het toetsenbord te bedienen (SC 2.1.1).

Oplossing:

Voorzie het element van een correct toegankelijke rol, bijvoorbeeld input type="checkbox", en een naam. Hiermee wordt ook het probleem met de toetsenbordtoegankelijkheid opgelost.

Het contrast van de tekst is minder dan 4,5:1

In de cookiebanner hebben de teksten van links en knoppen een onvoldoende contrastratio. De blauwe (#107EF1) tekst “Toon gedetailleerde instellingen” en “Meer informatie vind je in ons Privacybeleid” op een witte achtergrond heeft een contrastratio van 4,0:1. De witte tekst “Alles accepteren” en “Alles weigeren” op blauwe (#2775F2) knoppen heeft een contrastratio van 4,3:1. De grijze (#999999) tekst “Powered by” onderaan heeft een contrastratio van 2,8:1. De grootte van deze teksten is kleiner dan 24 px, waardoor de vereiste minimale contrastratio 4,5:1 is.

Dezelfde kleurcombinatie wordt gebruikt op pagina https://vveladen.nl/author/c-poortmrae-nl/ voor de koppen “Recente berichten”, “Archieven”, “Categorieën” en “Meta”, en op pagina https://vveladen.nl/?s=werk bij teksten zoals “Blog Post” en “Page”.

Oplossing:

Zorg dat alle teksten kleiner dan 24 px een contrastratio hebben van minimaal 4,5:1.

Er is geen skiplink aanwezig

Alle pagina’s van de website missen een skiplink.

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 hoofdinhoud van de pagina springt als de bezoeker de link activeert.

Er is maar één manier om een webpagina te vinden

Er is geen tweede manier om de pagina’s van deze website te vinden.

Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.

Op pagina https://vveladen.nl/author/c-poortmrae-nl/ is zoekfunctionaliteit geïmplementeerd. Om echter te voldoen aan SC 2.4.5, moet deze beschikbaar zijn op alle pagina’s van de website, bijvoorbeeld in de header.

Oplossing:

Zorg dat de webpagina’s op meerdere manieren bereikbaar zijn.

Een informatief element is verborgen voor de screenreader

In de header is de tekst “Laadpunten voor VvE’s” verborgen voor schermlezers. Deze tekst is toegevoegd met CSS-eigenschap ::before. Deze code maakt de inhoud onzichtbaar voor screenreaders en mag niet worden gebruikt voor informatieve elementen of interactieve functionaliteit. Hierdoor wordt de inhoud ontoegankelijk voor bezoekers die afhankelijk zijn van hulpsoftware.

Oplossing:

Plaats deze tekst als tekst of een afbeelding in de HTML.

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.

Alleen kleurverschil bij toetsenbordfocus, met te laag contrast

In de header wordt een aangepaste toetsenbordfocus-indicator gebruikt op menulinks: de kleur verandert van wit naar lichtblauw (#C4ECFF) wanneer de link in focus staat.

Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.

Oplossing:

Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Staat van submenu niet doorgegeven aan schermlezer

De optie “Veelgestelde vragen” in het hoofdmenu heeft een submenu. Een blinde bezoeker krijgt echter geen informatie of het submenu open of gesloten is.

Oplossing:

Zet aria-expanded="true" wanneer het submenu open is en aria-expanded="false" wanneer het gesloten is.

Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op alle pagina’s staan in het head-element van de HTML-code de waarden maximum-scale=1 en user-scalable=0.

Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

Kleurcontrast van tekst is te laag

Op veel pagina’s van de website wordt de combinatie van blauwe (#009FE3) en witte kleur gebruikt voor zowel teksten als informatieve of interactieve elementen. De contrastratio is onvoldoende: 2,97:1.

Hieronder staan enkele voorbeelden, maar dit is geen uitputtende lijst:

• op pagina https://vveladen.nl/ - links onder de kop “Uitgelicht nieuws” wanneer zij in hover­toestand staan
• op pagina https://vveladen.nl/subsidie/ - links “de SVVE”, “op de website van RVO”, “Subsidie Advieskosten oplaadpunten” en andere s* op pagina https://vveladen.nl/veiligeparkeergarages/ - links zoals “uitleg van de scan”, “QuickScan”, “Doe de QuickScan” en ook teksten in de header van geopende accordeons
• op pagina https://vveladen.nl/author/c-poortmrae-nl/ - koppen, talrijke links, “hart”-iconen nadat zij zijn ingedrukt
• op pagina https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/ - voortgangsbalk boven de enquête
• op alle pagina’s - knop van het mobiele menu wanneer de website op een klein scherm wordt bekeken.

Oplossing:

Verhoog de contrastratio zodat deze voldoet aan de minimale eisen: 4,5:1 voor kleine tekst, 3,0:1 voor grote tekst en voor informatieve of interactieve elementen.

De knop “Back to top” onderaan de pagina heeft geen rol, geen naam, geen alt-tekst en is niet met het toetsenbord te bedienen

Onderaan alle pagina’s staat een knop met een pijl die de focus naar de bovenkant van de pagina verplaatst. Het pijl-icoon op de knop heeft geen alternatieve tekst, terwijl dit een informatieve afbeelding is (SC 1.1.1). Bovendien heeft deze knop geen rol, geen toegankelijke naam (SC 4.1.2) en is zij niet met het toetsenbord te bedienen (SC 2.1.1).

Oplossing:

Geef de knop een toegankelijke rol, een naam en zorg dat zij met het toetsenbord te bedienen is.

Menuknop heeft geen toegankelijke naam

Wanneer de website op een klein scherm wordt bekeken, verschijnt er een menuknop (het “hamburger”-icoon met drie horizontale lijnen) om het mobiele navigatiemenu te openen. Deze knop heeft momenteel geen toegankelijke naam.

Hetzelfde probleem geldt voor de knop “x” die wordt gebruikt om dit menu te sluiten.

Oplossing:

Zorg dat de knop een toegankelijke naam krijgt, en dat deze naam van de knop de functie van de knop beschrijft. Zorg ook dat de naam mee verandert als de functie van de knop verandert (“menu openen” of “menu sluiten”).

Menuknop geeft geen informatie over status

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

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 staat bovenaan de pagina een menuknop. Deze knop opent een mobiel menu. De toetsenbordfocus wordt echter niet automatisch in het menu geplaatst wanneer het opent. Bezoekers kunnen met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verschuift naar de onderliggende pagina terwijl het menu open blijft staan.

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.

Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, verdwijnt de tekst “Laadpunten voor VvE’s”.

Hetzelfde probleem doet zich voor bij 400% zoom, waardoor ook 1.4.10 wordt geschonden.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

(Advies) Knoppen hebben niet de juiste rol

Op veel pagina’s van de website zijn er knoppen die onjuist zijn gecodeerd als een a-element (link). Dit is semantisch onjuist, omdat de elementen functioneren als een knop die een actie uitvoert en niet als een link die naar een andere locatie navigeert. Enkele voorbeelden hiervan zijn, maar beperken zich niet tot: de menuknop op een klein scherm, de knop “x” om het mobiele menu te sluiten en de knoppen met “hart”-iconen op pagina’s https://vveladen.nl/nieuws/nieuwe-notificatieregeling-laadpunten-wat-verandert-er-voor-vves/ en https://vveladen.nl/author/c-poortmrae-nl/, elementen die accordeons openen op pagina’s https://vveladen.nl/veiligeparkeergarages/ en https://vveladen.nl/veelgestelde-vragen/ en andere.

Oplossing:

Dit corrigeer je door het element dat voor de knop is gebruikt te veranderen in een button-element, of, als dit niet kan, role=”button” toe te voegen aan het bestaande element. Hierdoor zal het element door hulpsoftware worden gezien als een knop.

Link naar pagina: https://vveladen.nl/

Contrast of text is less than 4,5:1

Op deze pagina hebben de links “Meer nieuws” en “Bereken hier uw stroomvraag” onvoldoende kleurcontrast. De witte tekst tegen de oranje (#E1681A) achtergrond heeft een contrastratio van 3,4:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor standaardtekst. Dit probleem doet zich ook voor wanneer de links in hover- en focustoestand staan.

De links “Download werkplan”, “Download modellen gemeenschappelijk” en “Download modellen privé” op deze pagina hebben eveneens een laag contrast. De tekst is wit en de achtergrond is grijs (#B9B8B8), waardoor de contrastratio 2,0:1 is. Ook hier geldt hetzelfde probleem in hover- en focustoestand.

Onder de kop “Uitgelicht nieuws” staan er datums boven nieuwsitems, bijvoorbeeld “9 mei 2025”. Deze tekst is grijs (#ADAEAD) op een witte achtergrond, waardoor de contrastratio 2,2:1 is. Een soortgelijk probleem doet zich voor bij dezelfde datums op pagina https://vveladen.nl/nieuws/.

Onderaan deze pagina staat onder de kop “Adviseur inschakelen” een link met blauwe (#327AC1) tekst “Subsidie en adviseurs” op een witte achtergrond. Deze link heeft een onvoldoende contrast van 4,48:1. Dezelfde kleurcombinatie wordt gebruikt op andere pagina’s: op pagina https://vveladen.nl/veelgestelde-vragen/ voor teksten in gesloten en geopende accordeons en voor links binnen accordeons, en op pagina https://vveladen.nl/contact/ voor alle blauwe links.

Oplossing:

Zorg dat het contrast minimaal 4,5:1 is.

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "Werkplan (hoort bij het stappenplan)", "Bijlage 5.1 bij het werkplan: modellen gemeenschappelijk laadpunten", en "Bijlage 5.2 bij het werkplan: modellen privé-laadpunten".

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.

Link met een afbeelding, linkdoel is onbekend

Op deze pagina fungeert een afbeelding onder “Stappenplan” als link, maar het alt-attribuut is leeg (alt=""), waardoor de afbeelding wordt verborgen voor screenreaders.

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 op deze pagina voor bij een afbeeldingslink onder de kop “Printversie” en op andere pagina’s: https://vveladen.nl/subsidie/ en https://vveladen.nl/nieuws/nieuwe-notificatieregeling-laadpunten-wat-verandert-er-voor-vves/ bij de afbeeldingslinks onderaan de pagina’s.

Oplossing:

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen:

• Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).

• aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link.

• Combineren met aangrenzende tekst: je kunt de link semantisch koppelen aan bestaande tekst die erboven of eronder staat. Dit kan vaak met een kop-element of een lijststructuur.

Link heeft geen toegankelijke naam

Op deze pagina ontbreken onder de kop “Uitgelicht nieuws” toegankelijke namen bij links.

Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Oplossing:

Voorzie deze links van toegankelijke namen, bijvoorbeeld door een beschrijvende linktekst te gebruiken, een aria-label toe te voegen of andere geschikte technieken toe te passen.

Links in lopende tekst verschillen alleen in kleur

De laatste alinea van deze pagina bevat de link “Subsidie en adviseurs” die alleen door kleur wordt onderscheiden van gewone tekst. Dit is een toegankelijkheidsprobleem voor bezoekers met een beperkt gezichtsvermogen of kleurenblindheid.

Een vergelijkbare situatie is te zien op andere pagina’s:

• op pagina https://vveladen.nl/subsidie/ met links zoals “de SVVE”, “op de website van RVO”, “Subsidie Advieskosten oplaadpunten” en andere,
• op pagina https://vveladen.nl/veelgestelde-vragen/ met links in accordeons zoals “subsidies en de voorwaarden”, “deskundig laadpuntenadvies” en andere,
• op pagina https://vveladen.nl/nieuws/nieuwe-notificatieregeling-laadpunten-wat-verandert-er-voor-vves/ met links zoals “subsidie voor oplaadpuntenadvies en basislaadinfrastructuur” en “stappenplan laadinfrastructuur voor VvE’s” en op andere pagina’s.

Oplossing:

Links moeten te onderscheiden zijn door minstens één visueel kenmerk dat niet gebaseerd is op kleur. Overweeg:

• Onderstrepen: Onderstreep de link.
• Rand: Voeg een subtiele rand toe aan de link.

Link naar pagina: https://vveladen.nl/contact/

Problemen met contrast zijn beschreven in de vorige sectie.

strong-element is gebruikt in koptekst

Op deze pagina staan de koppen “Deze website is van” en “Partners”. Voor deze koppen zijn het heading-element en het strong-element gebruikt.

Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Oplossing:

Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.

Link naar pagina: https://vveladen.nl/veiligeparkeergarages/

Iframe heeft geen toegankelijke naam

Deze pagina bevat twee iframes zonder beschrijving die zichtbaar is voor een schermlezer. Het title-attribuut ontbreekt.

Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

De Vimeo-video’s gebruiken letters als sneltoetsen

Deze pagina bevat twee video’s die gebruikmaken van sneltoetsen met één teken.

De Vimeo-speler gebruikt sneltoetsen, zoals de ‘s' om een video te delen en de 'd’ om technische details te bekijken. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.

Oplossing:

Je lost dit op door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina wordt onder de kop “Introductie toekomstbestendige parkeergarages” een video getoond. De video bevat teksten, namen van sprekers en logo’s op verschillende momenten, bijvoorbeeld de tekst “Toekomstbestendige parkeergarages” rond 0:00-0:02, “Ron Galesloot - Brandweer” rond 0:03-0:05, het logo “Gemeente Amsterdam” rond 2:00 en andere teksten. Er wordt echter geen media-alternatief of audiobeschrijving aangeboden. Deze video bevat visuele informatie (teksten en logo’s) die niet toegankelijk is voor blinde gebruikers.

Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Een soortgelijk probleem doet zich voor bij de video onder de kop “Welke maatregelen kunt u in uw VvE nemen?”, die ook namen van sprekers bevat en aan het einde van de video hetzelfde logo “Gemeente Amsterdam” toont.

Oplossing:

Dit kan voor het succescriterium 1.2.3 worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Kleurcontrast van tekst is te laag

Op deze pagina staan onder de kop “Veiligheid” accordeons. De tekst op de openende elementen is grijs (#888888) op een witte achtergrond (#F4F4F4) en heeft een contrastratio van 3,2:1.

Oplossing:

De contrastratio moet minimaal 4,5:1 zijn.

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

Op deze pagina zijn er secties met verborgen inhoud. Hoewel de open of gesloten toestand visueel duidelijk is, wordt deze niet programmatisch doorgegeven aan screenreaders. 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.

Een soortgelijk probleem doet zich voor bij accordeons op pagina: https://vveladen.nl/veelgestelde-vragen/.

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.

Link naar pagina: https://vveladen.nl/nieuws/

Problemen met contrast zijn beschreven in de vorige secties.

Afbeelding is een link, maar heeft geen alt-tekst

Op deze pagina bestaan nieuwsartikelen uit gelinkte afbeeldingen met lege alt-attributen en gelinkte artikelkoppen die naar dezelfde bestemming leiden.

Daardoor hebben de links op de afbeeldingen geen inhoud en geen bestemming (succescriterium 2.4.4).

Een soortgelijk probleem doet zich voor op pagina https://vveladen.nl/author/c-poortmrae-nl/ bij nieuwsartikelen en op pagina https://vveladen.nl/?s=werk.

Oplossing:

Om de links toegankelijk te maken, zou je de afbeeldingen tekstalternatieven kunnen geven die het linkdoel beschrijven. Een betere oplossing is om de links op de afbeeldingen te verwijderen. Onder elke afbeelding staat namelijk ook al een link (de kop van het artikel). Met JavaScript kun je het klikbare gebied van die link uitbreiden naar de afbeelding. Dit heeft de volgende voordelen:

• Enkele, duidelijke link: er blijft maar één link over, met een duidelijk linkdoel (beschreven in de koptekst).
• Gebruiksvriendelijker: de afbeelding blijft klikbaar, en dit verbetert de gebruikservaring.
• Minder herhaling: de dubbele link is weg en er is geen reden meer om de afbeelding een alt-tekst te geven (die een herhaling zou zijn van de koptekst).

Leesvolgorde in het nieuwsartikel is niet logisch

Op deze pagina is de HTML-volgorde van elementen binnen nieuwsartikelen: een link met een afbeelidng, datum, kop, tekst, auteur. De leesvolgorde van deze inhoud is niet betekenisvol.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke afbeeldingen en datums bij welk artikel horen. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dit kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Een soortgelijk probleem doet zich voor bij nieuwsartikelen op pagina https://vveladen.nl/author/c-poortmrae-nl/.

Oplossing:

Je lost dit op door alle inhoud (afbeeldingen en tekst) die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken. Een alternatieve oplossing is om alle afbeeldingen bij de artikelen als decoratief te markeren. Dat doe je door de alt-tekst leeg te laten (alt="" op het img-element). Dan wordt de afbeelding onzichtbaar voor de schermlezer. De leesvolgorde is dan: koptekst - inhoud.

Link naar pagina: https://vveladen.nl/author/c-poortmrae-nl/

Problemen met het contrast van teksten en iconen, de leesvolgorde, het benoemen van links en andere punten zijn beschreven in de vorige secties.

Het kleurcontrast van informatieve iconen is laag

Op deze pagina staat naast elk artikel een “heart”-icoon dat wordt gebruikt om een artikel te liken. Deze iconen zijn grijs (#C5C5C5) op een witte achtergrond en hebben een lage contrastratio van 1,7:1.

Oplossing:

Zorg dat alle informatieve afbeeldingen een contrastratio van meer dan 3,0:1 hebben.

Tekst, links en toegankelijke namen staan in het Engels

Op deze pagina staan meerdere links in het Engels, zoals “Read more”. Schermlezers zullen deze Engelse labels uitspreken volgens de uitspraakregels van de hoofdtaal van de pagina, die in dit geval Nederlands is. Dit kan leiden tot een verkeerde uitspraak en het moeilijk maken om de labels te begrijpen.

Er zijn nog enkele andere plaatsen op deze en andere pagina’s waar Engels wordt gebruikt: de tekst “All Posts By” bovenaan de pagina, de pijl-links in de paginering met de toegankelijke namen “Previous” en “NextPrevious”, de knop “Search” en de placeholder en ook op pagina https://vveladen.nl/page/2/?s=werk waar de pagineringslinks de namen “Previous Entries” en “Next Entries” hebben.

Oplossing:

Vertaal deze teksten in het Nederlands zodat ze correct worden uitgesproken door schermlezers.

Linktekst is niet duidelijk genoeg

Op deze pagina bevatten meerdere links de vage tekst "Read more". Deze tekst beschrijft de bestemming van de link niet voldoende en zorgt voor onduidelijkheid, vooral voor bezoekers met cognitieve beperkingen of voor bezoekers die gebruikmaken van een schermlezer.

Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘lees meer (over het project)’ of ‘lees meer (in onze blog)’.

Het doel van de link is niet duidelijk genoeg.

Onderaan deze pagina staan twee links met pijlen die dienen voor navigatie. Ze hebben de volgende toegankelijke namen: “Previous” en “NextPrevious”. Voor ziende bezoekers is duidelijk dat de pijlen paginanavigatie voorstellen, maar dit is niet duidelijk voor bezoekers met een visuele beperking of voor bezoekers die gebruikmaken van een schermlezer.

Oplossing:

Door het woord "pagina" toe te voegen aan de linktekst (bijvoorbeeld "Vorige pagina", "Volgende pagina") wordt de nodige context geboden en de toegankelijkheid verbeterd.

Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, gaat de volgende tekst en functionaliteit verloren: de tekst “All posts by” bovenaan de pagina, de datums (bijvoorbeeld “Jun 17”) en de “heart”-iconen naast elk artikel.

Hetzelfde probleem doet zich voor bij zoom 400%, wat ook in strijd is met SC 1.4.10.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/

Problemen met het contrast van teksten en interactieve of informatieve elementen, de namen van links en andere punten zijn beschreven in de vorige secties.

Iframe heeft geen toegankelijke naam

Deze pagina bevat een iframe zonder een title-attribuut.

Iframes moeten een goede beschrijving hebben. Die staat meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Voeg het title-attribuut aan het iframe-element toe, en zet daar een tekst in waaruit blijkt welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Disclaimer: Op deze pagina staat een iframe dat wordt geleverd door een externe applicatie. Binnen de scope van deze audit worden slechts enkele toegankelijkheidsproblemen beschreven om ontoegankelijkheid te illustreren. Een volledige audit van dit component is niet uitgevoerd, omdat het is geïmplementeerd als een externe oplossing en buiten de controle van het ontwikkelingsteam van de website valt.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt het toetsenbordfocus na de “share”-link op meerdere onzichtbare interactieve elementen terecht.

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

Op deze pagina staan kleine en grote teksten in blauwe (#009FE3) kleur op een grijze (#E7E7E7) achtergrond . De contrastratio is 2,4:1 en voldoet niet aan de minimum vereiste waarde (voor tekst tot 24 px of vetgedrukt moet dit minimaal 4,5:1 zijn en voor grote tekst vanaf 24 px of vetgedrukt minimaal 3,0:1).

Oplossing:

Verhoog het contrast zodat dit minimaal 3,0:1 is voor grote tekst en minimaal 4,5:1 voor kleine tekst.

De naam van de knop beschrijft niet wat de knop doet

Onderaan deze pagina staan knoppen “Vorige” en “Volgende” waarmee stappen kunnen worden gewijzigd, maar hun toegankelijke namen zijn “<” en “>”. Deze beschrijven de functie van de knop niet. Hierdoor is het voor blinde bezoekers en bezoekers die gebruikmaken van een schermlezer moeilijk te begrijpen wat het doel van de knoppen is. De toegankelijke naam moet duidelijk en beknopt aangeven welke actie de knop uitvoert.

Oplossing:

Werk de toegankelijke namen bij (bijvoorbeeld met aria-label) zodat deze de functie van de knoppen correct weergeven, bijvoorbeeld “Ga naar de vorige stap” en “Ga naar de volgende stap”.

Invoerveld heeft geen toegankelijke naam

In de tweede stap staan twee invoervelden, maar hun labels zijn niet correct gekoppeld aan de invoervelden. Hierdoor ontbreken toegankelijke namen.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

Link naar pagina: https://vveladen.nl/?s=werk

Problemen met contrast, links, pagineringslinks, de leesvolgorde en andere punten zijn beschreven in de vorige secties.

Link naar pagina: https://vveladen.nl/video/

Het type content in het iframe is niet beschreven in het title-attribuut

Deze pagina bevat twee iframes met in de title-attributen "Ondersteuning en advies voor eigen laadpalen op VvE terrein" en "Aan de slag met laadpunten voor een VvE garage".

Er moet ook in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

De Youtube-video’s gebruiken letters als sneltoetsen

Deze pagina bevat twee YouTube-videospelers die gebruikmaken van sneltoetsen met één teken.

De Youtube-speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.

Oplossing:

Je lost dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Video bevat tekst die niet toegankelijk is voor een blinde bezoeker

Op deze pagina staat onder de kop "Voorbeeld VvE: Het Bastion" een video. In de video verschijnt aan het einde tekst en URLs (bijvoorbeeld rond 4:06). Er wordt echter geen media-alternatief of audiobeschrijving aangeboden. Daardoor is deze visuele informatie niet toegankelijk voor blinde bezoekers.

Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Dit kan voor het succescriterium 1.2.3 worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

Link naar pagina: https://vveladen.nl/nieuws/nieuwe-subsidie-voor-basislaadinfrastructuur-bij-vves/

Problemen met contrast, verkeerd gebruik van strong-elementen in plaats van koppen en afbeeldingslinks zijn beschreven in de vorige secties.

em-element is gebruikt voor opmaak

Op deze pagina onder de kop "Nieuwe subsidie voor basislaadinfrastructuur bij VvE’s" wordt het em-element gebruikt voor opmaakdoeleinden. De hele paragraaf is in een em-element geplaatst.

Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

Link naar pagina: https://vveladen.nl/toegankelijkheid/

Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de volgende tekst gedeeltelijk verloren: “Toegankelijkheidsverklaring”.

Oplossing:

Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Link naar pagina: https://vveladen.nl/

Link naar PDF: https://vveladen.nl/wp-content/uploads/2022/04/NAL-BROCHURE_TOEGANKELIJK.pdf

Kleurcontrast van tekst is te laag

In het pdf-document wordt op veel pagina’s een combinatie gebruikt van witte tekst op een oranje (#E17000) achtergronden omgekeerd, bijvoorbeeld op pagina’s 1, 3, 5, 6 en andere. De contrastratio is 3,2:1. Dit is toelaatbaar voor grote teksten zoals koppen, maar onvoldoende voor gewone of kleine teksten.

Op sommige pagina’s wordt tekst in dezelfde oranje kleur gebruikt op een lichtoranje (#F9E2CC) achtergrond. De contrastratio is in dit geval 2,6:1, wat zowel voor kleine als voor grote teksten onvoldoende is. Voorbeelden hiervan zijn de tekst “Fase I Voorbereiding” op pagina 3, de teksten in de eerste rij van de tabel op pagina 5, de tekst “Hoe worden laadpunten aangesloten?” op pagina 15 en andere pagina’s.

Op pagina 4 staat een afbeelding met witte teksten op een blauwe (#469AD3) achtergrond, bijvoorbeeld “Elektriciteitsmeter”, “Data verbinding”, “Load balancer” en andere. De contrastratio is 3,1:1.

Op pagina 5 staat een tabel. In de tweede en derde rij worden blauwe (#007BC7 en #01689B) teksten gebruikt op lichtblauwe (#E0EFF8 en #C0D9E6) achtergronden. De contrastratio is respectievelijk 3,8:1 en 4,1:1. Dit is niet voldoende voor kleine teksten.

Oplossing:

Zorg dat het kleurcontrast minimaal 3,0:1 is voor grote tekst en minimaal 4,5:1 voor kleine tekst.

Koppen zijn niet als kop gemarkeerd

In het pdf-document zijn er meerdere koppen die niet als kop zijn gemarkeerd. Voorbeelden hiervan zijn “Laadoplossingen voor elektrische auto’s binnen de VvE” op pagina 1, “Hoe laadt een elektrische auto eigenlijk?”, “Laden bij de VvE” en “Is het laden van elektrische auto’s veilig?” op pagina 4, “Tip” op pagina 6 en 9, en andere koppen op andere pagina’s.

Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

Gewone tekst is gemarkeerd als kop voor styling

In het pdf-document worden op pagina 44 koppen gebruikt om gewone tekst visueel opvallender te maken. Concreet gaat het om de teksten die beginnen met "5.1.1…", “5.1.2…”, “5.1.3…”, “5.2.1…” en vergelijkbare teksten. Deze zijn opgemaakt als kop, terwijl het geen koppen zijn.

Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de H-tag door de P-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

Informatieve afbeeldingen hebben geen alt-tekst

In het pdf-document staan op de eerste en op de laatste pagina informatieve afbeeldingen (logo’s) zonder tekstalternatieven (alt-tekst).

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alternatieve tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.

Oplossing:

Voeg tekst alternatief toe aan deze informatieve afbeeldingen.

Link naar pagina: https://vveladen.nl/veiligeparkeergarages/

Link naar PDF: https://vveladen.nl/wp-content/uploads/2024/04/TOD24009_Document_Brandveiligheid-VvE-garages_V4_WEB-DT.pdf

Koppen zijn niet als kop gemarkeerd

In het pdf-document is de kop “Is de brandveiligheid in uw vve-garage nog op orde?” niet als kop gemarkeerd.

Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

Een deel van het document is niet voorzien van codes

In het pdf-document is slechts gedeeltelijk getagd. De volgende inhoud is niet getagd: tekst “‘QuickScan: zicht op concrete verbeteringen’”.

Oplossing:

Voorzie dit gedeelte van codes die de structuur van het document weergeven.

Informatieve afbeeldingen hebben geen alt-tekst

In het pdf-document staan bovenaan de eerste pagina drie logo’s die informatieve afbeeldingen zijn, maar geen tekstalternatieven (alt-tekst) hebben.

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alternatieve tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.

Oplossing:

Voeg tekst alternatief toe aan deze informatieve afbeeldingen.

Link naar pagina: https://vveladen.nl/subsidie/

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “Subsidie” het strong-element misbruikt voor opmaak. De volledige paragraaf is in een strong-element geplaatst om deze vet te maken.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

strong-element in plaats van kop-element

Op deze pagina zijn de volgende teksten onjuist gemarkeerd met strong in plaats van met correcte heading-elementen: “Oplaadpuntenadvies”, “Basislaadinfrastructuur” en “Meer weten?”.

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h3. 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.

Een vergelijkbaar probleem doet zich voor op pagina’s:

• https://vveladen.nl/veiligeparkeergarages/ met de kop “8 tips voor digitale veiligheid van oplaadpunten bij VvE’s:” binnen het accordeon “Hoe zorg ik dat mijn oplaadpunt ook digitaal veilig is?”,
• https://vveladen.nl/veelgestelde-vragen/ met de kop “Risico op dubbele btw” binnen het accordeon “Wat kost laden bij een laadpaal binnen een VvE?”,
• https://vveladen.nl/nieuws/nieuwe-notificatieregeling-laadpunten-wat-verandert-er-voor-vves/ met de koppen “Van toestemming naar melding”, “Wat betekent dit voor VvE’s?”, “Zet laadinfrastructuur dit jaar op de agenda” en ook op andere pagina’s.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h3 of h4.

Link naar pagina: https://vveladen.nl/veelgestelde-vragen/

Problemen met contrast en accordeons zijn beschreven in de vorige secties.

Link naar pagina: https://vveladen.nl/nieuws/nieuwe-notificatieregeling-laadpunten-wat-verandert-er-voor-vves/

Kleurcontrast van tekst is te laag

Op deze pagina staat onder de kop “Nieuwe notificatieregeling laadpunten: wat verandert er voor VvE’s?” de tekst “By Corinne Poort | 29 april 2025”. De tekst is grijs (#888888) op een witte achtergrond en heeft een contrastratio van 3,5:1.

Dezelfde kleurcombinatie wordt gebruikt op pagina https://vveladen.nl/author/c-poortmrae-nl/ bij de tekst “All Posts By” en bij kleine teksten “By Corinne Poort” onder artikelkoppen, en op pagina https://vveladen.nl/?s=werk bij de tekst “"werk"” bovenaan de pagina.

Oplossing:

De contrastratio moet minimaal 4,5:1 zijn.

De contrastratio van informatieve elementen is onvoldoende

Bovenaan deze pagina hebben de informatieve iconen “heart” en “share” onvoldoende contrast. De grijze (#999999) iconen tegen de witte achtergrond hebben een contrastratio van 2,8:1, wat lager is dan de vereiste 3,0:1 voor grafische elementen die informatie overbrengen.

Hetzelfde probleem doet zich voor bij de iconen van sociale media die verschijnen bij hover boven het icoon “Share” en op andere pagina’s met deze iconen: https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/, https://vveladen.nl/nieuws/nieuwe-subsidie-voor-basislaadinfrastructuur-bij-vves/.

Oplossing:

Zorg dat informatieve elementen een contrastratio hebben van minimaal 3,0:1 ten opzichte van de achtergrond.

Title-attributen bij links zijn in het Engels

Bovenaan deze pagina staat een icoon “heart” dat als link dient. Deze link heeft een title-attribuut in het Engels: “Love this”. De Engelse tekst wordt door screenreaders volgens de uitspraakregels van de hoofdtaal van de pagina uitgesproken, in dit geval het Nederlands. Dit kan tot verkeerde uitspraak leiden en maakt de titel moeilijk te begrijpen. Deze tekst verschijnt als je de muis over het hartje beweegt. Voor ziende bezoekers die Engelse taal niet kennen kan dit ook een barrière zijn.

Hetzelfde probleem geldt voor de socialmedia-iconen die bij hover boven het icoon “Share” verschijnen, met titles zoals “Share this”, “Tweet this”, en ook op andere pagina’s: https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/ en op pagina https://vveladen.nl/author/c-poortmrae-nl/ met het “heart”-icoon dat als link naast elk artikel staat.

Oplossing:

Vertaal de tekst in het attribuut title naar het Nederlands zodat deze correct wordt uitgesproken door schermlezers.

Iconen hebben geen tekstalternatieven, waardoor links geen duidelijk doel hebben

Bovenaan deze pagina staan links met een “heart”- en een “share”-icoon. De iconen hebben geen tekstalternatieven (SC 1.1.1), waardoor de bijbehorende links geen duidelijk doel hebben (SC 2.4.4). Hierdoor is het voor blinde bezoekers en voor bezoekers die gebruikmaken van een schermlezer niet mogelijk te begrijpen waar de links naartoe verwijzen.

Hetzelfde probleem geldt voor de socialmedia-iconen die bij hover boven het icoon “Share” verschijnen, met titels zoals “Share this”, “Tweet this”, en ook op andere pagina’s: https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/ en op pagina https://vveladen.nl/author/c-poortmrae-nl/ met het “heart”-icoon dat als link naast elk artikel staat.

Oplossing:

Voorzie de link van betekenisvolle inhoud. Dit kan worden gedaan door:

• 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.

Tooltip wordt niet getoond bij toetsenbordfocus

Bovenaan deze pagina staat een “share”-icoon dat een tooltip opent. Als met de muis over dit icoon wordt bewogen, wordt een tooltip met verschillende sociale media geopend. Dit gebeurt niet bij toetsenbordfocus.

Hierdoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien. De informatie in de tooltip is voor hen dus niet toegankelijk.

Een soortgelijk probleem is aanwezig bij de tooltips die op hover boven de “i”-iconen op de pagina worden weergegeven https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/ (Stap 2).

Oplossing:

Zorg dat de tooltips ook openen als ze toetsenbordfocus krijgen.

Extra content kan niet met de ESC-toets gesloten worden

Bovenaan deze pagina staat een “share”-icoon dat extra content opent. Wanneer een bezoeker met de muis over dit icoon beweegt, verschijnt een rijtje knoppen. Deze content overlapt het “heart”-icoon eronder en het is niet mogelijk deze content te sluiten met de ESC-toets.

Een soortgelijk probleem is aanwezig bij de tooltips die op hover boven de “i”-iconen op de pagina worden weergegeven https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/ (Stap 2).

Oplossing:

Zorg dat bezoekers deze content met de Esc-toets kunnen sluiten.

(Advies) Links hebben geen inhoud, het attribuut title wordt gebruikt om het doel van de link aan te geven

Bovenaan deze pagina staan links om het artikel te liken en te delen. Ze hebben geen tekstuele inhoud maar wel title-attributen “Love this!” en “Share this!”. Hoewel dit niet strikt een overtreding is, is het minder betrouwbaar om uitsluitend op het title-attribuut te vertrouwen voor de linkinhoud dan om verborgen tekst te gebruiken.

Hetzelfde probleem komt voor op alle pagina’s met dergelijke iconen: https://vveladen.nl/nieuws/laadpunten-in-uw-vve-zorg-dat-het-past-op-het-elektriciteitsnet/, https://vveladen.nl/nieuws/nieuwe-subsidie-voor-basislaadinfrastructuur-bij-vves/ en op pagina https://vveladen.nl/author/c-poortmrae-nl/ met het “heart”-icoon dat als link naast elk artikel staat.

Oplossing:

Idealiter wordt de inhoud van de link in tekstvorm aangeboden, visueel verborgen maar beschikbaar voor schermlezers. Gebruik display: none niet voor elementen die toegankelijk moeten zijn voor hulpsoftware. Er kunnen CSS-technieken worden toegepast die de inhoud visueel verbergen maar beschikbaar houden voor schermlezers, bijvoorbeeld met de klasse .sr-only.