Audit digitale toegankelijkheid van website biografienzkg.nl
Samenvatting
Wij hebben de website biografienzkg.nl onderzocht tussen 1 en 5 november 2025. Op dit moment zijn 34 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 21 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we alle 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Toetsenbordfocus en navigatieproblemen: Er zijn meerdere problemen met de toetsenbordfocus, zoals de cookiebanner die niet als eerste focus krijgt, onzichtbare toetsenbordfocus op verschillende elementen, en de focus die buiten mobiele menu's en dialoogvensters kan ontsnappen. Dit belemmert gebruikers die met het toetsenbord navigeren aanzienlijk.
Onvoldoende kleurcontrast: Op veel plaatsen op de website is het kleurcontrast van tekst en interactieve elementen te laag, wat problemen oplevert voor bezoekers met visuele beperkingen of kleurenblindheid. Dit geldt voor teksten in de cookiebanner, knoppen, menu-opties in de footer en fotobijschriften.
Ontbrekende of onvoldoende tekstalternatieven en rollen: Logo's en interactieve afbeeldingen missen vaak een correct tekstalternatief (alt-attribuut), en knoppen en secties met verborgen inhoud hebben geen correcte toegankelijke rol of naam. Dit maakt de website minder toegankelijk voor gebruikers van schermlezers.
Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid).
Kaarten en kaartapplicaties.
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.
Cookiebanner krijgt niet als eerste toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt de inhoud van de pagina, en als de toetsenbordfocus daar niet eerst naartoe gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten. Om deze banner te sluiten, moet de bezoeker helemaal naar de onderkant van de pagina tabben.
Oplossing:
Zorg dat de focus als eerste naar de cookiebanner gaat.
Logo heeft geen tekstalternatief (alt-attribuut ontbreekt)
Impact: GrootType: TechniekWCAG: 1.1.1EN: 9.1.1.1
Wanneer een bezoeker de website voor het eerst opent, verschijnt er een cookiebanner. In de cookiebanner ontbreekt bij het logo “Google”, dat is toegevoegd met een img-element, het alt-attribuut.
Informatieve afbeeldingen zoals een logo moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat.
Oplossing:
Voeg een alt-tekst toe die de volledige tekst van het logo bevat.
Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op de hele website wordt de combinatie van groen (#65BD7D) en wit gebruikt. De contrastratio is onvoldoende: 2,3:1. Enkele voorbeelden hiervan zijn, maar dit is geen volledige lijst:
de knop “OK” in de cookiebanner,
de link “privacy statement” in de cookiebanner wanneer deze in hovertoestand is,
Een andere combinatie met een te lage contrastratio die op de hele website wordt gebruikt, is blauw (#198FD9) en wit. De contrastratio is te laag voor kleine teksten: 3,5:1. Enkele voorbeelden hiervan zijn, maar dit is geen volledige lijst:
de link “privacy statement” in de cookiebanner,
de knop “OK” in de cookiebanner in hover- en focustoestand,
de links "Programmabureau Noordzeekanaalgebied", “MOOI Noord-Holland”, “Uw privacy op deze website” en “NHWS” in de footer wanneer ze in hovertoestand zijn,
de knoppen “Lees verder” en “Bekijk de video” op pagina https://biografienzkg.nl/ wanneer ze in hovertoestand zijn,
de opmerkingen met het symbool van asterisk wanneer ze in hovertoestand zijn op pagina https://biografienzkg.nl/ en andere pagina’s,
Voor tekst met een lettergrootte tot 24 px of vetgedrukt moet de contrastratio minimaal 4,5:1 zijn, en voor grote tekst vanaf 24 px of vetgedrukt minimaal 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Alleen kleurverschil bij toetsenbordfocus, met te laag contrast
In de cookiebanner is bij de aangepaste toetsenbordfocus op de link “OK” alleen een verandering van groene naar blauwe achtergrond zichtbaar.
Het gebruik van alleen kleur om focus aan te geven is hier echter niet voldoende. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.
Hetzelfde probleem doet zich voor op de pagina https://biografienzkg.nl/ bij de knoppen “Lees verder” en “Bekijk de video” wanneer ze in hovertoestand zijn.
Oplossing:
Je kunt hiervoor het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.
Op alle pagina’s van de website verwijst de skiplink niet naar de unieke inhoud op de pagina. Bijvoorbeeld, op pagina https://biografienzkg.nl/ verwijst deze naar de tekst “Beeld Houtrakpolder. Theo Baart”, maar er staat extra unieke inhoud boven deze bestemming (kop, tekst, knoppen, video).
De skiplink moet verwijzen naar het begin van de unieke inhoud op de pagina, zodat een bezoeker alle herhalende of niet-essentiële content kan overslaan.
Oplossing:
Zorg dat de skiplink verwijst naar het juiste startpunt van de unieke content op de pagina.
Toetsenbordfocus is niet zichtbaar
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op alle pagina’s van de website is de toetsenbordfocus niet zichtbaar op de volgende elementen: de hoofdmenu-opties in de footer en de knop met een pijltje omhoog in de footer (“Ga naar de bovenkant”).
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.
Op alle pagina’s van de website heeft het hoofdnavigatielandmark (in de footer) het attribuut aria-label="Desktop". Dit label beschrijft deze sectie van de pagina niet correct. Bezoekers die hulpsoftware gebruiken horen een niet veelzeggende tekst, die hen niet helpt de paginastructuur te begrijpen of te navigeren.
Oplossing:
Voorzie het navigatiegebied van een beschrijvend, doelgericht label, bijvoorbeeld “Hoofdnavigatie” of “Footernavigatie”.
Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)
Op alle pagina’s van de website staat in de footer een kleurrijk menu. Bijna alle opties in dit menu hebben een onvoldoende contrastratio. Bijvoorbeeld, witte tekst “De basis: het natuurlijk landschap” op een groene (#71B200) achtergrond heeft een ratio van 2,6:1, witte tekst “De omgang met water” op een blauwe (#00ADE6) achtergrond heeft ook een ratio van 2,6:1. Controleer andere menu-opties.
Oplossing:
Zorg ervoor dat alle teksten in het menu een kleurcontrastverhouding van minimaal 4,5:1 hebben. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Link bestaat uit een afbeelding, linkdoel is onbekend
Op alle pagina’s van de website staan in de footer iconen van een huis, een envelop en een pdf-document. De afbeeldingen functioneren als links, maar ze zijn met CSS verborgen en hebben geen tekstalternatieven. Hierdoor zijn de links niet toegankelijk.
Interactieve afbeeldingen hebben een beschrijvend tekstalternatief nodig dat het doel en de bestemming van de link weergeeft. Zonder dit weten bezoekers die de afbeeldingen niet kunnen zien (inclusief mensen die schermlezers gebruiken) niet waar de links naartoe leiden. Dit is ook in strijd met WCAG-succescriteria 2.4.4 en 4.1.2.
Hetzelfde probleem doet zich voor bij de menuknop (knop met drie horizontale lijnen) die in het Footer-menu wordt weergegeven wanneer de website op een klein scherm wordt bekeken, en bij de knop “x” om dit mobiele menu te sluiten.
Oplossing:
Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen:
Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).
aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link.
Er is maar één manier om een webpagina te vinden
Impact: GrootType: TechniekWCAG: 2.4.5EN: 9.2.4.5
Er is geen tweede manier om de pagina's van deze website te vinden.
Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dat mag via een zoekveld, een sitemap of een inhoudsopgave.
Oplossing:
Zorg dat de webpagina’s op meerdere manieren bereikbaar zijn.
Toetsenbordfocus gaat buiten het mobiele menu terwijl het menu open blijft staan
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Wanneer de pagina wordt ingezoomd, verschijnt in de footer een menuknop waarmee het mobiele menu wordt geopend. 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.
Oplossing:
Bij dit soort menu’s moet je de de toetsenbordfocus goed instellen. Als het menu actief is, moet de focus binnen het menu blijven, en mag deze niet op de onderliggende pagina terechtkomen.
Dit kun je op een van de volgende manieren oplossen:
Hou de focus binnen het menu totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
Sluit het menu automatisch op het moment dat de toetsenbordfocus eruit gaat.
Op een klein scherm verschijnt een menuknop in de footer om het mobiele navigatiemenu te openen. De knop geeft geen informatie over de status van het menu (open of gesloten) aan bezoekers die het niet kunnen zien, zoals gebruikers van schermlezers.
Oplossing:
Voeg bijvoorbeeld een tekstuele uitleg toe (ingeklapt/uitgeklapt) die je voor ziende bezoekers met CSS verbergt. Of gebruik het aria-expanded-attribuut op de link van het mobiele menu. Dit attribuut moet de waarde "true" krijgen als het menu getoond wordt, en “false" als het menu verborgen is.
Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen
Impact: GrootType: TechniekWCAG: 1.4.4EN: 9.1.4.4
Wanneer deze website wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 200%, zijn de volgende opties in de footer slechts gedeeltelijk zichtbaar: “Ontspanningslandschap: recreatie en welzijn” en “Omgangsvormen”.
Oplossing:
Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.
Bezoekers die inzoomen tot 400% kunnen niet meer alle functies gebruiken
Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, en het mobiele menu wordt geopend, zijn de eerste opties in het menu, zoals “De basis: het natuurlijk landschap”, “De omgang met water”, “Netwerken” en enkele andere, niet zichtbaar en niet te bedienen.
Oplossing:
Zorg dat alles nog werkt als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.
Informatie is niet meer leesbaar als tekstafstand wordt aangepast
Op deze pagina overlapt de kop “Het Noordzeekanaalgebied Landschap van contrasten” de tekst eronder wanneer bezoekers tekstafstanden toepassen zoals beschreven in dit succescriterium, waardoor deze gedeeltelijk onzichtbaar en onleesbaar wordt.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
Oplossing:
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Op deze pagina verwijst de skiplink naar de tekst “Beeld Houtrakpolder. Theo Baart”, maar er staat extra unieke inhoud boven deze tekst.
De skiplink moet verwijzen naar het begin van de unieke inhoud op de pagina, zodat een bezoeker alle herhalende of niet-essentiële content kan overslaan.
Oplossing:
Zorg dat de skiplink verwijst naar het juiste startpunt van de unieke content op de pagina.
Knoppen hebben geen correcte toegankelijke rol en naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Op deze pagina hebben de knoppen “Lees verder”, “Bekijk de video” en de knop met een driehoek “Afspelen” geen correcte toegankelijke rol en geen naam. Elk HTML-element heeft een standaardrol die het doel en het gedrag ervan bepaalt. Schermlezers en andere hulpsoftware vertrouwen op deze rollen om elementen te begrijpen en ermee te kunnen werken.
Oplossing:
Zorg ervoor dat deze knoppen de juiste rol hebben door één van de volgende opties te gebruiken:
Gebruik het button-element: dit zorgt automatisch voor de juiste rol van een knop.
Of voeg role="button" toe: als een ander element voor de knoppen wordt gebruikt (wat over het algemeen niet wordt aanbevolen), voeg dan het attribuut role="button" toe om de rol expliciet te definiëren.
Deze oplossingen zorgen ervoor dat de knop ook met het toetsenbord te bedienen is.
De toegankelijke naam kan met een aria-label worden gegeven.
De knoppen zijn niet via het toetsenbord toegankelijk.
Op deze pagina zijn de knoppen “Lees verder”, “Bekijk de video” en de knop met een driehoek “Afspelen” niet via het toetsenbord toegankelijk en niet te bedienen.
Oplossing:
Zie oplossing bij de vorige bevinding.
Video heeft geen ondertiteling
Impact: MediumType: ContentWCAG: 1.2.2EN: 9.1.2.2
Op deze pagina staat een video met gesproken tekst, maar ondertitels ontbreken.
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.
Secties met verborgen inhoud hebben geen correcte rol of toestand en zijn niet via het toetsenbord toegankelijk
Op deze pagina staan opmerkingen, woorden gemarkeerd met het symbool van een asterisk, die extra informatie openen. Bijvoorbeeld de woorden “contrastrijke”, “zes thema's” en andere. Het element dat de verborgen inhoud opent heeft niet de juiste rol (“button”). Bovendien is de open- of dichttoestand wel visueel zichtbaar, maar wordt deze niet programmatisch doorgegeven aan schermlezers. Deze elementen kunnen ook niet met het toetsenbord worden geopend of gesloten.
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.
Geef de elementen die extra inhoud openen en sluiten de juiste rol. Voeg daarnaast het attribuut “aria-expanded” toe aan deze knoppen of voeg visueel verborgen tekst toe die de toestand van de sectie aangeeft. Zorg dat de elementen met het toetsenbord toegankelijk zijn.
Kleurcontrast van linktekst is te laag (tekst kleiner dan 19px)
Op deze pagina staat onder de afbeelding grijze (#A1A2A4) tekst “Beeld Houtrakpolder. Theo Baart” op een witte achtergrond. De contrastratio is te laag: 2,6:1.
Verander de tekstkleur zodat de contrastverhouding minimaal 4,5:1 is.
Elementen die toetsenbordfocus krijgen vallen onder sticky footer
Impact: GrootType: TechniekWCAG: 2.4.11
Op deze pagina, wanneer een bezoeker navigeert met het toetsenbord, bedekt een sticky footer een deel van de paginacontent. Hoewel interactieve elementen zoals de links "Programmabureau Noordzeekanaalgebied", "Uw privacy op deze website", "NHWS" nog steeds toetsenbordfocus ontvangen, is de focusindicator verborgen achter de sticky footer. Dit gebeurt ook met andere interactieve elementen op andere pagina's.
Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.
Oplossing:
Zorg ervoor dat de sticky footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen of elementen herpositioneren.
Bovenaan deze pagina staan drie logo’s. Ze hebben lege alt-teksten. De titels die ze bevatten zouden als toegankelijk alternatief kunnen dienen, maar ze geven niet de volledige zichtbare tekst weer. Bijvoorbeeld, voor het logo “MOOI NOORD-HOLLAND adviseurs omgevingskwaliteit” is de titel “logo-mooinh-fc-260”.
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:
Voeg voor elke afbeelding een waarde toe aan het alt-attribuut of pas het title-element aan zodat het de volledige tekst van de logo’s bevat.
strong-element in plaats van kop-element
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina zijn de volgende teksten onjuist gemarkeerd met strong in plaats van met de juiste kop-elementen: “Deze website is gemaakt door”, “Ambtelijke begeleidingsgroep met vertegenwoordigers van de gemeenten” en drie 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.
Hetzelfde probleem doet zich voor op pagina https://biografienzkg.nl/omgangsvormen/ bij de koppen binnen de accordeons, bijvoorbeeld “Maak water en bodem sturend”, “Breng water terug” en andere binnen de accordeon “1. Het landschap voorbereiden op de gevolgen van klimaatverandering”, en op pagina https://biografienzkg.nl/privacy/ bij alle koppen.
Oplossing:
Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals h2 of h3.
Op deze pagina staat onder de kop “Begin 21ste eeuw” grijze (#B8B8B9) tekst “Begin 21ste eeuw wordt op een aantal plaatsen het waterpeil opgezet om bodemdaling te remmen en veen te laten groeien” op een witte achtergrond. De contrastratio is 2,0:1. Hetzelfde probleem doet zich voor bij vergelijkbare teksten onder andere koppen op de pagina.
Oplossing:
Verander de tekstkleur zodat de contrastverhouding minimaal 4,5:1 is.
(Advies) Meerdere lege koppen worden gebruikt op de pagina
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staat boven elke zichtbare kop van niveau 2 (bijvoorbeeld “Begin 21ste eeuw”) een kop van niveau 1 die alleen een spatie als tekst bevat. Sommige bezoekers, vooral toetsenbord- en schermlezergebruikers, navigeren vaak via kop-elementen. Een lege kop geeft geen informatie en kan verwarring veroorzaken.
Oplossing:
Zorg dat alle koppen informatieve inhoud bevatten of verwijder onnodige h1-elementen.
In dit PDF-document staan onnodige Figure-tags zonder beschrijving. Zie pagina’s 1, 4, 7 en andere. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.
Oplossing:
Markeer deze afbeeldingen als artefacten, zodat ze worden verborgen voor schermlezers.
Koppen zijn niet als kop gemarkeerd
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
In dit PDF-document staan verschillende koppen die niet als koppen zijn gemarkeerd. Zie bijvoorbeeld “Het Noordzeekanaalgebied Landschap van contrasten 2023” op pagina 1, “Inhoud” op pagina 2, “Gezonde lucht” op pagina 52 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.
Lijst is niet als lijst gemarkeerd
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
In dit PDF-document staat op pagina’s 12 en 13 een lijst met vier items. De juiste markering ontbreekt.
Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen.
Hetzelfde probleem doet zich voor bij lijsten op andere pagina's: 13, 20, 21, 29 en andere.
Oplossing:
Markeer de lijst met een L- en Li-tags.
Informatieve afbeeldingen hebben automatisch gegenereerde beschrijvingen
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
In dit PDF-document staan informatieve afbeeldingen die zijn toegevoegd met een Figure-tag en automatisch gegenereerde beschrijvingen hebben. Zie bijvoorbeeld de afbeelding op pagina 14 met de beschrijving “Afbeelding met kaart, tekst, atlas Automatisch gegenereerde beschrijving”, de afbeeldingen op pagina’s 30, 41 en 57 met dezelfde beschrijving en de logo’s op pagina 68.
Deze tekst geeft geen duidelijke informatie over wat op de afbeelding staat. Hierdoor weten bezoekers die het document laten voorlezen niet wat op de afbeelding te zien is. Zij missen zo dus informatie.
Oplossing:
Voeg beschrijvende alternatieve teksten toe aan deze informatieve afbeeldingen.
Informatieve afbeeldingen hebben geen alt-tekst
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
In dit PDF-document staan informatieve afbeeldingen zonder tekstalternatieven (alt-tekst). Dit komt voor op pagina’s 21 en 41.
Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alternatieve tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.
Oplossing:
Voeg tekst alternatief toe aan deze informatieve afbeeldingen.
Voetnoten missen de juiste tags
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
In dit PDF-document staan op veel pagina’s opmerkingen en voetnoten zonder de vereiste Reference- en/of Note-tags.
Omdat deze tags ontbreken kan voorleessoftware niet goed herkennen welke voetnoot bij welke verwijzing in de tekst hoort. Dit kan verwarrend zijn voor iemand die afhankelijk is van schermlezers, omdat de voetnoten dan als losse tekst worden voorgelezen zonder duidelijke koppeling aan de juiste plek in de hoofdtekst.
In dit PDF-document is geen titel ingesteld in de bestandseigenschappen.
Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.
Los het op in Adobe Acrobat:
Open het pdf-document in Adobe Acrobat.
Ga naar Bestand > Eigenschappen.
Ga naar het tabblad Beschrijving.
Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld:
"Rapport: Bevolkingscijfers 2023".
Klik op OK en sla het bestand op.
Informatieve afbeelding toegevoegd via figure-tag mist tekstalternatief
Impact: MediumType: ContentWCAG: 1.1.1EN: 9.1.1.1
In dit PDF-document staat een informatieve afbeelding (kaart) zonder tekstalternatief (alt-tekst). Afbeeldingen die zijn getagd als figure moeten altijd een beschrijving (alt-tekst) bevatten, omdat deze tag is bedoeld voor informatieve afbeeldingen. Zonder alt-tekst kunnen schermlezers de inhoud van de afbeelding niet overbrengen aan gebruikers. Op dit moment wordt alleen “afbeelding” aangekondigd, wat visueel beperkte gebruikers ten onrechte kan laten denken dat ze belangrijke informatie missen.
Oplossing:
Voeg een tekstalternatief toe aan deze informatieve afbeelding.
Kleurcontrast van kleine tekst is te laag
Impact: MediumType: ContentWCAG: 1.4.3EN: 9.1.4.3
In dit PDF-document staan rode (#E83442) koppen “Karakteristieke plekken en structuren” en “Informatieve kaartlagen” op een witte achtergrond. De contrastratio is te laag: 4,2:1.
Oplossing:
Omdat deze teksten kleiner zijn dan 18 pt, moet ervoor worden gezorgd dat ze een minimale contrastratio van 4,5:1 hebben.
Op deze pagina staat een groene (#71B200) knop met drie witte horizontale lijnen die een zijbalknavigatiemenu opent met witte tekst op dezelfde achtergrond. De contrastratio tussen de twee kleuren is te laag: 2,6:1. The same is with the “x”-knop binnen dit menu.
Op deze pagina staan voetnoten in de tekst. De voetnootlinks bevatten niet genoeg informatie om het doel van de link duidelijk te maken. Op dit moment hebben de links teksten zoals “1”, “2”, “3” enzovoort. Voor ziende bezoekers is duidelijk dat dit voetnootnummers zijn, maar bezoekers met een visuele beperking of gebruikers van schermlezers begrijpen mogelijk niet dat deze links verwijzen naar een ander deel van de pagina met extra informatie. Om het doel van deze links voor alle bezoekers duidelijk te maken, moeten de toegankelijke namen van deze links worden uitgebreid.
Voorzie de voetnootlinks van een meer beschrijvende naam, bijvoorbeeld “Voetnoot 1”.
Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam
Impact: GrootType: TechniekWCAG: 4.1.2EN: 9.4.1.2
Meerdere afbeeldingen op deze pagina zijn klikbaar en openen een dialoogvenster met een vergrote weergave. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam.
Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.
Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".
Toetsenbord focus gaat buiten het dialoogvenster
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Op deze pagina openen meerdere afbeeldingen een dialoogvenster. Op dit moment kan de toetsenbordfocus uit het geopende dialoogvenster ontsnappen 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 lost dit op door de focus binnen het venster te houden totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt. Je kunt er ook voor kiezen om het venster automatisch te sluiten op het moment dat de focus eruit gaat.
Knoppen zijn niet toegankelijk met het toetsenbord
Meerdere afbeeldingen op deze pagina zijn klikbaar en openen een dialoogvenster met een vergrote weergave. Navigatie-elementen in het dialoogvenster zijn niet met het toetsenbord toegankelijk: knoppen met een x-icoon, volledigschermicoon, diavoorstellingsicoon, knoppen met pijltjes (“Vorige” en “Volgende”) en klikbare afbeeldingen.
Alle interactieve elementen moeten met het toetsenbord toegankelijk zijn.
Toegankelijke namen zijn in het Engels
Impact: MediumType: CodeWCAG: 3.1.2EN: 9.3.1.2
Meerdere afbeeldingen op deze pagina zijn klikbaar en openen een dialoogvenster met een vergrote weergave. In dit dialoogvenster hebben de knoppen met een x-icoon, volledigschermicoon en diavoorstellingsicoon Engelse titels: “Press Esc to close”, “Enter Fullscreen (Shift+Enter)” en “Slideshow”. Schermlezers spreken deze Engelse labels uit volgens de uitspraakregels van de hoofdtaal van de pagina, die in dit geval Nederlands is. Dit kan leiden tot verkeerde uitspraak en maakt de labels moeilijk te begrijpen.
Meerdere afbeeldingen op deze pagina zijn klikbaar en openen een dialoogvenster met een vergrote weergave. In dit dialoogvenster hebben de knoppen “Vorige” en “Volgende” grijze (#A1A1A1) pijltjesiconen op een witte (#F6F7F6) achtergrond. De contrastratio tussen de twee kleuren is te laag: 2,4:1.
Zorg dat de contrastratio minimaal 3,0:1 is voor informatieve elementen.
Tekst is als afbeelding geplaatst
Impact: MediumType: ContentWCAG: 1.4.5EN: 9.1.4.5
Op deze pagina staat boven de kop “Geschikt voor permanente bewoning” een afbeelding met ingesloten tekst, bijvoorbeeld de tekst “Vroege historie 250 v.Chr. - 900 n.Chr.” en “De kust is verzand. Het Oer-IJ watert af naar het oosten.”.
Als je een tekst als afbeelding plaatst, kunnen veel bezoekers er niets meer mee. Dit komt doordat ze de tekst in de afbeelding niet kunnen vergroten of aanpassen.
Oplossing:
Het is beter om deze tekst gewoon als normale tekst op de pagina te plaatsen. Op die manier kunnen mensen de grootte, kleur of het lettertype aanpassen zodat het voor hen leesbaarder wordt. Als de tekst in de afbeelding zit gebakken, kunnen ze dit niet doen.
Informatie is niet meer leesbaar als tekstafstand wordt aangepast
Op deze pagina wordt het einde van de tekst onder de afbeelding van de Stompe Toren “De Stompe Toren in Spaarnwoude ligt hoger dan de omgeving. Foto Joost J. Bakker, Flickr” gedeeltelijk onzichtbaar en onleesbaar wanneer bezoekers tekstafstanden toepassen zoals beschreven in dit succescriterium.
Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.
Hetzelfde probleem doet zich voor op pagina https://biografienzkg.nl/netwerken/ bij de fotobijschriften die beginnen met “Diverse varianten van het Noordzeekanaal…” en “De zeesluizen van het Noordzeekanaal…”, op pagina https://biografienzkg.nl/economie-en-nederzettingen/ bij de fotobijschriften die beginnen met “Kaart van het geplande Havengebied…”, “Het Westelijk Havengebied…” en op andere pagina’s van de website.
Oplossing:
Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.
Voldoet of niet van toepassing: 34
Voldoet niet: 21
