Audit digitale toegankelijkheid van website kanaalnaardetoekomst.nl
Samenvatting
Wij hebben de website kanaalnaardetoekomst.nl onderzocht tussen 25 en 31 oktober 2025. Op dit moment zijn 35 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 20 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.
Kleurcontrast van tekst is te laag: Op verschillende plaatsen, zoals in het hoofdmenu, de cookiebanner, de footer en in afbeeldingen op de Energietransitie-pagina, is het kleurcontrast van de tekst te laag, wat de leesbaarheid voor veel bezoekers bemoeilijkt.
Menu-knop heeft niet de juiste rol: Op een klein scherm mist de menuknop de juiste toegankelijke rol, waardoor hulpsoftware deze niet als knop herkent.
Toetsenbordfocus klopt niet in het mobiele menu: De toetsenbordfocus kan buiten het mobiele menu navigeren terwijl het menu geopend blijft.
Alle pagina's op de website kanaalnaardetoekomst.nl
Alle PDF's op de website kanaalnaardetoekomst.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.
Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een dialoogvenster met een cookiebanner. Dit dialoogvenster mist zowel een correcte rol als een toegankelijke naam. Schermlezers kunnen hierdoor niet voorlezen dat het om een dialoogvenster gaat, en wat de inhoud ervan is.
Oplossing:
Voeg het attribuut role="dialog" toe aan het venster, geef de bestaande zichtbare kop (<h2>) een uniek id, en koppel de dialoogcontainer aan die kop door het attribuut aria-labelledby toe te voegen met de id van de kop als waarde. Je kunt ook een aria-label gebruiken om dit venster een naam te geven.
Toetsenbord focus gaat buiten het dialoogvenster
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een dialoogvenster met een cookiebanner. Op dit moment kan de toetsenbordfocus het geopende dialoogvenster verlaten en naar de onderliggende paginainhoud verplaatsen.
Bij dit soort dialoogvensters moet je de toetsenbordfocus goed instellen. Als het venster actief is, moet de toetsenbordfocus binnen het venster blijven, en mag deze niet op de onderliggende pagina terechtkomen.
Oplossing:
Je kunt dit oplossen met Javascript door de focus binnen het venster te houden totdat de bezoeker het sluit.
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
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop “Details bekijken” toont secties met verborgen inhoud onder “De cookies die wij gebruiken per categorie”. Hoewel de open- of dichtgeklapte status van deze secties visueel duidelijk is, wordt deze niet programmatisch doorgegeven aan schermlezers.
Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie in- of uitgeklapt is. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken is dat niet zo.
Oplossing:
Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.
Pijltjes bij accordeon hebben geen tekstalternatief
Impact: GrootType: TechniekWCAG: 1.1.1EN: 9.1.1.1
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop “Details bekijken” toont secties met verborgen inhoud onder “De cookies die wij gebruiken per categorie”. De pijliconen die de aanwezigheid van de verborgen inhoud aangeven, hebben geen 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 pijltje een tekstalternatief (alt-tekst of een aria-label)
voeg verborgen tekst toe die verandert als accordeon opent of sluit
gebruik een aria-expanded-attribuut
Taalwisseling ontbreekt op anderstalige content
Impact: MediumType: ContentWCAG: 3.1.2EN: 9.3.1.2
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop “Details bekijken” toont secties met verborgen inhoud onder “De cookies die wij gebruiken per categorie”. In deze secties staan delen in de Engelse taal zonder taalcode (zie tabellen of zinnen zoals “We do not use any functional cookies”).
Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.
Oplossing:
Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In het hoofdmenu staan links met de witte tekst op video als achtergrond. In sommige fragmenten komt deze witte tekst op een zeer lichte achtergrond te staan. Het kleurcontrast wordt dan lager dan 4,5:1 die nodig is voor deze tekst van 16 pixels.
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. De knop “Details bekijken” toont de sectie “De cookies die wij gebruiken per categorie”. Deze sectie heeft donkerblauwe tekst (#345DA8) op een lichtgrijze achtergrond (#D4D4D0). De kleurcontrastverhouding is te laag: 4,3:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Kleurcontrast van informatieve iconen is niet voldoende
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. Het contrast van de selectievakjes in deze banner ligt onder de vereiste 3,0:1 voor grafische elementen die informatie overbrengen. De blauwe aangevinkte selectievakjes (#91A5C8) tegen de grijze achtergrond (#ECEBE8) hebben een contrastverhouding van 2,1:1, terwijl de grijze niet-aangevinkte iconen (#D4D3D0) een contrastverhouding van 1,3:1 hebben.
Het kleurcontrast van informatieve iconen moet minimaal 3,0:1 zijn.
Oplossing:
Zorg dat de iconen voldoende contrast hebben.
Relatie tussen de links in het kruimelpad is niet in de code vastgelegd
Op pagina’s met de kruimelpadnavigatie is deze geïmplementeerd als een verzameling links, maar de onderliggende structuur en de relatie tussen deze links zijn niet semantisch gedefinieerd in de HTML. Zie bijvoorbeeld: https://www.kanaalnaardetoekomst.nl/nieuws/bekijk-de-film-kanaal-naar-de-toekomst/.
Oplossing:
Plaats de links in een nav- of een ul- of ol-element.
Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.
Oplossing:
Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.
Zorg dat de skiplink:
de eerste link op de pagina is;
visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.
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.
Oplossing:
Zorg dat de webpagina’s op meerdere manieren te vinden zijn. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.
Elementen die toetsenbordfocus krijgen zijn bedekt door sticky header
Impact: GrootType: TechniekWCAG: 2.4.11
Wanneer de website wordt verkleind tot een lagere resolutie, bedekt een sticky header een deel van de pagina. Hoewel interactieve elementen, zoals links, nog steeds toetsenbordfocus kunnen krijgen, wordt de focusindicator verborgen achter deze sticky header. Zie bijvoorbeeld de sociale-medialinks in de footer bij 300% zoom.
Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.
Oplossing:
Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.
Tekstalternatief van het logo is niet voldoende
Impact: GrootType: ContentWCAG: 1.1.1EN: 9.1.1.1
Het logo bovenaan de website toont de volledige tekst “NZKG noordzeekanaalgebied kanaal naar de toekomst”, maar de alt-tekst luidt slechts “Kanaal naar de toekomst Logo”. Het logo in de footer toont de tekst “NZKG noordzeekanaalgebied kanaal”, terwijl het tekstalternatief eveneens “Kanaal naar de toekomst Logo” is.
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.
Oplossing:
Verander de alt-tekst zodat de volledige tekst van het logo erin staat.
Tekst van het logo staat niet in toegankelijke naam
Impact: MediumType: ContentWCAG: 2.5.3EN: 9.2.5.3
Bovenaan de pagina toont het logo de tekst: “NZKG noordzeekanaalgebied kanaal naar de toekomst”. De toegankelijke naam van deze link is “Kanaal naar de toekomst Logo”. Het logo in de footer toont de tekst “NZKG noordzeekanaalgebied kanaal”, en het tekstalternatief is “Kanaal naar de toekomst Logo”.
Zoals je ziet is de toegankelijke naam van de link niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt de link niet goed als je hem met je stem wilt activeren. Je noemt dan namelijk de tekst die je in het logo ziet. Als de toegankelijke naam anders is, zal het systeem de link dus niet herkennen.
Oplossing:
Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.
Menu-knop heeft niet de juiste rol
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op een klein scherm mist de menuknop bovenaan de juiste toegankelijke rol. Hierdoor kunnen hulpmiddelen zoals schermlezers deze niet herkennen als een knop.
De juiste rol voor de menuknop zou button (knop) moeten zijn, omdat je er een actie mee uitvoert: het openen of sluiten van het menu. Als de knop niet de juiste rol heeft, kan een schermlezer of ander hulpmiddel de knop niet goed herkennen, waardoor deze moeilijker te gebruiken is voor mensen die deze hulptechnologie gebruiken.
Oplossing:
Zorg dat de menuknop de juiste rol krijgt, door het button-element ervoor te gebruiken, of role="button" toe te voegen.
Knop kan niet bediend worden met spatiebalk en Enter-toets
Impact: GrootType: TechniekWCAG: 2.1.1EN: 9.2.1.1
Op een klein scherm is de menuknop niet toegankelijk via het toetsenbord.
Oplossing:
Zorg dat de knop zowel met de spatiebalk als de Enter-toets bediend kan worden.
Toetsenbordfocus klopt niet in het mobiele menu
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
De menuknop bovenaan de pagina opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord buiten het mobiele menu navigeren. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina, terwijl het menu geopend blijft.
Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen. Dit kan worden opgelost door de focus binnen het menu te houden, totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Het is ook mogelijk om het menu automatisch te sluiten zodra de toetsenbordfocus eruit gaat.
Oplossing:
Zorg ervoor dat de focus in het menu blijft totdat de bezoeker dit sluit door op de sluitknop te klikken of de ESC-toets in te drukken. Je kunt het menu ook automatisch sluiten als de focus het menu verlaat.
Onzichtbaar element krijgt toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Op een klein scherm komt de focus na het logo terecht op onzichtbare interactieve elementen.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
In de footer staat een lichtblauwe tekst “Custom website by Omelette du Fromage” (#9AAED4) op een blauwe achtergrond (#345DA8). De kleurcontrastverhouding is te laag: 2,9:1.
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Video speelt automatisch af en kan niet worden gepauzeerd of gestopt
Impact: GrootType: TechniekWCAG: 2.2.2EN: 9.2.2.2
Op deze pagina staat een video die automatisch wordt afgespeeld en niet kan worden gepauzeerd of gestopt.
Het kan storend zijn voor mensen met een cognitieve beperking als een video op een website automatisch gaat spelen. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.
Oplossing:
Er moet een manier zijn waarmee bezoekers dit soort multimedia kunnen 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.
Knop heeft niet de juiste toegankelijke rol
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op deze pagina, onder 'De video', heeft de knop 'De video afspelen' niet de juiste toegankelijke rol.
Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.
Oplossing:
Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik het button-element.
Video bevat tekst of logo’s waarvoor geen alternatief is
Op deze pagina staat onder “Evenementen” een blauwe tekst “13 – 15 jun. 2025” (#788CB2) op een blauwe achtergrond (#90A4C8). De kleurcontrastverhouding is te laag: 1,3:1.
De tekst “Zeehavendagen Amsterdam 2025” heeft eveneens een onvoldoende contrastverhouding van 2,4:1, met blauwe tekst (#345DA8) op een blauwe achtergrond (#859ECB).
Op deze pagina wordt onder de kop “De video” een video getoond. De video bevat op verschillende momenten tekst en logo’s (bijvoorbeeld rond 0:00–0:08 en 3:58–4:40). Er is echter geen media-alternatief of audiodescriptie beschikbaar. De video bevat visuele informatie (tekst en logo’s) die niet toegankelijk is voor blinde gebruikers.
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.
Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)
Op deze pagina staat onder “Evenementen” een blauwe tekst “13 – 15 jun. 2025” (#788CB2) op een blauwe achtergrond (#90A4C8). De kleurcontrastverhouding is te laag: 1,3:1.
De tekst “Zeehavendagen Amsterdam 2025” heeft eveneens een onvoldoende contrastverhouding van 2,4:1, met blauwe tekst (#345DA8) op een blauwe achtergrond (#859ECB).
Oplossing:
Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Op deze pagina wordt een video getoond. De video bevat op verschillende momenten tekst en logo’s (bijvoorbeeld rond 0:00–0:08 en 3:58–4:40). Er is echter geen media-alternatief of audiodescriptie beschikbaar. De video bevat visuele informatie (tekst en logo’s) die niet toegankelijk is voor blinde gebruikers.
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.
De Youtube-video’s gebruiken letters als sneltoetsen
Impact: MediumType: ContentWCAG: 2.1.4EN: 9.2.1.4
Deze pagina bevat een YouTube-videospeler die gebruikmaakt van sneltoetsen met één teken.
De ‘k' toets kan gebruikt worden om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met hulpsoftware. 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).
Op deze pagina komt de toetsenbordfocus terecht op onzichtbare interactieve elementen na de knop “Luisteren”.
De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.
Oplossing:
Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.
Toetsenbordfocus is niet zichtbaar
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op deze pagina is de toetsenbordfocus niet zichtbaar op de knop 'Luisteren'.
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 deze pagina staat een instructie om zelf focuszichtbaarheid te testen: https://properaccess.nl/hoe-test-ik-focus-zichtbaarheid/ .
Contrast van tekst in afbeelding is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
Op deze pagina staat een afbeelding met de tekst “ENERGIETRANSITIE NOORDZEEKANAALGEBIED” die ingesloten tekst bevat. In de legenda heeft de bruine tekst (#B58633) op de lichtgrijze achtergrond (#E6ECED) een contrastverhouding van 2,7:1. De grijze tekst (#959595) op dezelfde lichtgrijze achtergrond (#E6ECED) heeft een contrastverhouding van 2,5:1.
Op de kaart heeft de blauwe tekst (#3C68AB), zoals “Beverwijk”, op een lichtgrijze achtergrond (#BACACC) een contrastverhouding van 3,3:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Kleur alleen gebruikt in legenda bij kaart om informatie te geven
Impact: MediumType: ContentWCAG: 1.4.1EN: 9.1.4.1
Op deze pagina wordt alleen kleur gebruikt in een kaart om informatie te geven. Zie lijnen in kaart onder "ENERGIETRANSITIE NOORDZEEKANAALGEBIED".
Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden zie je welke balk / lijn bij welke categorie in de legenda hoort.
Oplossing:
Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering of datalabels in tekst.
Title van het pdf-document beschrijft de content niet (goed)
Impact: MediumType: ContentWCAG: 2.4.2EN: 9.2.4.2
Dit pdf-document heeft in de bestandseigenschappen de titel “NZKG-lege-kaart”, wat de inhoud van het document niet adequaat beschrijft.
De titel van een pdf-document moet het onderwerp of doel van het document duidelijk beschrijven. Hierdoor kunnen bezoekers snel en makkelijk bepalen of het document relevant is.
Oplossing:
Dit kun je aanpassen in de bestandseigenschappen van het bronbestand of van het pdf-document.
De taal is niet ingesteld in de metadata
Impact: MediumType: ContentWCAG: 3.1.1EN: 9.3.1.1
In de metadata van deze pdf is de taal niet ingesteld.
Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen.
Los het op in Adobe Acrobat:
Open het pdf-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Geavanceerd.
Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
Klik op OK en sla het bestand op.
Structuur van pdf-document is niet in codes vastgelegd
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Dit pdf-document bevat geen codes, 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 je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.
Oplossing:
Voeg codes toe aan het document die de structuur van het document weergeven.
Contrast van tekst in afbeelding is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
In dit pdf-document heeft in de legenda de bruine tekst (#B58633) op de lichtgrijze achtergrond (#E6ECED) een contrastverhouding van 2,7:1. De grijze tekst (#959595) op dezelfde lichtgrijze achtergrond (#E6ECED) heeft een contrastverhouding van 2,5:1.
Op de kaart heeft de blauwe tekst (#3C68AB), zoals “Beverwijk”, op een lichtgrijze achtergrond (#BACACC) een contrastverhouding van 3,3:1.
Oplossing:
Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Kleur alleen is gebruikt in legenda bij kaart om informatie te geven
Impact: MediumType: ContentWCAG: 1.4.1EN: 9.1.4.1
In dit pdf-document wordt uitsluitend kleur gebruikt op de kaart om informatie over te brengen. Zie de lijnen op de kaart.
Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden zie je welke balk / lijn bij welke categorie in de legenda hoort.
Oplossing:
Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering of datalabels in tekst.
Voldoet of niet van toepassing: 35
Voldoet niet: 20
