Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Nationaal Programma Lokale Warmtetransitie

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Nationaal Programma Lokale Warmtetransitie
Datum 25 maart 2025
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op nplw.nl
  • Alle PDF's op nplw.nl
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 80

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Op alle pagina's van de website https://www.nplw.nl/ staat bovenaan het logo met de volledige tekst "NPLW Nationaal Programma Lokale Warmtetransitie", maar de alt-tekst is alleen "logo". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander de alt-tekst zodat het woord 'logo' en de volledige tekst van het logo erin staat: “Logo NPLW Nationaal Programma Lokale Warmtetransitie”. Hetzelfde probleem komt voor in de cookiebanner.

Bevinding 2: In de footer van alle pagina's van de website https://www.nplw.nl/ staan naast de links "LinkedIn" en "Archief" iconen die aangeven dat de links in een nieuw browsertabblad openen. Dit icoon heeft het attribuut aria-hidden="true" en is daardoor verborgen voor schermlezers. Bovendien hebben deze iconen geen alternatieve tekst. Hierdoor weet een blinde bezoeker niet dat deze links een nieuwe browsertab zullen openen. Dit is belangrijke informatie die als tekst aanwezig moet zijn, zodat een schermlezer het kan voorlezen. Verwijder het aria-hidden-attribuut en voeg de informatie als verborgen tekst toe. Hetzelfde probleem komt voor op pagina https://www.nplw.nl/over-nplw/organisatie, https://www.nplw.nl/cookieverklaring en https://www.nplw.nl/404. Ook hier staan links met iconen die aangeven dat ze worden geopend in een nieuw browsertabblad.

Bevinding 3: Op pagina https://www.nplw.nl/zoeken?search=werk en https://www.nplw.nl/praktijkvoorbeelden gebeurt iets vergelijkbaars. Als een bezoeker een keuzevakje in de filters aanvinkt, verschijnt de kop "Gekozen filters" en knoppen om de geselecteerde filters te verwijderen. Elke knop bevat een "x"-icoon dat aangeeft dat het geselecteerde filter met die knop verwijderd kan worden. Dit icoon heeft echter geen alternatieve tekst, dus gebruikers van schermlezers zijn niet op de hoogte van dit gedrag.

Bevinding 4: Op de homepage https://www.nplw.nl/ staan onder de kop "Praktijkvoorbeelden" artikelen met decoratieve afbeeldingen. Bijvoorbeeld in het artikel "Riothermie is op veel plekken inzetbaar". Hier staat een afbeelding met de alternatieve tekst "Witte galerijflat in groene omgeving (flatgebouw Lieven de Key)". Decoratieve afbeeldingen zijn ook aanwezig onder het kopje "In het nieuws". Een decoratieve afbeelding geeft geen extra informatie en kan daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Gebruik voor afbeeldingen in een img-element een leeg alt-attribuut (alt=""). Zo is het voor hulpsoftware duidelijk dat de afbeelding genegeerd kan worden. Hetzelfde probleem komt voor op pagina https://www.nplw.nl/praktijkvoorbeelden, https://www.nplw.nl/nieuws, en https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang onder de kop “Relevant nieuws”.

Bevinding 5: Als een bezoeker geen toestemming geeft voor cookies, staat op pagina https://www.nplw.nl/over-nplw/organisatie onder het kopje "Even voorstellen: NPLW" een voorbeeldafbeelding met de alternatieve tekst "Placeholder video: Kaart van Nederland”, met daaronder de tekst "Nederland moet woningen gaan isoleren en duurzaam gaan verwarmen." Als de afbeelding informatief is, moet de alt-tekst beknopt zijn en een duidelijke beschrijving geven van de inhoud of de functie zonder onnodige details (zoals 'Placeholder video'). Als de afbeelding puur decoratief is, moet deze verborgen worden voor schermlezers omdat decoratieve afbeeldingen geen extra informatie geven. Dit kan worden bereikt door een leeg alt-attribuut (alt="") te gebruiken in het img-element.

Bevinding 6: Op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen staan complexe afbeeldingen. Deze afbeeldingen hebben allemaal dezelfde alternatieve tekst, die niet beschrijvend is: "Infographic proeftuinen aardgasvrije wijken". Deze complexe afbeeldingen hebben dus geen goede korte beschrijving. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alt-tekst past. Deze informatie kan toegankelijk gemaakt worden door twee tekstalternatieven te bieden: een korte en een lange beschrijving. De korte beschrijving, meestal de alt-tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kan als tekst op de pagina zelf geplaatst worden, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan. Dit probleem is er ook bij de afbeeldingen in de dialoogvensters die worden geopend door op deze complexe afbeeldingen te klikken.

Bevinding 7: In het PDF-document op https://www.nplw.nl/uploads/files/Uitvoeringsplan/Proces-totstandkoming-uitvoeringsplan-warmtetransitie-NPLW.pdf staan informatieve afbeeldingen zonder tekstalternatief (alt-tekst). Dit gebeurt onder andere op pagina 1, 4 en 6. 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 alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg alt-teksten toe aan deze informatieve afbeeldingen.

Bevinding 8: Op pagina 1 van het PDF-document op https://www.nplw.nl/uploads/files/Uitvoeringsplan/Proces-totstandkoming-uitvoeringsplan-warmtetransitie-NPLW.pdf staat een decoratieve afbeelding die ten onrechte is gemarkeerd als figuur zonder beschrijving. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 9: Op pagina https://www.nplw.nl/over-nplw/organisatie staat een video waarin op bepaalde momenten de tekst “Meer weten?” in beeld verschijnt, bijvoorbeeld op 1:35 minuut. Deze informatie is niet toegankelijk voor bezoekers die de video niet kunnen zien. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Het beste kan een audiobeschrijving toegevoegd worden die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten. Een andere oplossing is het plaatsen van een geschreven tekst (een media-alternatief). Maar om ook te voldoen aan succescriterium 1.2.5 moet er sowieso een audiobeschrijving zijn.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 10: De video op pagina https://www.nplw.nl/over-nplw/organisatie voldoet niet aan succescriterium 1.2.5, waarin audiobeschrijving voor video's wordt vereist. Specifiek voor deze video is audiobeschrijving (niveau AA) nodig, aangezien er voldoende ruimte is binnen het bestaande audiospoor. Een media-alternatief is hier niet meer toegestaan als oplossing. Dit is van belang voor mensen die de video’s niet (goed) kunnen zien.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 11: Op alle pagina's van de website https://www.nplw.nl/ staan op het tabblad “Details” van de cookiebanner secties met verborgen inhoud. De elementen die de verborgen inhoud openen en sluiten, hebben niet de rol van kop. Het gaat bijvoorbeeld om de tekst "Noodzakelijk" en binnen deze sectie om de teksten "Cookiebot", "Vimeo", "app.springcast.fm" en "www.nplw.nl". Dit komt ook voor bij andere secties van de cookiebanner. De teksten waarmee delen van een accordeon kunnen worden ingeklapt en uitgeklapt, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals bijvoorbeeld h2 of h3. Markeer deze teksten als kop of zorg dat de bestaande rol van kop niet wordt overschreven. De juiste volgorde van elementen hier is: een kop-element (bijvoorbeeld <h2>) en daarbinnen een button-element.

Bevinding 12: Op alle pagina's van de website https://www.nplw.nl/ staat in de header een zoekbalk. In deze zoekbalk staat een icoon van een vergrootglas, dat werkt als een knop. Deze knop is verborgen voor schermlezers met aria-hidden. Het is niet toegestaan om interactieve elementen te verbergen voor schermlezers. Een blinde bezoeker moet toegang hebben tot dezelfde informatie en functionaliteit als een ziende bezoeker. Daarnaast kunnen deze elementen nog steeds focus krijgen. Dit is verwarrend voor bezoekers die met de Tab-toets navigeren.

Bevinding 13: Op de homepage https://www.nplw.nl/ staan onder de kopjes “Wat doet het NPLW voor gemeenten in de warmtetransitie?” en “Praktijkvoorbeelden” teksten die niet zijn gemarkeerd als kop. Het gaat bijvoorbeeld om de tekst "Signaleren en agenderen" onder de kop "Wat doet het NPLW voor gemeenten in de warmtetransitie?”. Hetzelfde probleem komt voor op andere pagina's. Op pagina https://www.nplw.nl/nieuws gaat het bijvoorbeeld om de titels van de nieuwsartikelen, zoals "Startanalyse 2025 beschikbaar, lokale verrijking noodzakelijk". Op pagina https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang om de titels van de artikelen onder de kop "Relevant nieuws". En op pagina https://www.nplw.nl/cookieverklaring gaat het om de teksten "Noodzakelijk (7)", "Statistieken (6)", en "Audiovisueel (2)".

Bevinding 14: Op het tabblad "Toestemming" in de cookiebanner, die op alle pagina's van de website https://www.nplw.nl/ voorkomt, is het strong-element gebruikt om tekst vetgedrukt te maken. De labels "Noodzakelijk", "Voorkeuren", "Statistieken" en "Audiovisueel" zijn gemarkeerd met een strong-element. 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). Gebruik hiervoor CSS. Hetzelfde is te zien op pagina https://www.nplw.nl/toegankelijkheidsverklaring bij de tekst “Nationaal Programma Lokale Warmtetransitie”.

Bevinding 15: Op alle pagina's van de website https://www.nplw.nl/ staat een ‘sticky’ knop (een knop die permanent in beeld blijft), die het dialoogvenster “Cookie-instellingen” opent. In dit dialoogvenster zijn de teksten "Cookie-instellingen" en "Uw huidige stand” onjuist gemarkeerd met strong in plaats van met de juiste kop-elementen. In de sectie onder “Details tonen” gaat het om de teksten “Datum van toestemming” en "Uw toestemming ID". Het element strong is niet bedoeld om koppen mee te markeren. Dit moet altijd gedaan worden met een kop-element, zoals h2. Koppen zijn bedoeld om een tekst te structureren. Alleen als deze teksten als kop zijn gemarkeerd met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element is wel geschikt om nadruk te geven aan enkele woorden of een zinsdeel. Hetzelfde probleem komt voor op het tabblad "Details" van de cookiebanner. In de uitklapbare secties staan teksten die gemarkeerd zijn met het strong-element in plaats van het h-element. In de sectie “Cookiebot”, onder "Noodzakelijk" gaat het bijvoorbeeld om de teksten "1.gif" en "CookieConsent". Ook bij andere secties gaat dit fout.

Bevinding 16: Op het tabblad “Over” van de cookiebanner die op alle pagina's van https://www.nplw.nl/ voorkomt, staat een tekst van 6 alinea's die begint met “Cookies zijn kleine tekstbestanden…”. Op dit moment staan al deze alinea's in een enkel div-element. De witregels zijn met het br-element gemaakt. Dit is niet de juiste aanpak.
Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code. Hetzelfde is te zien op pagina https://www.nplw.nl/cookieverklaring. Onder het kopje "Cookieverklaring" staat dezelfde tekst van 6 alinea's die begint met “Cookies zijn kleine tekstbestanden…”.

Bevinding 17: Op pagina https://www.nplw.nl/nieuws is in de paginering onder de artikelen een visueel onderscheid tussen het nummer van de huidige pagina en de andere pagina’s, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker. Dit kan opgelost worden door een verborgen tekst aan de link toe te voegen, of door het aria-current-attribuut te gebruiken. Hetzelfde probleem bestaat op pagina https://www.nplw.nl/praktijkvoorbeelden en https://www.nplw.nl/zoeken?search=werk.

Bevinding 18: In het gedeelte "Details proeftuin" op pagina https://www.nplw.nl/proeftuinen/benedenbuurt-wageningen staat een lijst met informatie. Dit zijn sleutel-waardeparen. Bijvoorbeeld: "Gemeente - Wageningen" en "Inwoners gemeente - 42.579". De relatie tussen de sleutels en de waarden is niet correct vastgelegd in de HTML-structuur. Sleutelwaardegegevens zoals deze moeten worden gemarkeerd met een definitielijst (<dl>). Het <dt>-element wordt gebruikt voor de sleutel (bijvoorbeeld "Gemeente"), en het <dd>-element voor de bijbehorende waarde (bijvoorbeeld "Wageningen"). Hierdoor kan hulpsoftware de relaties tussen termen en hun beschrijvingen correct overbrengen.

Bevinding 19: Het PDF-document op https://www.nplw.nl/uploads/files/Over-NPLW/NPLW-Jaarplan-2025.pdf.pdf bevat geen structuurcodes, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Bevinding 20: In het PDF-document op https://www.nplw.nl/uploads/files/Uitvoeringsplan/Proces-totstandkoming-uitvoeringsplan-warmtetransitie-NPLW.pdf staat op pagina 1 een kop die niet als koptekst is gemarkeerd: “Proces totstandkoming uitvoeringsplan warmtetransitie”. Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 21: In het PDF-document op https://www.nplw.nl/uploads/files/Uitvoeringsplan/Proces-totstandkoming-uitvoeringsplan-warmtetransitie-NPLW.pdf is de leesvolgorde niet logisch. De inhoudsopgave staat bijvoorbeeld op pagina 2, maar in de tags helemaal aan het eind. Op pagina 1 staat een logo en op pagina 4 een afbeelding. In de tags staan deze afbeeldingen echter helemaal aan het eind, boven de inhoudsopgave.
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. Zorg dus dat de volgorde van de tags logisch is.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 22: Op pagina https://www.nplw.nl/helpdesk staat een formulier met invoervelden voor persoonlijke gegevens (bijvoorbeeld naam, achternaam). Hier ontbreekt het attribuut ‘autocomplete’. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 23: Op de website https://www.nplw.nl/ wordt de kleur oranje (HEX #FF6600) gebruikt. Deze kleur heeft tegen verschillende achtergrondkleuren te weinig contrast. Hieronder staan enkele voorbeelden.

Het contrast moet in al deze voorbeelden minimaal 4,5:1 zijn.

Bevinding 24: Op alle pagina's van de website https://www.nplw.nl/ bedekt de skiplink het logo en heeft deze onvoldoende kleurcontrast. De donkergrijze tekst van de skiplink (HEX #404040) heeft op de oranje achtergrond (HEX #FF6701) een contrastverhouding van 3,6:1. Skiplinks moeten, net als andere interactieve elementen, voldoen aan contrasteisen om toegankelijk te zijn voor slechtziende bezoekers. Zorg dat de skiplink op alle pagina’s een contrast van minimaal 4,5:1 heeft ten opzichte van de achtergrond.

Bevinding 25: Op alle pagina's van de website https://www.nplw.nl/ heeft de placeholder-tekst "Zoeken” in de zoekbalk bovenaan de pagina onvoldoende kleurcontrast. De lichtgrijze placeholder-tekst (HEX #999999) heeft tegen de witte achtergrond een contrastverhouding van 2,8:1, wat lager is dan de vereiste 4,5:1 voor standaardtekst. Op de homepage https://www.nplw.nl/ staan datums in de artikelen onder "Praktijkvoorbeelden" en "In het nieuws". De grijze kleur (HEX #999999) van de tekst van de datums op de witte achtergrond (HEX #FFFFFF) heeft een kleurcontrast van 2,8:1. Deze tekst is kleiner dan 19px, daarom moet het contrast minimaal 4,5:1 zijn.
Hetzelfde komt voor op pagina https://www.nplw.nl/nieuws, https://www.nplw.nl/praktijkvoorbeelden en https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang onder de kop “Relevant nieuws”.

Bevinding 26: Op pagina https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang staat onder de kop “We blijven dit samen doen” een oranje link (HEX #C75000) "maureen.eijk@nplw.nl" op een grijze achtergrond (HEX #EFF1F2). De contrastverhouding is te laag: 4,0:1. Dit moet minstens 4,5:1 zijn.

Bevinding 27: Op pagina https://www.nplw.nl/404 staat onder het kopje "Archief" een link met de oranje tekst "archief" op een lichtoranje achtergrond (HEX #FDEBDE). De contrastverhouding is 4,0:1. Dit moet minstens 4,5:1 zijn.

Bevinding 28: Op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen staan afbeeldingen met oranje tekst, bijvoorbeeld de tekst "woningen" onder "Voortgang proeftuinen in het kort". Deze oranje tekst (HEX#FA9959) heeft op de roze (HEX #FFF5ED) achtergrond een contrastverhouding van 2,0:1. Dit moet minimaal 4,5:1 zijn.

Bevinding 29: In het PDF-document op https://www.nplw.nl/uploads/files/Over-NPLW/NPLW-Jaarplan-2025.pdf.pdf staat oranje tekst (HEX #FF6700) met onvoldoende contrast. Op pagina 1 heeft de oranje tekst "Jaarplan 2025" op de lichtoranje achtergrond (HEX #FFE3CF) bijvoorbeeld een contrast van 2,4:1. Op pagina 2 heeft de oranje tekst "Inhoudsopgave" op de lichtoranje achtergrond (HEX #FFF1E7) een contrast van 2,6:1. Dit moet in beide gevallen minimaal 3,0:1 zijn. Op pagina 3 hebben de oranje tekst "Inleiding" bovenaan en het paginanummer "3" op de witte achtergrond een contrast van 2,9:1. Dit moet minimaal 4,5:1 zijn. Dezelfde oranje kleur wordt gebruikt in het PDF-document op https://www.nplw.nl/uploads/files/Uitvoeringsplan/Proces-totstandkoming-uitvoeringsplan-warmtetransitie-NPLW.pdf . Op pagina 4 staat de donkerblauwe tekst "5" (HEX #233D5A) op een oranje achtergrond (HEX #FF6700). De contrastverhouding is 3,8:1. Zorg dat het minimaal 4,5:1 is.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 30: Als een bezoeker pagina https://www.nplw.nl/over-nplw/contact-en-locatie bekijkt met een schermresolutie van 1280 bij 1024 en inzoomt tot 200%, verdwijnt in het kruimelpad de tekst "Contact en locatie". Als een bezoeker inzoomt, moet alles nog leesbaar zijn. Hetzelfde gebeurt op pagina https://www.nplw.nl/nieuws, https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang en https://www.nplw.nl/praktijkvoorbeelden.

Bevinding 31: Als een bezoeker pagina https://www.nplw.nl/over-nplw/contact-en-locatie bekijkt met een schermresolutie van 1280 bij 1024 en inzoomt tot 200%, zijn de interne links "Bezoekadres", "Postadres", "Pers en media" en "Meer informatie" niet zichtbaar. Zorg dat bezoekers die inzoomen nog steeds alle functies kunnen gebruiken een dat deze in beeld blijven.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 32: Als iemand de website voor het eerst bezoekt, verschijnt een cookiebanner. Wanneer wordt ingezoomd naar 400% bij een schermgrootte van 1280 bij 1024 pixels, verdwijnt alle inhoud onder de tabbladen "Toestemming", "Details" en "Over". Als 400% wordt ingezoomd, moet de pagina nog steeds functioneel zijn. Bezoekers met een visuele beperking moeten alle functionaliteit van de pagina kunnen gebruiken. Dit is bijvoorbeeld te zien op de homepage https://www.nplw.nl/.

Bevinding 33: Als een bezoeker de website https://www.nplw.nl/ bekijkt bij een schermresolutie van 1280x1024 en inzoomt tot 400%, is er een knop met drie horizontale lijnen die het mobiele menu opent. In het geopende menu overlapt de knop "Helpdesk" de link "Actueel". De knop "Over NPLW" is verplaatst uit het menu en verschijnt op de onderliggende pagina. Zorg dat alles nog goed werkt als een bezoeker inzoomt.

Bevinding 34: Als een bezoeker pagina https://www.nplw.nl/cookieverklaring bekijkt bij een schermresolutie van 1280x1024 en inzoomt tot 400%, vallen de kolomnamen "Aanbieder" en "Maximale bewaartermijn" in de tabel gedeeltelijk uit beeld. De kolom "Type", inclusief de inhoud, gaat helemaal verloren en is niet zichtbaar.

Bevinding 35: Als een bezoeker pagina https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang bekijkt bij een schermresolutie van 1280x1024 en inzoomt tot 400%, verschijnt er een scrollbalk op de hele pagina. Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag wel gescrold worden. Zorg ervoor dat de scrollbalk alleen op de tabel wordt geplaatst en niet op de hele pagina. Hetzelfde probleem komt voor op pagina https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang, https://www.nplw.nl/praktijkvoorbeelden, https://www.nplw.nl/zoeken?search=werk en https://www.nplw.nl/proeftuinen/benedenbuurt-wageningen.

Bevinding 36: Als een bezoeker pagina https://www.nplw.nl/zoeken?search=werk bekijkt bij een schermresolutie van 1280x1024 en inzoomt tot 400%, wordt de tekst "Vorige" op de knop in de paginering afgesneden.

Bevinding 37: Als een bezoeker pagina https://www.nplw.nl/proeftuinen/benedenbuurt-wageningen bekijkt bij een schermresolutie van 1280x1024 en inzoomt tot 400%, zijn er teksten die elkaar overlappen. Bijvoorbeeld "Individueel/collectief" en "Collectief".

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 38: Op alle pagina's van de website https://www.nplw.nl/ staat een knop waarmee de cookie-instellingen kunnen worden geopend. Als deze knop zich boven de footer bevindt en toetsenbordfocus krijgt, heeft de focusindicator niet genoeg contrast (1,0:1). Het gaat om het contrast tussen de blauwe focusrand (HEX #233D5A) en de blauwe achtergrond (HEX #233D5B). Dit moet minimaal 3,0:1 zijn.

Bevinding 39: Op de site wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een (gekleurde) rand. Die aanpassing is met CSS toegevoegd. Voor de standaard focusindicator zijn geen contrasteisen in WCAG; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen, naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél. Bij een eigen focusindicator moet het contrast ten minste 3,0:1 zijn.
Op alle pagina's van https://www.nplw.nl/ staat bovenaan de pagina een zoekbalk. De contrastverhouding tussen de grijze rand van het zoekveld (HEX #CCCCCC) en de witte achtergrond van de pagina (HEX #FFFFFF) is 1,6:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond. Hetzelfde komt voor op pagina https://www.nplw.nl/helpdesk bij de velden in het formulier. Op de pagina's https://www.nplw.nl/zoeken?search=werk en https://www.nplw.nl/praktijkvoorbeelden gaat het om de knoppen van de paginering onder de zoekresultaten met grijze randen.

Bevinding 40: Als de homepage https://www.nplw.nl/ op een klein scherm wordt bekeken, staan er knoppen met pijlen onder de koppen "Wat doet het NPLW voor gemeenten in de warmtetransitie?", "Praktijkvoorbeelden" en "In het nieuws.". Als deze knoppen toetsenbordfocus krijgen, wordt de achtergrond van de knop oranje (HEX #FF6600). De witte pijl op de oranje achtergrond heeft een contrast van 2,9:1. Dit moet minstens 3,0:1 zijn. Hetzelfde probleem komt voor op pagina https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang.
Op pagina https://www.nplw.nl/helpdesk staat onder het formulier een knop met de tekst "Versturen". Als deze knop toetsenbordfocus krijgt, is dit zichtbaar door een lichtgrijze rand (HEX #D3D8DF) en door de verandering van de achtergrondkleur. De contrastverhouding tussen deze rand en de witte achtergrond (HEX #FFFFFF) is 1,4:1. Het contrast tussen de donkeroranje achtergrondkleur (HEX #C75000) in de niet-gefocuste toestand en de oranje achtergrondkleur (HEX #FF6600) in de gefocuste toestand is 1,6:1. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien. Gebruik een kleurcombinatie met voldoende contrast om dit op te lossen. Dit moet minimaal 3,0:1 zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 41: Als bezoekers op de website https://www.nplw.nl/ de tekstafstand aanpassen zoals beschreven in dit succescriterium, wordt de volgende tekst gedeeltelijk onzichtbaar en onleesbaar: "Nationaal Programma Regionale Energiestrategie" en "Nationaal Programma Verduurzaming Industrie" binnen de lijst die verschijnt als op de knop "Meer Klimaat" in de footer wordt geklikt. Het is bijvoorbeeld voor mensen met dyslexie belangrijk om de tekst aan te kunnen passen op de manier die in dit succescriterium is beschreven. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit. Zorg ervoor dat de tekst leesbaar blijft.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 42: Op pagina https://www.nplw.nl/over-nplw/organisatie staat een video waarin sneltoetsen worden gebruikt. Vimeo-video’s gebruiken 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. Dit kan opgelost worden door de parameter keyboard=false toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 43: Op pagina https://www.nplw.nl/helpdesk staat een formulier met hCaptcha. Als een bezoeker deze captcha correct invult, maar vervolgens een paar minuten inactief is, moet hij de test opnieuw doen. Dat betekent dat er een tijdslimiet is ingesteld voor hCaptcha. Dat kan een probleem zijn voor iemand die veel tijd nodig heeft om de rest van het formulier in te vullen. Deze limiet maakt geen deel uit van de captcha zelf, omdat de tijd pas begint te lopen nadat de captcha is voltooid. Daarom moet de tijdslimiet voldoen aan de toegankelijkheidseisen. Een bezoeker moet de tijdslimiet kunnen uitschakelen, aanpassen of verlengen.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 44: Op de homepage https://www.nplw.nl/ verwijst de skiplink (de link waarmee content die op elke pagina wordt herhaald, zoals het menu) naar het gedeelte onder "Snel naar...", maar er staat al unieke inhoud boven dit linkdoel. De skiplink moet verwijzen naar (het begin van) de unieke inhoud op de pagina. Zorg dat de skiplink naar de juiste plek verwijst.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 45: De titel van de homepage https://www.nplw.nl/ is "Nationaal Programma Lokale Warmtetransitie | "Discussie over...". Dit is geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Deze tekst wordt bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina, die de inhoud van de pagina beschrijft. Kijk ook naar de titels van de volgende pagina’s: https://www.nplw.nl/nieuws/aanwijsbevoegdheid-kans-of-dwang met de titel “Nationaal Programma Lokale Warmtetransitie | Aanwijsbevoegdheid: kans…”, https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen met de titel “Nationaal Programma Lokale Warmtetransitie | Voortgang proeftuinen…”, https://www.nplw.nl/proeftuinen/benedenbuurt-wageningen met de titel “Nationaal Programma Lokale Warmtetransitie | Proeftuin Benedenbuurt,…” en https://www.nplw.nl/404 met de titel “Nationaal Programma Lokale Warmtetransitie”.

Bevinding 46: Voor het PDF-document https://www.nplw.nl/uploads/files/Over-NPLW/NPLW-Jaarplan-2025.pdf.pdf is geen titel ingesteld in de bestandseigenschappen.
Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-instellingen een documenttitel ingesteld worden. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de PDF-metadata is ingesteld, 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. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 47: Als iemand de website https://www.nplw.nl/ voor het eerst bezoekt, verschijnt er een pop-up met een cookiemelding. Deze bevat de tabbladen "Toestemming", "Details" en "Over". Als een bezoeker bijvoorbeeld het tabblad "Details" activeert, gaat de toetsenbordfocus eerst door het tabblad "Over" voordat de inhoud van "Details" wordt bereikt. Dit is niet hoe het zou moeten werken. De toetsenbordbediening voor tabbladen moet als volgt werken: met de Tab-toets kan de bezoeker de focus op de actieve tab plaatsen. Daarna kan hij met de pijltjestoetsen wisselen tussen de tabs. Als hij een andere tab activeert en daarna op de Tab-toets drukt, moet de toetsenbordfocus naar de inhoud van het bijbehorende tabblad gaan.

Bevinding 48: Op alle pagina's van de website https://www.nplw.nl/ staat een knop waarmee een dialoogvenster met cookie-instellingen wordt geopend. Als een bezoeker op de knop "Verander uw toestemming" klikt, wordt een Cookie-banner getoond. In deze banner staan drie knoppen om een keuze te bevestigen. Door op een van deze knoppen te drukken zou de Cookiebanner gesloten moeten worden, zodat bezoekers verder kunnen navigeren op de website. Momenteel is dit niet het geval. Als de Cookie-banner sluit, gaat de toetsenbordfocus naar het dialoogvenster “Cookie-instellingen” dat op dat moment niet geopend is. Hierdoor komt de toetsenbordfocus op onzichtbare interactieve elementen terecht. Dit is een kritiek toegankelijkheidsprobleem. Interactieve elementen zoals knoppen en links moeten op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren. Dit gebeurt ook op pagina https://www.nplw.nl/praktijkvoorbeelden en https://www.nplw.nl/zoeken?search=werk. Ook op deze pagina's komt de toetsenbordfocus na de knop met drie horizontale lijnen terecht op onzichtbare elementen. Deze onzichtbare elementen zijn de filteropties.

Bevinding 49: Als een bezoeker op de website https://www.nplw.nl/ inzoomt naar 400% bij een schermresolutie van 1280 pixels, komt de focus op al de tabbladen van de cookiebanner op onzichtbare interactieve elementen. Zorg ervoor dat de cookiebanner meeschaalt met de vergroting zodat de focus zichtbaar blijft.

Bevinding 50: Bovenaan de website https://www.nplw.nl/ staat een zoekveld. Als bezoekers tekst typen in het zoekveld en vervolgens op Tab drukken, gaat de toetsenbordfocus naar een interactief element dat niet zichtbaar is. Zorg dat de focus niet naar elementen gebracht kan worden die niet zichtbaar zijn op de pagina.

Bevinding 51: Op alle pagina's van https://www.nplw.nl/ staat er als deze op een klein scherm worden bekeken een menuknop bovenaan de pagina. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers uit het mobiele menu navigeren met het toetsenbord. De toetsenbordfocus verplaatst dan naar de onderliggende pagina terwijl het menu open blijft. Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.

Bevinding 52: Wanneer het hamburgermenu (dat te zien is als de pagina's op een klein scherm of in ingezoomde weergave worden bekeken) wordt gesloten door op de ESC-toets te drukken, gaat de focus naar de knop met het icoon van een vergrootglas bovenaan de pagina, in plaats van terug te keren naar de knop waarmee het menu werd geactiveerd. Hetzelfde probleem komt voor als een bezoeker op de knop "Meer klimaat" in de footer klikt en op ESC drukt om deze te sluiten. Dit verstoort de verwachte focusvolgorde en kan toetsenbordgebruikers in verwarring brengen. Zorg dat bij het sluiten van het menu met ESC, de focus terugkeert naar de knop waarmee het menu is geopend of naar het volgende logische element op de pagina.

Bevinding 53: Als het mobiele menu geopend is en de bezoeker activeert een van de knoppen, bijvoorbeeld "Onderwerpen", dan opent een submenu. Als een bezoeker een knop in dit menu activeert, bijvoorbeeld "Regierol gemeente", wordt het submenu weergegeven. De toetsenbordfocus kan dit submenu verlaten en verschuiven naar de interactieve elementen van het eerder geopende menu, ook al is het op dat moment niet zichtbaar. Interactieve elementen die op dat moment niet zichtbaar zijn kunnen dus toetsenbordfocus krijgen. Zorg ervoor dat alleen elementen die op dat moment wél zichtbaar zijn focus kunnen krijgen. Dit gebeurt bijvoorbeeld op de homepage https://www.nplw.nl/

Bevinding 54: Als een bezoeker op pagina https://www.nplw.nl/over-nplw/organisatie geen toestemming geeft voor cookies, staat onder het kopje "Even voorstellen: NPLW" een knop waarmee een cookiebanner wordt geopend. Als de bezoeker dit doet, wordt de toetsenbordfocus niet automatisch in het dialoogvenster geplaatst. Dat moet wel. Zorg dat de focusvolgorde logisch blijft, door deze naar de nieuwe inhoud te verplaatsen. Als deze Cookiebanner wordt geopend, gaat de toetsenbordfocus verder naar de elementen op de onderliggende pagina. Na de link "Kwetsbaarheid melden" in de footer komt de focus op een onzichtbaar element. Alleen zichtbare elementen mogen toetsenbordfocus krijgen.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 55: Als iemand de website https://www.nplw.nl/ voor het eerst bezoekt, verschijnt een cookiemelding in een popup. In deze melding staan knoppen, namelijk "Weigeren", "Selectie toestaan" en "Alles toestaan". Visueel is duidelijk wat het doel is van deze knoppen, omdat deze visueel in de context staan van de popup. Maar voor blinde bezoekers met hulpsoftware, die met de Tab-toets van het ene interactieve element naar het volgende springen, zijn deze knopteksten niet heel duidelijk. Schermlezers kunnen niet automatisch de context bij deze elementen voorlezen. Het is dus beter om hier voor hulpsoftware het doel van de knoppen duidelijker te maken. Visueel mag het blijven zoals het nu is, maar het mag ook aangepast worden. Zolang het voor hulpsoftware maar duidelijker is. In plaats van "Weigeren" kan dan bijvoorbeeld met een aria-label de tekst "Weigeren van alle cookies" gebruikt worden. Belangrijk is in ieder geval dat de zichtbare tekst altijd terugkomt in het aria-label om te blijven voldoen aan succescriterium 2.5.3. In plaats van "Alles toestaan" zou er beter visueel kunnen staan "Alle cookies toestaan". Als er visueel wel "Alles toestaan" blijft staan, dan moet in het aria-label attribuut iets staan als "Alles toestaan: alle cookies toestaan" (let op dat de zichtbare tekst letterlijk en in dezelfde volgorde in het aria-label moet staan voor SC 2.5.3). Een soortgelijk probleem komt voor bij de knoppen “Volgende” en “Vorige” in de paginering op pagina https://www.nplw.nl/nieuws, https://www.nplw.nl/praktijkvoorbeelden en https://www.nplw.nl/zoeken?search=werk.

Bevinding 56: Op alle pagina's van de website https://www.nplw.nl/ staat een knop waarmee het dialoogvenster “Cookie-instellingen” wordt geopend. De toegankelijke naam van deze knop is "Open widget", maar dit beschrijft niet de eigenlijke functie van de knop. Daardoor weet een blinde bezoeker niet precies wat deze knop doet. Voeg tekst toe die deze knop goed beschrijft. De knop "Meer klimaat" in de footer heeft een soortgelijk probleem.
Ook op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen komt dit probleem voor. Hier staan links met afbeeldingen waarmee een schermvullende weergave van de afbeelding kan worden geopend. Het dialoogvenster met de schermvullende weergave heeft een knop met het icoon "X". De toegankelijke naam hiervan is ook "X", en dit beschrijft niet wat de knop doet.

Bevinding 57: Als de homepage https://www.nplw.nl/ op een klein scherm wordt bekeken, staan er knoppen met pijlen onder de secties "Wat doet het NPLW voor gemeenten in de warmtetransitie?", "Praktijkvoorbeelden" en "In het nieuws". Met deze knoppen kunnen bezoekers tussen artikelen navigeren. De toegankelijke namen voor deze knoppen zijn echter hetzelfde in elke sectie: "Vorige item" en "Volgend item". Zorg ervoor dat de namen van de toegankelijke knoppen meer context bieden. Ze kunnen bijvoorbeeld de naam van de sectie bevatten, zoals "Vorige item - Praktijkvoorbeelden" en "Volgend item - Praktijkvoorbeelden". Dit zorgt ervoor dat gebruikers van schermlezers begrijpen bij welke sectie de navigatie hoort. Een soortgelijk probleem bestaat op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen. Op deze pagina staan meerdere knoppen met afbeeldingen. Deze knoppen hebben dezelfde toegankelijke naam: "Openen in volledig scherm". Ze hebben echter verschillende functies omdat ze dialoogvensters met verschillende afbeeldingen openen.

Bevinding 58: Op de homepage https://www.nplw.nl/ staat de kop "Snel naar...". Deze kop beschrijft de inhoud die erop volgt niet goed. Teksten zoals “Snel naar”, “Direct naar”, en “Ga naar” zijn te algemeen: links leiden in principe altijd naar een andere pagina, dit weet iemand ook al zonder dat er bijvoorbeeld “Direct naar” boven staat. Zo’n soort kop geeft dus geen extra informatie of context. Dat is vooral voor bezoekers die schermlezers gebruiken een probleem. Zij laten de koppen voorlezen om snel de structuur van een pagina te begrijpen, en de inhoud te vinden die voor hen relevant is. Gebruik daarom een meer specifieke tekst, die duidelijk maakt wat voor soort inhoud of functionaliteit erna komt. Bijvoorbeeld door context te geven aan de links die volgen. Denk aan een tekst als “Populaire pagina’s” of “Belangrijke onderwerpen”.

Bevinding 59: Op pagina https://www.nplw.nl/praktijkvoorbeelden hebben de knoppen van de paginering (“1”, “2”, “3”, enz.) onvoldoende context.
Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken, is het niet altijd duidelijk dat dit knoppen naar volgende pagina’s zijn. Dit kan verbeterd worden door de knopteksten aan te vullen met het (visueel verborgen) woord ‘pagina’. Hetzelfde komt voor op pagina https://www.nplw.nl/zoeken?search=werk.

Bevinding 60: Als een bezoeker een keuzevakje in de filters op pagina https://www.nplw.nl/zoeken?search=werk aanvinkt, verschijnt de kop "Gekozen filters", samen met knoppen om de geselecteerde filters te verwijderen. Elke knop bevat tekst en het icoon "x" om de functie aan te geven. De knop "X Agenda" heeft bijvoorbeeld de toegankelijke naam "Agenda". Deze toegankelijke naam beschrijft niet nauwkeurig wat de functie is, namelijk het verwijderen van het geselecteerde filter. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Voeg tekst toe die deze knop goed beschrijft.
Ook op pagina https://www.nplw.nl/praktijkvoorbeelden komt dit voor.

Bevinding 61: Op pagina https://www.nplw.nl/zoeken?search=werk staat een paginering. Deze paginering is in de code gemarkeerd met een nav-element. Dit nav-element heeft de toegankelijke naam "Praktijkvoorbeelden paginatie" die afkomstig is van het aria-label-attribuut. Deze toegankelijke naam kan echter verwarrend zijn voor gebruikers van schermlezers omdat de paginering waar het om gaat op de pagina "Zoekresultaten" staat.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 62: Op alle pagina’s, bijvoorbeeld op https://www.nplw.nl/, staat in de footer een knop om de cookie-instellingen te openen. Als een bezoeker de website bekijkt met een schermresolutie van 1280x1024 pixels en inzoomt tot 400%, wordt de focusstijl verwijderd van de knop door de instelling outline: 0. De focus moet altijd zichtbaar zijn. Dit gebeurt bij alle interactieve elementen in het dialoogvenster “Cookie-instellingen” en op de cookie-toestemmingsbanner.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 63: Als iemand de website https://www.nplw.nl/ voor het eerst bezoekt, verschijnt een cookiebanner. Op het tabblad "Details" onder de sectie "Noodzakelijk" staan links met de tekst "Meer informatie over deze aanbieder". Deze tekst komt niet voor in de toegankelijke namen van deze links. In de subsectie "Cookiebot" heeft de link "Meer informatie over deze aanbieder" bijvoorbeeld de toegankelijke naam "Privacybeleid van Cookiebot - opent in een nieuw venster".
Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Dit kan opgelost worden door de zichtbare tekst toe te voegen aan de toegankelijke naam, bij voorkeur vooraan.

Bevinding 64: Bovenaan de website https://www.nplw.nl/ staat een zoekbalk met de zichtbare (placeholder-)tekst "Zoeken". De toegankelijke naam van het invoerelement is "Doorzoek de inhoud van de site". Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst (in dit geval de placeholder-tekst), is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen. Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Bevinding 65: Op pagina https://www.nplw.nl/helpdesk staat een hCapcha onder het formulier. Als bezoekers de hCapcha verzenden, opent een dialoogvenster. In dit dialoogvenster heeft de knop met de zichtbare tekst "Overslaan" de toegankelijke naam "Sla uitdaging over". Dit kan problemen geven voor bezoekers die stembediening gebruiken. Zij spreken een commando uit door de zichtbare tekst voor te lezen. Als deze niet voorkomt in de toegankelijke naam die in de code staat, werkt het commando niet.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 66: In de metagegevens van het PDF-document op https://www.nplw.nl/uploads/files/Over-NPLW/NPLW-Jaarplan-2025.pdf.pdf is de taal ingesteld op “English” (“en-US”). Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker. Verander de code in “nl”.

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 67: Op pagina https://www.nplw.nl/nieuws staat een paginering. De links en knoppen binnen deze paginering hebben aria-label-attributen met tekst in het Engels. De toegankelijke naam van de knop met zichtbare tekst "1" is bijvoorbeeld “Page 1”.
Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Vertaal de teksten van de aria-labels naar het Nederlands. Dit gebeurt ook in de Cookiebanner. In het tabblad "Details" onder "Noodzakelijk" staan links met de tekst "Meer informatie over deze aanbieder". De toegankelijke namen van de links zijn gedeeltelijk in het Engels, bijvoorbeeld “Privacybeleid van Cookiebot - opens in a new window”. Ook op pagina https://www.nplw.nl/over-nplw/organisatie komt dit voor. Als een bezoeker geen toestemming geeft voor cookies, staat er onder het kopje "Even voorstellen: NPLW" een knop met de toegankelijke naam “Open cookie consent”.

Bevinding 68: Op pagina https://www.nplw.nl/helpdesk staat een formulier. De foutmelding voor het veld "E-mailadres" is in het Engels: “E-mailadres is not a valid email address.” terwijl de rest van de website in het Nederlands is. Foutmeldingen moeten in dezelfde taal staan als de primaire content van een website. Vertaal de foutmeldingen naar het Nederlands.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 69: Op pagina https://www.nplw.nl/helpdesk staat een formulier. Als een bezoeker het formulier instuurt terwijl de keuzevakjes onder "Ik heb een vraag over" niet zijn aangevinkt, verschijnt de melding "Kies tenminste één relevant onderwerp". Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 70: Op alle pagina's van https://www.nplw.nl/ staat bovenaan een zoekveld met de placeholder-tekst "Zoeken" en een knop met een icoon van een vergrootglas. Dit invoerveld heeft geen permanent zichtbaar label. De placeholder-tekst en de knop met het icoon van een vergrootglas kunnen hiervoor niet worden gebruikt, omdat deze verdwijnen zodra de bezoeker begint te typen. Voeg een permanent zichtbaar label toe bij het invoerveld.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 71: Op pagina https://www.nplw.nl/helpdesk staat een formulier. De foutmelding voor het veld "E-mailadres" vertelt niet hoe een bezoeker de fout kan oplossen. De foutmelding is simpelweg "E-mailadres is not a valid email address.”. In plaats van alleen “E-mailadres is not a valid email address.” moet de foutmelding uitleggen wat er in het veld “E-mailadres” wordt verwacht. Geef bruikbaar advies in de foutmeldingen, zodat bezoekers weten hoe ze hun invoer kunnen verbeteren.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 72: Op alle pagina's van de website https://www.nplw.nl/ staat een knop waarmee een dialoogvenster voor cookie-instellingen wordt geopend. Dit dialoogvenster heeft geen goede ARIA-rol en geen toegankelijke naam. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is. Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Bevinding 73: Op alle pagina's van https://www.nplw.nl/ wordt bij het eerste bezoek de cookiebanner getoond. Deze cookiebanner bevat de volgende tabbladen: "Toestemming", "Details" en "Over". Deze tabbladen zijn geïmplementeerd met behulp van het ARIA-patroon voor tabbladen. Maar het element met de role="tablist" heeft geen toegankelijke naam. Bij de elementen met de role="tab" ontbreekt het aria-controls-attribuut. Het aria-controls-attribuut is nodig omdat het elk tabblad met de bijbehorende inhoud associeert, zodat schermlezers de relatie tussen de tabbladen en hun inhoud kunnen overbrengen. Raadpleeg deze pagina voor meer informatie: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Bevinding 74: Op alle pagina's van de website https://www.nplw.nl/ staat bovenaan een zoekbalk. In deze zoekbalk staat een icoon van een vergrootglas dat als knop fungeert. Deze knop heeft aria-hidden="true" waardoor hij onzichtbaar is voor schermlezers. Dit verborgen element kan echter nog steeds toetsenbordfocus krijgen. Dit is een toegankelijkheidsprobleem: het element is onzichtbaar voor schermlezers, maar nog steeds focusbaar en bruikbaar voor toetsenbord- en muisgebruikers. Hierdoor krijgen bezoekers met een schermlezer niet dezelfde functionaliteit als andere bezoekers.

Bevinding 75: Op alle pagina's van https://www.nplw.nl/ staat bovenaan een navigatiemenu. De knoppen in dit navigatiemenu, zoals “Onderwerpen”, openen menu's. Het element met het menu heeft role="menu" in de code. Dit menu-element heeft echter geen toegankelijke naam. Er is geprobeerd een naam te geven door aria-label="Onderwerpen" toe te voegen aan het div-element, maar dit is niet correct. Het menu-element moet elementen bevatten met de role="menuitem". Op dit moment zijn dit li-elementen met links en knoppen erin die niet zijn toegestaan. De knoppen in het menu zoals "Warmteprogramma", openen submenu's die de juiste role="menu" hebben maar ook toegankelijke namen missen. De items in deze submenu's hebben ook niet de juiste role="menuitem". Zie bijvoorbeeld de link "Gemeentelijke organisatie".
Er zou veel moeten worden aangepast om het kloppend te krijgen met role=”menu”, terwijl de lijst op zichzelf al toegankelijk is, zonder deze rol. Het is hier niet nodig om deze ARIA-rollen te gebruiken. Ze kunnen het navigatiemenu zelfs juist minder toegankelijk maken. Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat wat er nodig is om een toepassing met role="menu" te maken.

Bevinding 76: Als een bezoeker pagina https://www.nplw.nl/over-nplw/contact-en-locatie op een klein scherm bekijkt, zijn er ingeklapte secties met verborgen inhoud (accordeons). Het gaat om "Bezoekadres", "Postadres", "Pers en media" en "Meer informatie". De elementen met de verborgen inhoud hebben ten onrechte role="tabpanel". Deze rol mag alleen worden gebruikt bij echte tabbladen, binnen een correct geïmplementeerd tabbladpatroon. De "tablist"-rol is niet geschikt voor accordeons, omdat die heel anders werken.
Daarnaast is geprobeerd om een toegankelijke naam te geven aan het element met role="tabpanel". Het gebruikte attribuut is niet juist geschreven. Er staat "aria-labelled-by", maar dit moet "aria-labelledby" zijn. Het wordt hier bovendien niet op de goede manier gebruikt. Het aria-labelledby-attribuut is bedoeld om naar een ander element in de code te verwijzen om de toegankelijke naam te definiëren.
Dit komt ook voor op de volgende pagina's als die op een klein scherm worden bekeken: https://www.nplw.nl/over-nplw/organisatie, https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen en https://www.nplw.nl/toegankelijkheidsverklaring.
Op pagina https://www.nplw.nl/over-nplw/contact-en-locatie zijn secties met verborgen inhoud (zogenaamde accordeons) aanwezig. Hoewel de open of gesloten toestand visueel duidelijk is en de elementen die de verborgen inhoud openen en sluiten een aria-expanded-attribuut hebben, wordt dit niet correct doorgegeven aan schermlezers.
Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo. Dit kan opgelost worden door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee de secties geopend en gesloten worden, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Bevinding 77: Op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen staan afbeeldingen die dialoogvensters openen, bijvoorbeeld onder het kopje "Voortgang proeftuinen in het kort". Deze dialoogvensters hebben geen toegankelijke naam.
Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft. Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Bevinding 78: Op pagina https://www.nplw.nl/data-en-monitoring/rapporten/voortgang-proeftuinen openen de knoppen met afbeeldingen dialoogvensters, maar deze functie is niet vastgelegd in de code. Er is geprobeerd om het verband tussen de knoppen en de dialoogvensters aan te geven met behulp van het attribuut aria-controls, maar dit attribuut is niet op de juiste manier gebruikt.
Verwijder het aria-controls-attribuut en voeg het attribuut aria-haspopup="dialog" toe. Dit attribuut geeft aan dat het klikken op de knop een dialoogvenster opent. De status van het dialoogvenster, open of gesloten, kan worden aangegeven met het aria-expanded-attribuut, dat de waarde true of false moet krijgen.

Bevinding 79: Op pagina https://www.nplw.nl/over-nplw/organisatie staat een iframe dat geen toegankelijke naam heeft. Het gaat om de video onder “Even voorstellen: NPLW”.
Iframes moeten een goede beschrijving hebben. Die komt 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 blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 80: Op pagina https://www.nplw.nl/zoeken?search=werk kunnen bezoekers de zoekresultaten verfijnen met een zoekveld en filters. Als de resultaten dynamisch worden bijgewerkt, verschijnt een melding, bijvoorbeeld "188 resultaten gevonden", maar deze krijgt geen toetsenbordfocus. Hierdoor merken schermlezers de melding niet op, en missen blinde bezoekers deze dus. Meldingen zoals deze worden statusberichten genoemd. En die moeten altijd opgemerkt worden door schermlezers, zodat die ze automatisch voorlezen. Om dit te bereiken moet role="status" aan de melding worden toegevoegd. Zie voor meer informatie de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-04-03 08:49:37 v2.4-011