Contrast van icoon op knop is te laag

In de cookiebanner staan schakelknoppen. Er is onvoldoende kleurcontrast tussen de knop en de achtergrond. De contrastverhouding van 1,3:1 is te laag. Deze knoppen zijn dus niet voor iedereen zichtbaar.

Oplossing:

Zorg voor een minimaal contrast van 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Gegevenstabel mist de juiste markering

In de cookiebanner verschijnt, na het klikken op “Details bekijken” en vervolgens op “Noodzakelijk“ of “Statistieken”, een gegevenstabel. De juiste mark-up ontbreekt. Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen.

Oplossing:

Zet de koppen in th-elementen en de gegevens in td-elementen.

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

Wanneer alle pagina’s worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verdwijnt de tekst van de cookiebanner.

Oplossing:

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

Er is geen skiplink aanwezig

Er is geen skiplink.

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

Oplossing:

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

Tekstalternatief van het logo is niet voldoende

Het logo bovenaan de website toont de volledige tekst “Programmabureau NZKG noordzeekanaalgebied”, maar de alt-tekst luidt slechts “Noordzeekanaalgebied”.

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. Zie ook het logo onderaan de pagina. De website toont de volledige tekst “NZKG”, maar de alt-tekst luidt slechts “Noordzeekanaalgebied”. Hetzelfde probleem doet zich voor in het menu. Bovenaan de pagina staat een logo met de volledige tekst “Programmabureau NZKG noordzeekanaalgebied”, maar de alt-tekst luidt slechts “Noordzeekanaalgebied Logo”.

Oplossing:

Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Programmabureau NZKG noordzeekanaalgebied”.

Tekst van het logo staat niet in toegankelijke naam

Bovenaan de pagina toont het logo de tekst: “Programmabureau NZKG noordzeekanaalgebied”. De toegankelijke naam van deze link is echter “Go home”. Deze tekst komt van het aria-label. 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.

Zie ook het logo onderaan de pagina. De website toont de volledige tekst “NZKG”, maar de alt-tekst luidt slechts “Noordzeekanaalgebied”.

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. Pas het aria-label aan. Je kunt het aria-label verwijderen om de alt-tekst van het logo de kans te geven om de link een toegankelijke naam te geven. In dit geval moet de alt-tekst de volledige zichtbare tekst van het logo bevatten.

Toegankelijke namen zijn in het Engels geschreven

Deze pagina bevat meerdere aria-label-attributen met tekst in het Engels. Zo heeft bijvoorbeeld bovenaan alle pagina’s de link met het logo “Programmabureau NZKG noordzeekanaalgebied” de toegankelijke naam “Go home”, en de link met de Engelse vlag de toegankelijke naam “View this page in English”. Onderaan de pagina heeft de link naar LinkedIn de toegankelijke naam “View our LinkedIn profile”. Zie ook de alt-teksten bij afbeeldingen in het menu — bijvoorbeeld de link “Nieuws” heeft de toegankelijke naam “News icon Nieuws”, omdat het pictogram met een krant alt="News icon" heeft. Bekijk ook de andere toegankelijke namen op de site.

Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Een vergelijkbaar probleem doet zich voor op de Engelstalige pagina https://www.noordzeekanaalgebied.nl/en/publications/. Bovenaan de pagina heeft de link met de Nederlandse vlag de toegankelijke naam “Bekijk deze pagina in het Nederlands”, en onderaan de pagina hebben de invoervelden de placeholders “Voornaam”, “Achternaam” en “E-mailadres”.

Oplossing:

Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Menuknop geeft geen informatie over toestand van het menu

Bovenaan alle pagina’s staat een knop “Menu”. Deze knop geeft geen informatie over de status van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van schermlezers.

Oplossing:

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

Op deze pagina hebben de hoofdmenulinks “VERDUURZAMING INDUSTRIE”, “OPGAVEN FYSIEKE RUIMTE” en “SAMENWERKING” een submenu, maar een blinde bezoeker krijgt geen informatie over of het submenu open of gesloten is. Als er een link is die een submenu kan tonen of verbergen, moet hulpsoftware de status van dat submenu (zichtbaar of verborgen) kunnen bepalen.

Oplossing:

Je kunt hiervoor het aria-expanded-attribuut gebruiken.

Mobiel menu werkt niet goed met toetsenbordfocus

De menuknop bovenaan de pagina 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.

Hetzelfde probleem doet zich voor bij cookiebaners.

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.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Onderaan alle pagina’s staat een formulier met invoervelden voor persoonlijke gegevens (zoals achternaam en e-mailadres) waarin het autocomplete-attribuut ontbreekt.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer 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.

Voor de validatie is alleen HTML5-validatie gebruikt

Onderaan alle pagina’s gebruikt een formulier uitsluitend HTML5-validatie voor de invoervelden “Voornaam”, “Achternaam” en “E-mailadres”.

Deze foutmeldingen verdwijnen te snel. Er is dus tijdslimiet ingesteld.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

HTML5 foutmeldingen worden getoond

Onderaan alle pagina’s wordt in een formulier HTML5-validatie gebruikt, waarbij standaard HTML5-foutmeldingen worden weergegeven 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.

HTML5-foutmeldingen zijn in het Engels

Onderaan alle pagina’s gebruikt een formulier HTML5-validatie, waarbij standaard HTML5-foutmeldingen in het Engels worden weergegeven wanneer het formulier met lege of onjuiste gegevens wordt verzonden. Er ontbreekt een taalswitch, waardoor de foutmeldingen met de uitspraakregels van de Nederlandse taal worden voorgelezen.

Oplossing:

Voeg altijd eigen foutmeldingen toe aan formulieren en zorg ervoor dat deze in het Nederlands zijn geschreven. Controleer daarnaast of er nog andere formulieren op de website zijn die hetzelfde probleem hebben.

strong-element is gebruikt voor opmaak

Op alle pagina’s wordt het strong-element onjuist gebruikt voor opmaakdoeleinden in de knop “Menu”. Hele zinnen zijn met een strong-element omgeven om ze vet te maken. Zie ook de tags bij Nieuws, zoals “Samenwerking”, en de contactinformatie, zoals “Adres:”.

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

Op pagina https://www.noordzeekanaalgebied.nl/nieuwsberichten/is-een-energyhub-het-energiesysteem-van-de-toekomst-we-zijn-met-elkaar-aan-het-pionieren/ wordt het strong-element onder de kop “Is een energyhub het energiesysteem van de toekomst? ‘We zijn met elkaar aan het pionieren’” onjuist gebruikt voor opmaakdoeleinden.

Zie ook de pagina https://www.noordzeekanaalgebied.nl/programmas/regionale-samenwerking/, waar tekst onder de kop “Inhoud” hetzelfde probleem vertoont.

Op pagina https://www.noordzeekanaalgebied.nl/nieuwsberichten/jtf-film-phoenix-metals-en-strohm/ geldt dit ook voor de tekst “Tijdens de bestuurlijke Pre-Sail IJmond…”.

Een vergelijkbaar probleem is aanwezig op de pagina https://www.noordzeekanaalgebied.nl/nieuwsberichten/economische-cijfers-over-het-noordzeekanaalgebied-opgenomen-in-atlas-plabeka/ bij de tekst die begint met “De nieuwe cijfers over ontwikkelingen…”.

Zie ook andere pagina’s voor soortgelijke gevallen.

Oplossing:

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

Onzichtbaar element krijgt toetsenbordfocus

In de header komt de toetsenbordfocus terecht op een onzichtbaar interactief element na de link met het logo “Programmabureau NZKG noordzeekanaalgebied”. 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.

Knop heeft geen toegankelijke naam

Op alle pagina’s ontbreekt bij weergave op een klein scherm een toegankelijke naam voor de knop met de pijl. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.

Oplossing:

Voorzie deze knop van een toegankelijke naam, bijvoorbeeld door een beschrijvende knoptekst toe te voegen, een aria-label te gebruiken of een andere geschikte techniek toe te passen.

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

Wanneer alle pagina’s worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, raakt in het menu de volgende tekst gedeeltelijk of volledig uit beeld: de link “Home”, de link “Verduurzaming industrie”, de link “Over ons” en andere.

Oplossing:

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

Volgorde toetsenbordfocus is niet logisch

Op alle pagina’s krijgt op een klein scherm het formulier onder de kop “Nieuwsbrief” pas focus na de onderliggende content. Deze volgorde van toetsenbordfocus is niet logisch. Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

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

Knoppen niet te bedienen met toetsenbord

Op alle pagina’s verschijnt op een klein scherm een knop met een pijltje omhoog. Deze knop is niet bedienbaar met het toetsenbord.

In de filtersectie op https://www.noordzeekanaalgebied.nl/nieuwsberichten bevinden zich knoppen die niet met het toetsenbord te bedienen zijn. Zie ook de pagina’s https://www.noordzeekanaalgebied.nl/zoeken/ en https://www.noordzeekanaalgebied.nl/en/publications/. Een vergelijkbaar probleem doet zich voor op de pagina https://www.noordzeekanaalgebied.nl/programmas/energie/, bij de plusknoppen rechts van de koppen “Waterstof” en “Koolstof”.

Oplossing:

Zorg dat alle filterknoppen met het toetsenbord kunnen worden geopend en gebruikt. Dat kan door display:none van de input-elementen te verwijderen.

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

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staan onder de kop “Programma’s” decoratieve afbeeldingen. De tekstalternatieven luiden: “Afbeelding over programma Verduurzaming industrie”, “Afbeelding over programma Opgaven fysieke ruimte”, “Afbeelding over programma Samenwerking” en andere. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Laat het alt-attribuut leeg.

Leesvolgorde is niet logisch

Op deze pagina is de HTML-volgorde van de elementen binnen “Programma’s” en “Nieuwsberichten” als volgt: link, afbeelding, enkele informatie over het nieuws (tag, datum), kop, tekst.

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

Zie ook pagina https://www.noordzeekanaalgebied.nl/nieuwsberichten. Daar staan nieuwsberichten met de volgende volgorde: afbeelding, informatie over het nieuwsbericht (tag, datum) en kop.

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.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op twee onzichtbare interactieve elementen na de laatste slide in de slider onder “Nieuwsberichten”, zie de link “Nova College Beverwijk gaat waterstofexperts klaarstomen als aanjager van de energietransitie”.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker deze onbedoeld activeren. Een vergelijkbaar doet zich op deze pagina voor na de link “Position Paper Hydrogen Hub NZKG 2022 - English version”.

Oplossing:

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

Link naar pagina: https://www.noordzeekanaalgebied.nl/contact/

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat onder de kop “Contact” een decoratieve afbeelding. Er ontbreekt een alt-attribuut bij dit img-element. Er wordt nu de bestandsnaam voorgelezen.

Oplossing:

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers. Dit kan op verschillende manieren. Een img-element kun je bijvoorbeeld verbergen door het alt = “”.

Link naar pagina: https://www.noordzeekanaalgebied.nl/nieuwsberichten

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

Op deze pagina staat grijze tekst (#AAAAAA), bijvoorbeeld “Economie”, “CES”, “Elektriciteit” en andere, op een lichtgrijze achtergrond (#EFEFEF). De kleurcontrastverhouding is te laag: 2,0:1. Hetzelfde probleem doet zich voor op de pagina https://www.noordzeekanaalgebied.nl/en/publications/. Zie ook de zwarte tekst “Verduurzaming industrie” op een rode achtergrond (#C41E63). De kleurcontrastverhouding is te laag: 3,7:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Het geselecteerde keuzevakje ziet er anders uit, maar status is niet in code aangegeven

Op deze pagina is een filter aanwezig. De geselecteerde optie ziet er anders uit dan de rest, maar deze informatie is niet toegankelijk voor blinde en slechtziende gebruikers. Omdat in de code niet wordt aangegeven welke checkbox is geselecteerd, kan een schermlezer deze informatie niet doorgeven aan een blinde bezoeker. Wanneer standaard HTML-elementen zoals <input type="checkbox"> worden gebruikt en de gebruiker ze selecteert, wordt de status van de checkbox automatisch bijgewerkt in de HTML.

Als de checkbox echter wordt verborgen of vervangen door een aangepast visueel element, kunnen hulptechnologieën de status niet detecteren. De checkbox moet daarom zichtbaar en semantisch correct in de code blijven, zodat de status goed wordt gecommuniceerd naar alle gebruikers.

Zie ook de pagina https://www.noordzeekanaalgebied.nl/zoeken/.

Oplossing:

Gebruik het standaard HTML-element <input type=”checkbox”> en verberg het niet voor hulpsoftware.

Link naar pagina: https://www.noordzeekanaalgebied.nl/programmas/regionale-samenwerking/

strong-element in plaats van kop-element

Op deze pagina zijn de volgende teksten onjuist opgemaakt met strong in plaats van met de juiste kop-elementen: “Rol publieke partijen”, “Rol private partijen”, “Bestuurscommissie Verduurzaming Industrie/Energietransitie” en andere.

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Oplossing:

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

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de volgende elementen: “Verduurzaming industrie”, “Opgaven fysieke ruimte” en “Samenwerking”.

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.

Hetzelfde probleem doet zich voor op de pagina https://www.noordzeekanaalgebied.nl/programmas/ruimte/, https://www.noordzeekanaalgebied.nl/programmas/energie/.

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

Kleurcontrast van tekst is niet voldoende als de muiscursor over tekst beweegt

Op deze pagina verandert de tekst van de links “Een toekomstbestendig Noordzeekanaalgebied”, “Programmabureau NZKG: werken aan ruimte voor de toekomst”, “Bestuursplatform NZKG: samen koers zetten voor het gebied” en andere wanneer de link wordt aangewezen (hover). De kleurcontrastverhouding van deze tekst is 2,5:1.

Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook als het element toetsenbord focus krijgt of als de bezoeker met de muiscursor over het element beweegt (hover).

Oplossing:

Zorg dat de tekst ook als de muis eroverheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Contrast van tekst in afbeelding is te laag

Op deze pagina staan afbeeldingen met ingesloten tekst. Bijvoorbeeld de afbeelding met de tekst “Klik op de afbeelding voor een grotere weergave.” De witte tekst op de oranje achtergrond (#D94722) heeft een contrastverhouding van 4,3:1.

Zie ook de afbeelding met de tekst “Klik op de afbeelding om te zien welke organisaties samenwerken in het Bestuursplatform NZKG.” Hier staat witte tekst op een groene (#7FB73D) en blauwe (#52AFE4) achtergrond. De contrastverhouding is 2,4:1.

Zie ook andere afbeeldingen op deze pagina en op https://www.noordzeekanaalgebied.nl/programmas/energie/.

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.

Link heeft geen tekst, waardoor linkdoel onbekend is

Op deze pagina staan afbeeldingen die ook fungeren als links, maar geen inhoud hebben en daardoor geen herkenbaar doel voor de link bieden. Bijvoorbeeld de afbeelding onder “Klik op de afbeelding voor een grotere weergave.”. Een blinde bezoeker weet daardoor niet waar de link naartoe zal leiden.

Hetzelfde probleem doet zich voor op https://www.noordzeekanaalgebied.nl/programmas/ruimte/, https://www.noordzeekanaalgebied.nl/programmas/energie/.

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.

Link heeft geen toegankelijke naam

Op deze pagina staan afbeeldingen die ook fungeren als links, maar die geen toegankelijke naam hebben. Bijvoorbeeld de afbeelding onder “Klik op de afbeelding voor een grotere weergave.”.

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

Hetzelfde probleem doet zich voor op https://www.noordzeekanaalgebied.nl/programmas/ruimte/, https://www.noordzeekanaalgebied.nl/programmas/energie/.

Oplossing:

Je kunt de toegankelijke naam geven via linktekst, een aria-label of een andere techniek.

Bij 400% zoom is een horizontale scrollbar aanwezig

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

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

Zie ook https://www.noordzeekanaalgebied.nl/programmas/ruimte/, https://www.noordzeekanaalgebied.nl/programmas/energie/.

Oplossing:

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

Tekstalternatief van complexe afbeelding ontbreekt

Op deze pagina staat in de sectie onder “Programmabureau NZKG: werken aan ruimte voor de toekomst” een complexe afbeelding zonder tekstalternatief. Er zijn ook andere afbeeldingen met hetzelfde probleem. Bij deze img-elementen ontbreekt het alt-attribuut.

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

Zie ook de pagina https://www.noordzeekanaalgebied.nl/programmas/energie/ onder de koppen “Programma Verduurzaming Industrie/ Energietransitie NZKG” en “Waterstof”.

Oplossing:

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

Link naar pagina: https://www.noordzeekanaalgebied.nl/programmas/ruimte/

Video speelt automatisch af

Op deze pagina staan video’s die automatisch worden afgespeeld en niet kunnen worden gepauzeerd of gestopt. Bijvoorbeeld de video onder de kop “Een gezondere leefomgeving in de IJmond”.

Dit kan storend zijn voor mensen met een cognitieve beperking, omdat automatisch afgespeelde video’s voor voortdurende afleiding zorgen terwijl zij proberen de tekst op de pagina te lezen.

Zie ook de pagina https://www.noordzeekanaalgebied.nl/zoeken/ — na het invoeren van tekst in het zoekveld wordt deze tekst gemarkeerd en verandert de markeerkleur voortdurend.

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.

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

Deze pagina bevat een iframe met het title-attribuut “Ontwikkel-perspectief Noordzeekanaalgebied”.

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.

Oplossing:

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

De Vimeo-video’s gebruiken letters als sneltoetsen

Deze pagina bevat een Vimeo-videospeler die gebruikmaakt van sneltoetsen met één teken.

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

Oplossing:

Bekijk voor meer informatie https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters (Engels).

Video heeft geen ondertiteling

Op deze pagina staat een video met de titel 'Ontwikkelperspectief NZKG' met gesproken tekst, maar zonder ondertiteling.

Ondertitels zijn essentieel voor bezoekers die doof of slechthorend zijn om toegang te krijgen tot alle inhoud van de video.

Oplossing:

Voeg ondertiteling toe aan de video.

Tekst van de knop heeft te weinig contrast

Op deze pagina heeft de knop met de tekst “Download Uitvoeringsagenda NOVEX-NZKG” onvoldoende kleurcontrast. De witte tekst op de groene achtergrond (#78B206) heeft een contrastverhouding van 2,6:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor standaardtekst.

Zie ook de knoppen “Download Ontwikkelperspectief NZKG”, “Atlas Plabeka 2025” en andere. Dit contrast moet minimaal 4,5:1 zijn.

Hetzelfde probleem doet zich voor op de pagina https://www.noordzeekanaalgebied.nl/nieuwsberichten/economische-cijfers-over-het-noordzeekanaalgebied-opgenomen-in-atlas-plabeka/.

Oplossing:

Zorg dat teksten voldoende contrast hebben.

Link naar pagina: https://www.noordzeekanaalgebied.nl/en/publications/

Geen nieuwe bevindingen.

Link naar pagina: https://www.noordzeekanaalgebied.nl/programmas/energie/

Geen nieuwe bevindingen.

Link naar pagina: https://www.noordzeekanaalgebied.nl/agenda/

Geen nieuwe bevindingen.

Link naar pagina: https://www.noordzeekanaalgebied.nl/nieuwsberichten/economische-cijfers-over-het-noordzeekanaalgebied-opgenomen-in-atlas-plabeka/

Geen nieuwe bevindingen.

Link naar pagina: https://www.noordzeekanaalgebied.nl/over-ons/

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

Op deze pagina staat blauwe tekst (#3EADE5), zoals “lousanne.boeijen@noordzeekanaalgebied.nl”, op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,5:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Onderstreping van de links heeft niet genoeg contrast

Links in de lopende tekst op deze pagina, zoals de link “lousanne.boeijen@noordzeekanaalgebied.nl”, zijn onderstreept in een aangepaste kleur. Het contrast tussen deze blauwe tekst (#3EADE5) en de witte achtergrond bedraagt 2,5:1.

Oplossing:

Zorg dat het contrast tussen de kleur van de onderstreping en de achtergrond minimaal 3,0:1 is.

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

Link naar PDF: https://www.noordzeekanaalgebied.nl/uploads/79791-nzkg-ces-rapport-2024-tg-pdfa.pdf

Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn meerdere koppen niet opgemaakt als koppen. Zie bijvoorbeeld “Inhoud”, “Managementsamenvatting”, “1. ELEKTRIFICATIE” 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.

Informatieve afbeelding is als achtergrondafbeelding geplaatst

Pagina 23 van dit pdf-document is een afbeelding met een schema geplaatst 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.

Zie ook pagina 27, 30, 31 en andere.

Oplossing:

Voeg het afbeelding met een schema toe met de Figure-tag en geef het een beschrijvende alternatieve tekst.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat groene tekst (#4FA06E), zoals “H2era:”, “Hy4Am:” en “CO₂-netwerk NZKG:”, op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,2:1. Zie ook groene tekst (#498A47), zoals “VRAAG NAAR ELEKTRICITEIT NEEMT SUBSTANTIEEL TOE”, “AANBOD DUURZAME ELEKTRICITEIT (WIND OP ZEE) WORDT VERGROOT”, “NETBALANCERING” en andere, op een witte achtergrond. De contrastverhouding is te laag: 4,2:1.

Daarnaast is er grijze tekst (#959595), zoals “CO₂ -afvang en CO₂-netwerk”, “AEB – CCS (Aurora)” en “CO₂-leiding (OCAP)”, op een witte achtergrond. De contrastverhouding is te laag: 3,0:1.

Ook staat er blauwe tekst (#3C68AB), zoals “IJmond”, op een lichtblauwe (#CFE5F2) en grijze (#BACACD) achtergrond. De maximale contrastverhouding is te laag: 4,3:1. Zie ook andere kleurcombinaties in dit document.

Oplossing:

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

Afbeelding bevat tekst

In dit pdf-document staan op pagina 6, 7, 23 en andere pagina's afbeeldingen met ingesloten tekst.

Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tekst als gewone tekst in het document te plaatsen. Dan kunnen mensen die slechtziend zijn de teksteigenschappen aanpassen, zodat het beter leesbaar is voor hen. Dat kan nu niet, omdat de tekst in een afbeelding staat.

Oplossing:

Zet de tekst die nu in de afbeelding staat als gewone tekst in het document.

Alleen kleur gebruikt in legenda bij grafiek om informatie te geven

Op pagina 23 van dit pdf-document staat een grafiek. Kleur wordt gebruikt om informatie weer te geven. Zie de legenda en de balken in de grafiek.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Kleurcontrast tussen lijnen of balken in grafiek is niet voldoende

In dit pdf-document staan op pagina 7 een groene lijn (#298646) en een blauwe lijn (#338ECD) met een contrastverhouding van 1,3:1. Zie ook een blauwe lijn (#3490CF) en een grijze lijn (#8A8E8F) met een contrastverhouding van 1,1:1. Daarnaast is er een paarse lijn (#8063AA) en een grijze lijn (#8A8E8F) met een contrastverhouding van 1,5:1. Zie ook andere kleurcombinaties.

Hetzelfde probleem doet zich voor bij het schema op pagina 23.

Oplossing:

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

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

Link naar PDF: https://www.noordzeekanaalgebied.nl/uploads/Regioplan-Gebiedsinvesteringen-Netten-op-zee-DEF.pdf?_cchid=c3fe75fce2f66e3bc9b4725a7e789335

PDF-document heeft geen titel

Dit pdf-document heeft geen titel 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:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

Structuur van pdf-document is niet in codes vastgelegd

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.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat rode tekst (#BB5D86), zoals “1. INLEIDING”, op een witte achtergrond. De kleurcontrastverhouding is te laag: 4,2:1.

Zie ook paarse tekst (#A07EA1), zoals “1.1 AANLEIDING”, op een witte achtergrond. De kleurcontrastverhouding is te laag: 3,5:1.

Daarnaast staat er blauwe tekst (#4BABE3), zoals “2.1 AANLANDING NET OP ZEE”, op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,6:1.

Ook groene tekst (#B5C835), zoals “3.1 REGIONALE INVESTERINGSBEHOEFTEN EN -DOELSTELLINGEN”, op een witte achtergrond heeft een te laag contrast van 1,9:1. Zie ook andere kleurcombinaties in dit document.

Oplossing:

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

Kleurcontrast van grote tekst is te laag

In dit pdf-document staat blauwe tekst (#4BABE1) met het cijfer “2” op een lichtrode achtergrond (#FAF0F6). De kleurcontrastverhouding is te laag: 2,3:1.

Zie ook groene tekst (#AEC835) met het cijfer “3” op een witte achtergrond (#FEFEFE). De kleurcontrastverhouding is te laag: 1,9:1.

Daarnaast staat oranje tekst (#EAAC2A) met het cijfer “3” op een witte achtergrond (#FEFEFE). De kleurcontrastverhouding is te laag: 2,0:1.

Oplossing:

Omdat het hier om grote tekst gaat, moet de contrastverhouding minimaal 3,0:1 zijn.

Link naar pagina: https://www.noordzeekanaalgebied.nl/zoeken/

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

Op deze pagina verschijnt, na het invoeren van tekst in het zoekveld de ingevoerde tekst in het wit op een achtergrond die dynamisch verandert. Omdat de achtergrondkleur niet vast is, kan het contrast tussen de tekst en de achtergrond soms te laag zijn, waardoor de tekst moeilijk leesbaar wordt.

Bijvoorbeeld: witte tekst “test” op een blauwe achtergrond (#4EC1EE). De kleurcontrastverhouding is te laag: 2,1:1. Hetzelfde probleem doet zich voor bij het filter op deze pagina.

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

Bij het zoeken naar een woord en naar beneden scrollen, blijven filters zichtbaar en maken ze de tekst onleesbaar.

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, blijft tijdens het uitvoeren van een zoekopdracht (bijvoorbeeld zoeken naar “test”) en het naar beneden scrollen door de resultaten de filtersectie voor onderwerpen zichtbaar (vast op het scherm). Hierdoor overlapt deze sectie de zoekresultaten, waardoor een groot deel van de tekst onleesbaar wordt.

Oplossing:

Zorg ervoor dat het gedeelte met het vaste filters de andere content niet onleesbaar maken.

Link naar pagina: https://www.noordzeekanaalgebied.nl/nieuwsberichten/is-een-energyhub-het-energiesysteem-van-de-toekomst-we-zijn-met-elkaar-aan-het-pionieren/

IMG-elementen zonder alt-attribuut

Op deze pagina staan onder de koppen “Is een energyhub het energiesysteem van de toekomst? ‘We zijn met elkaar aan het pionieren’” en “Kans” informatieve afbeeldingen zonder alt-attribuut.

Er wordt nu de bestandsnaam voorgelezen.

Oplossing:

Voeg een alt-attribuut aan deze afbeeldingen. Laat het leeg om deze foto’s te verbergen voor hulpsoftware en voeg beschrijvende tekst toe.

Link heeft geen tekst, waardoor linkdoel onbekend is

Op deze pagina staan aan de linkerkant twee links met pijlen die geen inhoud hebben en daardoor geen herkenbaar doel voor de link bieden. 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.

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op deze pagina fungeren de afbeeldingen met pijlen onder het logo als links, maar omdat het tekstalternatief ontbreekt hebben deze links geen inhoud en daardoor geen bestemming. De afbeelding van een pijl is dus interactief, maar er is geen tekstalternatief aanwezig. Daardoor heeft de link geen inhoud, wat ook leidt tot een afkeuring op succescriteria 2.4.4 en 4.1.2.

Hetzelfde probleem doet zich voor op de pagina’s https://www.noordzeekanaalgebied.nl/nieuwsberichten/jtf-film-phoenix-metals-en-strohm/ en https://www.noordzeekanaalgebied.nl/nieuwsberichten/economische-cijfers-over-het-noordzeekanaalgebied-opgenomen-in-atlas-plabeka/.

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.

Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken

Wanneer de tekst op deze pagina wordt ingezoomd tot 200%, zijn de links met “Industrie” en “Persoonlijk interview” niet zichtbaar.

Oplossing:

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

Link naar pagina: https://www.noordzeekanaalgebied.nl/nieuwsberichten/jtf-film-phoenix-metals-en-strohm/

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina staat een video. Aan het einde van de video verschijnt een logo. Er is echter geen media-alternatief of audiobeschrijving beschikbaar. De video bevat visuele informatie (het logo) die niet toegankelijk is voor blinde gebruikers.

Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Hetzelfde probleem doet zich voor op de pagina https://www.noordzeekanaalgebied.nl/programmas/ruimte/ onder de kop “Ontwikkelperspectief NZKG”.

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

Op deze pagina is een YouTube-videospeler opgenomen 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).