Audit digitale toegankelijkheid van website servicepuntduurzameenergie.nl
Samenvatting
Wij hebben de website servicepuntduurzameenergie.nl onderzocht tussen 04 en 14 oktober 2025. Op dit moment zijn 34 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 21 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Er zijn veel gevallen van onvoldoende kleurcontrast voor tekst, onderstrepingen, icoonranden en logo's, wat de leesbaarheid en zichtbaarheid voor gebruikers met visuele beperkingen belemmert. Dit geldt voor zowel kleine als grote tekst en interactieve elementen.
De toetsenbordfocus is op verschillende elementen niet zichtbaar (hoofdmenu, selectievakjes, nieuwskaarten, afbeeldingslinks).
Het mobiele menu werkt niet goed met toetsenbordfocus, waardoor de focus buiten het menu kan bewegen terwijl het open blijft.
Veel iconen en afbeeldingen missen tekstalternatieven of hebben niet-informatieve alt-teksten, waardoor de functie of het doel onduidelijk is voor schermlezergebruikers.
Placeholdertekst wordt gebruikt als label voor invoervelden, wat verdwijnt bij het typen.
Alle pagina's op de website servicepuntduurzameenergie.nl
Alle PDF's op de website servicepuntduurzameenergie.nl
Niet in scope:
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
Basisniveau toegankelijkheidsondersteuning
Mozilla Firefox, versie 142
Google Chrome, versie 140
Apple Safari, versie 18
PAC software to test PDF
NVDA schermlezer in combinatie met Firefox
VoiceOver schermlezer in combinatie met Safari
Andere gangbare browsers en hulpapparatuur
Technologieën van de website
HTML
CSS
JavaScript
WAI-ARIA
SVG
PDF
Over dit onderzoek
Leeswijzer
Onze rapporten zijn anders. Bij het bespreken van de gevonden problemen volgen wij niet de structuur van de norm, maar die van jouw website of app. Hierdoor kun je gewoon per pagina of scherm aan de slag gaan. Wel zo makkelijk! Je vindt verderop een overzicht van alle pagina’s met problemen.
We geven je bij elk gevonden issue een paar voorbeelden, maar niet een complete lijst. Controleer zelf of het probleem ook nog op andere plekken voorkomt. Zie het rapport als een leidraad.
Gebruikte norm
Dit onderzoek laat zien in hoeverre de website op dit moment voldoet aan WCAG 2.2, niveau A en AA. WCAG staat voor Web Content Accessibility Guidelines. Dit is de internationale norm voor digitale toegankelijkheid. De Europese norm EN 301 549 bevat alle eisen van WCAG op niveau A en AA.
In dit rapport hebben we korte beschrijvingen van de succescriteria uit de norm opgenomen, met een algemene uitleg erbij. Wil je ze helemaal lezen? Bekijk dan de documentatie van WCAG.
Gebruikte onderzoeksmethode
We gebruiken de onderzoeksmethode WCAG-EM van het W3C. Het proces ziet er als volgt uit:
vaststellen wat binnen en buiten scope valt
vaststellen welke technologieën zijn gebruikt
steekproef (sample) samenstellen
steekproef onderzoeken
gevonden issues beschrijven
Het grootste deel van het onderzoek doen we met de hand. Voor een deel van de toegankelijkheidseisen gebruiken we automatische tools als ondersteuning, zoals axe-core en Chrome Developer Tools.
Belangrijk om te weten
Dit rapport helpt je om de toegankelijkheid van je website te verbeteren. Maar let op: het is geen definitieve, volledige lijst van alle aanwezige toegankelijkheidsproblemen. Dat zit zo:
Het is een steekproef
Ten eerste is het onderzoek gebaseerd op een steekproef. Die is op een betrouwbare manier genomen, en de meeste problemen zullen daardoor zeker aan het licht komen. Toch kan een probleem net buiten de steekproef vallen. Bij een volgend onderzoek kan het wel ontdekt worden.
Op basis van falsificatie
We beoordelen vanuit het principe van falsificatie. Dat houdt in dat we proberen te bewijzen dat iets niet waar is, in plaats van te bevestigen dat het klopt. ‘Voldoet’ betekent daarom dat we geen reden hebben gevonden om een punt af te keuren. Maar als we later wél een reden vinden, kan het alsnog worden afgekeurd.
Voortschrijdend inzicht
Het komt voor dat de beoordeling van een succescriterium op detailniveau verandert. De norm beschrijft namelijk niet élk mogelijk scenario. Samen met andere onderzoeksbureaus overleggen we hoe we met bepaalde situaties omgaan. Zo kan iets dat nu wordt afgekeurd, soms bij een volgend onderzoek worden goedgekeurd en andersom.
Oplossen leidt tot nieuw probleem
Ten slotte kan het gebeuren dat bij het oplossen van een probleem onbedoeld een nieuw toegankelijkheidsprobleem ontstaat. Dat komt dan bij een volgend onderzoek pas naar voren.
In het hoofdmenu van de website heeft de huidige link een onderstreping met onvoldoende kleurcontrast. Niet alle bezoekers kunnen zien welke link in het menu de actuele pagina is.
Hetzelfde probleem met de onderstreping doet zich voor wanneer menuopties in hover- of focustoestand staan. De groene (#ABC540) onderstreping heeft een contrastratio van 1,9:1 tegen de witte achtergrond, wat lager is dan het aanbevolen minimum van 3,0:1 voor visuele aanduidingen zoals onderstrepingen.
Oplossing:
Zorg dat de onderstreping van de huidige link minimaal een contrast van 3,0:1 heeft met de achtergrond.
Content die verschijnt bij hover moet makkelijk gesloten kunnen worden
Het hoofdmenu heeft items met submenu’s. Wanneer een bezoeker met de muis over deze items beweegt, verschijnen de submenu’s. Deze submenu’s overlappen de inhoud van de pagina, maar kunnen niet worden afgesloten zonder de muis te verplaatsen.
Oplossing:
De bezoeker moet deze extra content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.
Toetsenbordfocus is niet zichtbaar
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op alle pagina’s van de website is de toetsenbordfocus niet zichtbaar op de volgende elementen: de link “Contact” in het hoofdmenu en een selectievakje in de footer onder het veld “Email”.
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:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
Op veel pagina’s van de website wordt de combinatie van wit en groen (#ABC540) gebruikt. De contrastratio is 1,9:1 en voldoet niet aan de minimaal vereiste waarde. Enkele voorbeelden, dit is geen volledige lijst:
submenu-opties in het hoofdmenu wanneer ze in focus- of hovertoestand staan
Zorg dat de contrastratio voor tekst tot 24 px of vet minimaal 4,5:1 is, en voor grote tekst vanaf 24 px of vet minimaal 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Placeholdertekst wordt gebruikt als label voor een invoerveld
In de footer, in het inschrijfformulier, staat een invoerveld met plaatshoudertekst “Email”. Er ontbreekt echter een blijvend label, de placeholder-tekst wordt gebruikt als label.
Invoervelden moeten een label hebben dat altijd zichtbaar is. Je kunt hier dus niet een placeholder-tekst voor gebruiken, want die verdwijnt zodra de bezoeker begint te typen.
Oplossing:
Voeg een permanent zichtbaar label toe bij het invoerveld.
In de footer, in het inschrijfformulier, heeft het invoerveld “Email” HTML5-validatie, waarbij standaard HTML5-foutmeldingen worden getoond wanneer het formulier met lege of onjuiste gegevens wordt verzonden.
Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig.
Oplossing:
Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.
Voor de validatie is alleen HTML5-validatie gebruikt
In de footer, in het inschrijfformulier, staat onder het veld “Email” een selectievakje. De contrastratio tussen de grijze (#CCCCCC) rand en de blauwe (#E8F6FC) achtergrond van het formulier is 1,5:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
In de footer staat een inschrijfformulier. Wanneer het formulier wordt verzonden met een leeg veld “Email” en niet-aangevinkte selectievakjes, bestaat de foutmelding alleen uit de kleurverandering van de rand van het veld en de tekst van het label.
Dit is niet toegankelijk voor bezoekers die de kleur helemaal niet kunnen zien of die kleurenblind zijn.
Oplossing:
Zorg ervoor dat informatie niet alleen met kleur wordt overgedragen. Gebruik daarnaast nog andere manieren om fouten of ontbrekende informatie door te geven, bijvoorbeeld met tekst of iconen.
Foutmeldingen hebben te weinig contrast
In de footer staat een inschrijfformulier. Wanneer het formulier wordt verzonden met een leeg veld “Email” en niet-aangevinkte selectievakjes, kleurt het selectievaklabel “Door je in te schrijven…” rood. Het staat rood tegen de blauwe (#E8F6FC) achtergrond. De resulterende contrastratio is 4,3:1.
Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.
Oplossing:
Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.
Blinde bezoekers krijgen geen bericht van de foutmelding
In de footer staat een inschrijfformulier met een reCaptcha. Wanneer de verificatie om een of andere reden mislukt, verschijnt er een foutmelding binnen de reCaptcha-sectie. Dit bericht is een statusmelding maar wordt niet door de screenreader aangekondigd.
Oplossing:
Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.
Blinde bezoekers krijgen geen bericht dat het formulier is verzonden
In de footer van de website staat een inschrijfformulier. Wanneer het met correcte gegevens wordt verzonden, verschijnt er na verzending een succesmelding zonder dat de pagina opnieuw wordt geladen. Een schermlezer kan dit bericht alleen voorlezen aan een blinde bezoeker als het bericht in de code als statusbericht is gemarkeerd.
Oplossing:
Daarvoor moet het bericht het attribuut aria-live="polite" of role="status" krijgen. Dit zorgt ervoor dat schermlezers het bericht automatisch voorlezen.
Onderaan alle pagina’s staat een vaste knop “Back to top”. Wanneer de knop op een lichtere achtergrond verschijnt, heeft het witte icoon een onvoldoende contrastratio, bijvoorbeeld 1,8:1, op een grijze (#BFBFBF) achtergrond.
Hierdoor kunnen bezoekers met een visuele beperking of kleurenblindheid het icoon niet (goed) zien.
Oplossing:
Gebruik een kleurencombinatie die voldoende contrast heeft. Het contrast dient minimaal 3,0:1 te zijn.
Op verschillende pagina’s van de website zijn er elementen met toegankelijke namen in het Engels, terwijl de rest van de website in het Nederlands is. Ze moeten in dezelfde taal staan als de primaire inhoud van de website. Enkele voorbeelden, dit is geen volledige lijst: * op alle pagina’s de knop “Back to top”
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.
Oplossing:
Zorg dat de webpagina’s op meerdere manieren bereikbaar zijn.
Zoomen is niet mogelijk in oudere browsers door bepaalde code
Impact: GrootType: TechniekWCAG: 1.4.4EN: 9.1.4.4
Op alle pagina’s staan in het head-element van de HTML-code maximum-scale=1 enuser-scalable=0.
Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.
Oplossing:
Verwijder deze code.
Mobiel menu werkt niet goed met toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
De menuknop staat bovenaan de pagina. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord uit het mobiele menu navigeren. De toetsenbordfocus verplaatst zich dan 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.
Wanneer de website op een klein scherm wordt bekeken, bevat het mobiele menu submenu’s die niet met het toetsenbord te bedienen zijn (voor de opties “Thema’s” en “Over het SPDE”).
Oplossing:
Zorg dat submenu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze submenu’s toegankelijk is voor alle bezoekers. De pagina’s waar de hoofdnavigatie-items naar linken, bevatten namelijk niet alle informatie die in de submenu’s staat.
Slides kunnen niet met muis of gebaar worden bediend
Impact: KleinType: TechniekWCAG: 2.5.1EN: 9.2.5.1
Wanneer deze pagina op een klein scherm wordt bekeken, maakt de carrousel onder de kop “Laatste nieuws” het mogelijk om dia’s horizontaal te verslepen om te navigeren.
Moet je speciale handelingen uitvoeren om door een carrousel te navigeren, zoals vegen of slepen met een muis? Dan moet er ook een eenvoudigere manier zijn om dit te doen. Dit is bedoeld voor bezoekers die geen precieze bewegingen kunnen maken of die hulpmiddelen gebruiken zoals hoofdaanwijzers, oogbesturingssystemen of spraakgestuurde muisemulators. Sommige aanwijsapparaten ondersteunen geen multi-touch- of trackpadgebaren, of zijn niet nauwkeurig genoeg voor complexe bewegingen.
De carrousel moet ook te bedienen zijn met eenvoudige klikken of tikken, of met knoppen of pijltjestoetsen.
(Best practice) Knoppen hebben niet de juiste rol.
Impact: KleinType: TechniekWCAG: 4.1.2EN: 9.1.4.2
Op veel pagina’s van de website zijn er knoppen die onjuist als een a-element (link) gecodeerd zijn. 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, dit is geen volledige lijst:
Bovenaan deze pagina wordt een animatie automatisch afgespeeld die niet gepauzeerd of gestopt kan worden.
Het kan storend zijn voor mensen met een cognitieve beperking als een video, GIF of animatie op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.
Er moet een manier zijn voor bezoekers om dit soort multimedia te stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.
Op deze pagina staan onder “Laatste nieuws” nieuwsberichten met witte tekst tegen verschillende achtergronden. Sommige daarvan hebben een zeer laag contrast. Zo heeft op een van de kaarten de witte tekst die begint met “SPDE-kernteamlid Sjoerd Feitsma…” op sommige plaatsen een contrastratio van 1,5:1 tegen de achtergrond.
Tekst die kleiner is dan 24 px moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 24 px of 19 px en vetgedrukt is dit minimaal 3,0:1. Controleer andere nieuwsberichten op deze pagina.
Toetsenbordfocus is niet zichtbaar
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op deze pagina is de toetsenbordfocus niet zichtbaar op de links met afbeeldignen onder de kop “Laatste nieuws”.
De toetsenbordfocus moet altijd zichtbaar zijn op links, knoppen en invoervelden, zodat toetsenbordgebruikers duidelijk zien waar ze zich bevinden en wanneer ze Enter moeten drukken. Hetzelfde probleem doet zich voor bij de identieke sectie “Laatste nieuws” op de pagina https://servicepuntduurzameenergie.nl/podcast-warmtewerkt//.
Oplossing:
Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.
Op deze pagina staat onder “Laatste nieuws” een carrousel met nieuwsberichten. De carrousel heeft pijlkoppen voor navigatie, maar de toetsenbordfocus is daar niet logisch op. De toetsenbordfocus gaat eerst langs alle kaarten, verschuift daarna naar de knop “Next” en gaat na het aanklikken verder naar elementen onder de carrousel. Dit verstoort de verwachte volgorde voor toetsenbordgebruikers.
Oplossing:
Na het aanklikken van de knoppen “Previous” en “Next” moet de focus verschuiven naar de vorige of volgende kaart in de carrousel.
Het contrast van de tekst op knoppen is minder dan 4,5:1.
Op deze pagina hebben onder de kop “Snel naar…” knoppen met de tekst “Energierechtvaardigheid”, “Warmtebronnen” en andere onvoldoende kleurcontrast. De witte tekst tegen de blauwe (#4EBAEB) achtergrond heeft een contrastratio van 2,2:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor standaardtekst. Hetzelfde probleem doet zich voor bij de knop “LinkedIn” op de pagina https://servicepuntduurzameenergie.nl/podcast-warmtewerkt/ onder de kop “Volg ons op Spotify en Linkedin”.
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is.
Onvoldoende kleurcontrast bij logo’s in niet-corporate kleuren
Op deze pagina onder de kop "Snel naar..." staan verschillende logo's met teksten van verschillende groottes. Deze teksten zijn grijs (bijvoorbeeld #B0B0B0) op een witte achtergrond en hebben onvoldoende contrast (bijvoorbeeld 2,2:1).
Oplossing:
Tekst kleiner dan 24 px (of 19 px en vetgedrukt) moet een contrastratio van minimaal 4,5:1 hebben, terwijl grotere of vette tekst minimaal een contrastratio van 3,0:1 moet hebben.
Bezoekers hebben beperkte tijd om teksten in carrousel te lezen
Onder de kop “Snel naar…” staat op deze pagina een automatisch roterende carrousel met logo’s die tekst bevatten. De automatische rotatie beperkt de tijd die bezoekers hebben om de tekst te lezen, wat een toegankelijkheidsprobleem veroorzaakt.
Oplossing:
Dit zou opgelost kunnen worden door een pauzeknop toe te voegen. Dit is ook meteen een oplossing voor succescriterium 2.2.2 (Pauzeren, stoppen, verbergen).
Logo heeft geen alternatieve tekst
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Op deze pagina staat onder de kop “Snel naar…” een logo “Provincie Noord-Holland” zonder tekstalternatief.
Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Door de alt-tekst niet in te vullen, zeg je eigenlijk: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.
Oplossing:
Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
Logo’s hebben niet-informatieve alternatieve teksten
Op deze pagina staan onder de kop “Snel naar…” verschillende grijze logo’s die allemaal dezelfde alt-tekst “client” hebben, wat afwijkt van hun zichtbare tekst. De alt-tekst moet alle zichtbare tekst in het logo bevatten zodat bezoekers die de afbeelding niet kunnen zien dezelfde informatie ontvangen. Omdat deze logo’s ook als links functioneren, worden succescriteria 2.4.4 (niet-beschrijvende alt-tekst, waardoor de linkbestemming onbekend is) en 2.5.3 (link achter het logo kan niet met spraak worden geactiveerd) eveneens geschonden.
Op deze pagina ontbreekt bij een formulier met invoervelden voor persoonlijke gegevens (voornaam, e-mailadres) het attribuut autocomplete.
Invoervelden voor persoonlijke informatie zoals naam, e-mailadres moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.
Oplossing:
Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.
De kleur van de rand van het invoerveld heeft niet genoeg contrast
Op deze pagina staat een formulier met drie invoervelden. De contrastverhouding tussen de grijze (#BFBFBF) rand van een invoerveld en de achtergrond van de pagina is 1,8:1.
Oplossing:
De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.
Foutmelding is een instructie in plaats van een uitleg over de fout
Wanneer het formulier op deze pagina met lege velden wordt verzonden, worden de volgende foutmeldingen getoond: “Dit veld is vereist”.
De huidige foutmeldingen zijn vaak instructies in plaats van uitleg over wat er fout is gegaan. Foutmeldingen moeten specifieker zijn en de aard van de fout uitleggen.
Oplossing:
Verander de teksten van de foutmeldingen, zodat bezoekers weten wat zij niet goed hebben gedaan.
Het bericht dat het formulier succesvol is verzonden, is in het Engels.
Deze pagina bevat een formulier. Wanneer het succesvol wordt verzonden, verschijnt er een bericht in het Engels: “Thanks for contacting us! We will be in touch with you shortly”, terwijl de rest van de website in het Nederlands is. Het succesbericht moet in dezelfde taal staan als de primaire inhoud van de website.
Deze pagina bevat een video met een voice-over. Hoewel ondertitels aanwezig zijn, worden deze automatisch gegenereerd en zijn ze daarom onnauwkeurig.
Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.
Deze pagina bevat iframes met de title-attributen "Spotify Embed: Kavels, keuzes en kansen: De praktijk van de nieuwe warmtewet" en “Warmtewerkt #8 Kavels, keuzes en kansen: De praktijk van de nieuwe warmtewet”.
Iframes moeten een goede beschrijving hebben. Die zet je 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.
Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.
Audiobestand zonder tekstalternatief
Impact: MediumType: ContentWCAG: 1.2.1EN: 9.1.2.1
Op deze pagina staat een podcast zonder transcript. Audio-only inhoud is niet toegankelijk voor bezoekers met een auditieve beperking. Dove of slechthorende personen kunnen de audio niet gebruiken, waardoor een alternatief noodzakelijk is.
Oplossing:
Er moet een volledig transcript van de audiocontent worden aangeboden. Dit transcript kan direct naast de audio worden geplaatst (eventueel eerst verborgen en zichtbaar via een link), op een aparte gelinkte pagina of in een toegankelijke pdf die samen met de audio wordt aangeboden. Er bestaan meerdere aanvaardbare oplossingen.
De Youtube-video’s gebruiken letters als sneltoetsen
Impact: MediumType: ContentWCAG: 2.1.4EN: 9.2.1.4
Op deze pagina staat een YouTube-videospeler die gebruikmaakt 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 of logo’s waarvoor geen alternatief is
De video op deze pagina bevat het logo “Servicepunt Duurzame Energie” aan het begin en aan het einde van de video: rond 0:02 en 35:48. Er is echter geen media-alternatief of audiobeschrijving beschikbaar. De visuele informatie (logo’s) die deze video bevat, is daardoor niet toegankelijk voor blinde bezoekers.
Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.
Oplossing:
Dit kan voor dit 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.
Icoon heeft geen tekstalternatieven, daarom heeft de link geen herkenbaar doel
Onderaan deze pagina staat een deel-icoon dat een verborgen content activeert. Wanneer een bezoeker met de muis over dit icoon beweegt, opent er een tooltip met verschillende sociale media. Dit gebeurt niet bij toetsenbordfocus.
Hetzelfde probleem doet zich voor op andere pagina's met hetzelfde pictogram:
Hierdoor kunnen bezoekers die alleen met het toetsenbord navigeren de tooltip niet zien. De informatie in de tooltip is voor hen dus niet toegankelijk.
Oplossing:
Zorg dat de tooltips ook openen als ze toetsenbordfocus krijgen.
Problemen met contrast werden in andere secties beschreven.
Knoppen kunnen niet met het toetsenbord worden bediend
Impact: GrootType: TechniekWCAG: 2.1.1EN: 9.2.1.1
Onderaan deze pagina bevindt zich een carrousel met knoppen om tussen de dia's te navigeren. Deze navigatieknoppen zijn niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat alle interactieve elementen met het toetsenbord te bedienen zijn.
Onderaan deze pagina staat een carrousel met witte knoppen om tussen de dia’s te navigeren. De contrastratio tussen de knopkleur en de dynamisch veranderende achtergrond van de carrousel is slechts 2,7:1.
Oplossing:
Zorg dat het contrast tussen de knoppen en de achtergrondkleuren minimaal 3,0:1 is.
Knoppen hebben niet de juiste toegankelijke rol
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Onderaan deze pagina bevindt zich een carrousel met knoppen om tussen de dia's te navigeren. Deze knoppen hebben niet de juiste toegankelijke rol. Elk HTML-element heeft een standaardrol die het doel en gedrag ervan definieert. Schermlezers en andere hulptechnologieën vertrouwen op deze rollen om elementen correct te begrijpen en ermee te interageren.
Oplossing:
Zorg dat deze knoppen de rol van een knop hebben door ofwel:
Het button-element te gebruiken: Gebruik het button-element om de knop te maken, omdat dit van nature de juiste knoprol geeft.
role="button" en tabindex="0" toe te voegen: Als een ander element wordt gebruikt (wat over het algemeen niet wordt aanbevolen), voeg dan het attribuut role="button" toe om de rol expliciet te definiëren.
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%, is het woord “energietransitie” onderaan de pagina niet leesbaar.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Problemen met contrast, video en logo's werden in eerdere secties beschreven.
Er staan twee koppen van hetzelfde niveau direct onder elkaar
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina wordt een kop van niveau 3 direct gevolgd door een andere kop van hetzelfde niveau. Zie “Onze thema’s” en “Warmteprogramma’s en kavelstrategie”. Hetzelfde geldt voor de koppen “Ons aanbod” en “Regioregisseurs”.
Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element.
Op deze pagina staan onder de kop “Onze thema’s” secties met verborgen inhoud. Wanneer de elementen die de verborgen inhoud openen en sluiten in hovertoestand zijn of geopend worden, kleuren de koptekst en de “+” en “-” iconen groen (#ABC540) op een lichtblauwe (#E8F6FC) achtergrond. De contrastratio is 1,8:1, wat te laag is voor zowel grote tekst als informatieve iconen.
Zorg dat het contrast voor tekst groter dan 24 px en voor informatieve iconen meer dan 3,0:1 is.
“+”-iconen in accordeons hebben geen tekstalternatief
Impact: GrootType: TechniekWCAG: 1.1.1EN: 9.1.1.1
Op deze pagina zijn secties met verborgen inhoud aanwezig. Het "+"-icoon 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:
geef het “+” icoon een tekstalternatief (alt-tekst of een aria-label)
voeg verborgen tekst toe die verandert als accordeon opent of sluit
gebruik een aria-expanded-attribuut.
Klikbare items in een gesloten accordeonsectie krijgen toch toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Op deze pagina hebben secties met verborgen inhoud onder “Onze thema’s” een probleem met de focusvolgorde. Elementen binnen ingeklapte blokken ontvangen nog steeds toetsenbordfocus, ook al zijn ze niet zichtbaar, in het bijzonder de links “Lees verder”.
Dit is verwarrend voor bezoekers die met het toetsenbord navigeren en daarbij naar het scherm kijken.
Oplossing:
Zorg dat elementen die niet zichtbaar zijn geen toetsenbordfocus krijgen.
Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op deze pagina zijn secties met verborgen inhoud aanwezig. Hoewel de open of gesloten status visueel duidelijk is, wordt deze niet programmatisch gecommuniceerd naar 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.
Linktekst is niet duidelijk genoeg
Impact: MediumType: ContentWCAG: 2.4.4EN: 9.2.4.4
Op deze pagina bevatten in accordeons meerdere links de vage tekst “Lees verder”. Deze tekst beschrijft de bestemming van de link niet duidelijk genoeg en zorgt voor verwarring, vooral voor bezoekers met cognitieve beperkingen of voor degenen die schermlezers gebruiken.
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)’.
Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen
Wanneer deze pagina wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, gaan de volgende teksten in accordeons gedeeltelijk verloren: “Warmteprogramma’s”, “Energieplanologie”, “Energierechtvaardigheid”.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Op deze pagina hebben in de extra zijbalk voor paginanavigatie de niet-actieve koppen een te laag contrast. Ze zijn grijs op een witte achtergrond. De contrastratio is 2,3:1. Hetzelfde probleem doet zich voor bij de vergelijkbare zijbalknavigatie op de pagina https://servicepuntduurzameenergie.nl/warmteprogrammas-en-kavelstrategie/.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.
strong-element is gebruikt in koptekst
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staan meerdere koppen met de namen van teamleden. In deze koppen worden 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.
Problemen met contrast, links en afbeeldingen werden in eerdere secties beschreven.
Contrast van tekst in afbeelding is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op deze pagina, onder de tekst "Locatie: Kantoor Haskoning, Amsterdam", is een afbeelding aanwezig met ingebedde tekst. De witte (#FEFEFE) tekst op de blauwe (#4EBAEA) achtergrond heeft een contrastverhouding van 2,2:1.
Oplossing:
Tekst die kleiner is dan 19px moet een kleurcontrast hebben van minimaal 4,5:1 met de achtergrond. Vanaf 24px of 19px vetgedrukt is dit minimaal 3,0:1.
Afbeelding zonder tekstalternatief is de enige inhoud van een link
Op deze pagina functioneert de afbeelding onder de tekst "Locatie: Kantoor Haskoning, Amsterdam" als een link, maar het tekstalternatief 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). Bovendien bevat deze link visuele tekst “Woensdag 5 en donderdag 6 november, Amsterdam”, maar deze tekst staat niet in de toegankelijke naam. Daardoor kan de link niet met spraak worden geactiveerd. Dit schendt succescriterium 2.5.3.
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.
Problemen met contrast en onjuist gebruik van strong-elementen zijn in eerdere secties beschreven.
em-element is gebruikt voor opmaak
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina bevatten de teksten die beginnen met “Je kunt de Nationale Uitvoeringsagenda…” en “Het warmteprogramma, de aanstaande herziening…” het em-element dat verkeerd wordt gebruikt voor opmaakdoeleinden.
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.
Menukaart Activiteiten en aanpakken energiebesparing
Problemen met contrast, podcasts en nieuwscarrousel werden in eerdere secties beschreven.
Toegankelijke namen van iframes ontbreken
Impact: KleinType: TechniekWCAG: 4.1.2EN: 9.1.4.2
Op deze pagina staan meerdere iframes. Drie daarvan hebben geen beschrijving die zichtbaar is voor schermlezers omdat het title-attribuut ontbreekt. Dit zijn de iframes onder de koppen “Aflevering 3”, “Aflevering 4” en “Aflevering 5”.
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.
Dit pdf-document heeft geen titel ingesteld in de bestandseigenschappen.
Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.
Los het op in Adobe Acrobat:
Open het pdf-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Beschrijving.
Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld:
"Rapport: Bevolkingscijfers 2023".
Klik op OK en sla het bestand op.
Koppen zijn niet als kop gemarkeerd
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
In dit pdf-document zijn alle koppen niet gemarkeerd als koppen. Zie bijvoorbeeld "PRIVACYVERKLARING SERVICEPUNT DUURZAME ENERGIE", "Identiteit", "Doeleinden voor de verwerking" en andere koppen.
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.
Informatieve afbeelding is als achtergrondafbeelding geplaatst
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Beide pagina’s van dit pdf-document bevatten logo’s onderaan. Deze zijn als artefacten in het document opgenomen.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alternatieve tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg logo's toe met behulp van de 'Figure'-tag en geef ze beschrijvende alternatieve teksten.
PDF Menukaart Activiteiten en Aanpakken Energiebesparings
Informatieve afbeelding is als achtergrondafbeelding geplaatst
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Alle pagina’s van dit pdf-document bevatten een logo als artefact.
Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alternatieve tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg het logo toe met de Figure-tag en geef het een beschrijvende alternatieve tekst. Voldoende om dit alleen op de eerste pagina van het document te doen.
Koppen zijn niet als kop gemarkeerd
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
In dit pdf-document zijn er veel koppen die niet als koppen zijn gemarkeerd. Zie bijvoorbeeld "Menukaart Activiteiten Energiebesparing Bekende en veel toegepaste activiteiten", "2A1 – Deur-tot-deur – advies én aanbrengen maatregelen", "Beschrijving" en andere. 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.
Kleurcontrast van kleine tekst is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
In dit pdf-document staan op pagina’s 2 en 3 koppen in verschillende kleuren. Sommige daarvan hebben onvoldoende contrast tegen de witte (#FEFEFE) achtergrond. Zo hebben de gele (#FFC000) koppen “Aanbod” een contrastratio van 1,6:1 en de grijze (#A5A5A5) koppen “Ondersteuning en advies” een contrastratio van 2,4:1.
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is. Controleer het kleurcontrast van andere koppen op pagina's 2 en 3.
Redundante figure-tags
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
Op bijna alle pagina's van dit PDF-document zijn er overbodige figure-tags zonder beschrijvingen. Zie pagina 1 en alle pagina's vanaf pagina 4.
De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.
Oplossing:
Verwijder de onnodige Figure-tags om te voorkomen dat schermlezers proberen deze te interpreteren.
Leesvolgorde van de tags is niet logisch
Impact: MediumType: ContentWCAG: 1.3.2EN: 9.1.3.2
In bijna alle pagina’s van dit pdf-document is de leesvolgorde niet logisch. Zo staan op pagina 2 de secties met de koppen “Ondersteuning en advies”, “Financiering en subsidie”, “Randvoorwaardelijk” en “Extra functies” in de tags in een omgekeerde volgorde ten opzichte van de visuele weergave. Vanaf pagina 4 doet hetzelfde probleem zich voor: de koppen “Doelgroep” en “Type uitvoerende partij(en)” volgen elkaar en hun inhoud staat los eronder.
Schermlezers lezen een pdf-document in de volgorde van de tags die in de codelaag staan. Als die niet logisch is, is de leesvolgorde dat dus ook niet en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.
Oplossing:
Zorg dat de volgorde van de tags logisch is.
Lijstitems zijn niet hetzelfde in tags
Impact: MediumType: ContentWCAG: 1.3.1
In dit pdf-document op pagina 25, onder de kop "Opmerking", staat een lijst met 2 items. In de tags is echter maar één lijstitem aanwezig.
Oplossing:
Markeer de lijst met een L- en Li-tags, en zorg dat het aantal lijstitems overeenkomt met wat je ziet.
Kleurcontrast van grote tekst is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op de meeste pagina’s van dit pdf-document staan de koppen “Beschrijving”, “Doelgroep”, “Type uitvoerende partij(en)” en “Opmerking” in oranje (#FBBD4E) op een witte (#FEFEFE) achtergrond. De contrastratio is te laag: 1,7:1.
Oplossing:
Omdat het hier om grote tekst gaat, moet de contrastverhouding minimaal 3,0:1 zijn.
Op deze pagina staat boven het zoekveld een kop “Zoeken”. De blauwe (#5F809B) tekst tegen de witte achtergrond heeft een contrastratio van 4,2:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor standaardtekst.
Oplossing:
Zorg dat het contrast minimaal 4,5:1 is.
De zichtbare tekst van de zoekknop staat niet in de toegankelijke naam
Impact: GrootType: TechniekWCAG: 2.5.3EN: 9.2.5.3
De zoekbalk op deze pagina heeft een zoekveld met de zichtbare tekst "Zoeken", maar de toegankelijke naam is "Search for".
Als het zichtbare label van een zoekveld niet voorkomt in de toegankelijke naam, kan het veld niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst van het veld voor te lezen, zullen het invoerveld dan niet activeren.
Oplossing:
Zorg dat de zichtbare tekst van het invoerveld voorkomt in de toegankelijke naam, bij voorkeur vooraan. De toegankelijke naam mag ook volledig gelijk zijn aan de zichtbare tekst.
strong-element is gebruikt voor opmaak
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina worden strong-elementen verkeerd gebruikt voor opmaakdoeleinden in de labels "Kies een product type:" en "Kies een onderwerp:".
De elementen strong en em hebben een semantische waarde: ze geven een bepaalde betekenis aan de tekst die ze bevatten. Beide elementen geven aan dat de tekst extra nadruk moet krijgen. Om die reden mag je deze elementen niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt of cursief). Gebruik hiervoor CSS.
Op deze pagina bevat het zoekveld een knop met een zoekicoon zonder alternatieve tekst. Dit schendt ook succescriterium 4.1.2 omdat de zoekknop geen toegankelijke naam heeft.
Bestaat een knop alleen uit een afbeelding? Dan moet je de alternatieve tekst van die afbeelding anders invullen dan bij een gewone informatieve afbeelding. Je moet niet beschrijven wat er te zien is, maar juist wat de functie of het doel is van de knop. Doe je dit niet, dan weet hulpsoftware niet wat de functie van de knop is.
Oplossing:
Je kunt dit doen met een aria-label of een tekst die visueel verborgen is, maar toegankelijk voor hulpsoftware.
Link heeft geen toegankelijke naam en geen herkenbaar doel
Op deze pagina is de kaart met tekst die begint met “Tool: Warmteviewer Doelgroepen…” een link, maar deze heeft geen toegankelijke naam (succescriterium 4.1.2) en daardoor geen herkenbaar linkdoel (succescriterium 2.4.4).
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.
Op deze pagina functioneren alle agenda-items als links, maar ze hebben geen toegankelijke naam (succescriterium 4.1.2) en daardoor geen herkenbaar linkdoel (succescriterium 2.4.4).
Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden.
Oplossing:
Geef een beschrijvende inhoud aan de link.
De leesvolgorde van deze inhoud is niet betekenisvol
Impact: MediumType: ContentWCAG: 1.3.2EN: 9.1.3.2
Op deze pagina is de HTML-volgorde van de elementen binnen de agendagebeurtenissen: afbeelding, kop, datum, plaats en tijd. De leesvolgorde van deze inhoud is niet betekenisvol.
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.
Geen tekstalternatief bij informatieve afbeeldingen
Op deze pagina hebben alle agendapunten iconen van een kalender, een locatiepin en een klok. Deze afbeeldingen zijn toegevoegd met img-elementen, maar de alt-attributen ontbreken. Elk img-element moet een alt-attribuut hebben.
Oplossing:
Deze afbeeldingen zijn puur decoratief en geven geen extra betekenis, daarom moeten de alt-attributen aanwezig maar leeg zijn (alt="").
Voldoet of niet van toepassing: 34
Voldoet niet: 21
