Content-audit digitale toegankelijkheid van website noordholland.bestuurlijkeinformatie.nl
Samenvatting
Wij hebben de content van de website noordholland.bestuurlijkeinformatie.nl onderzocht tussen 21 en 23 augustus 2025. Op dit moment zijn 26 van de 33 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 7 nog fout gaat, en hoe je dat kunt verbeteren.
Resultaat
In dit onderzoek hebben we 33 van 55 toegankelijkheidseisen (succescriteria) uit de norm WCAG 2.2 onderzocht. Dit is een contentonderzoek. Daarom zijn de eisen die over de techniek gaan niet meegenomen. We hebben het onderzoek uitgevoerd volgens de onderzoeksmethode WCAG-EM.
Beoordeling van succescriteria
Voldoet of niet van toepassing: 26
Voldoet niet: 7
Totaal: 55 succescriteria
Deze succescriteria zijn afgekeurd: 1.1.1, 1.3.1, 1.4.1, 1.4.3, 2.4.2, 2.5.3, 3.1.1
De meest opvallende bevindingen
De link om het logo kan niet met stem worden bediend.
De blauwe kleur die op alle pagina's wordt gebruikt in combinatie met wit, voldoet niet aan de minimale eisen voor contrast.
Op verschillende pagina's zijn teksten die visueel koppen zijn, niet correct gemarkeerd met de juiste HTML-kop-elementen.
Alle pagina's op de website noordholland.bestuurlijkeinformatie.nl
Alle PDF's op de website noordholland.bestuurlijkeinformatie.nl
Niet de pagina's op het subdomein.website.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 139
Google Chrome, versie 139
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.
De link om het logo kan niet met stem worden bediend
Impact: MediumType: ContentWCAG: 1.1.1, 2.5.3
Bovenaan de pagina staat een logo met de tekst “Provincie Noord-Holland”. De alternatieve tekst is “Logo NoordHolland”. Deze tekst is niet voldoende beschrijvend (SC 1.1.1). Daarnaast is deze link niet met stem te bedienen (SC 2.5.3).
Het tekstalternatief van het logo geeft de link een toegankelijke naam. 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:
Pas de alt-tekst van het logo aan. 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.
Onvoldoende kleurcontrast
Impact: KleinType: ContentWCAG: 1.4.3
Op alle pagina’s wordt blauwe kleur gebruikt in combinatie met wit. Het kleurcontrast is 3,4:1. Dit moet minimaal 4,5:1.
Oplossing
Gebruik deze kleurencombinatie niet in tekst of maak de blauwe kleur donkerder. Gebruik CCA tool om contrast te testen. De instructie om deze tool te gebruiken vind je op deze pagina: Hoe test ik kleurcontrast?
Advies om kleurcontrast te verbeteren
Impact: KleinType: ContentWCAG: 1.4.3
Als een bezoeker de muis over de links in de tabel onder “Overzichten en documenten” beweegt, verandert de achtergrond van de tekst in rood terwijl de kleur van de tekst zwart blijft. De contrastratio wordt 4,5:1. Dit voldoet aan de eisen van WCAG, maar blijft moeilijk leesbaar. Om de leesbaarheid van deze tekst te vergroten raden we je aan om de kleur van tekst naar wit te veranderen.
Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "Statengriffie", "Inspreken bij een Statencommissie", en "Statenleden".
Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: Zo controleer je de koppenstructuur van je website.
Op deze pagina zijn de volgende teksten niet gemarkeerd als koppen: "Statenleden", "Duo-commissieleden", "Commissieleden Landelijk Gebied" en andere.
Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.
Oplossing:
Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.
Informatieve afbeelding is als achtergrondafbeelding geplaatst
Impact: MediumType: ContentWCAG: 1.1.1
Dit pdf-document bevat een logo toegevoegd 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 alt-tekst krijgen die de afbeelding duidelijk beschrijft.
Oplossing:
Voeg het logo toe met de Figure-tag en geef het een beschrijvende alt-tekst.
In een tabel voor lay-out zijn th-tags gebruikt
Impact: MediumType: ContentWCAG: 1.3.1
In dit pdf-document worden tags die bij een gegevenstabel horen gebruikt om tekst een kolomindeling te geven. Een gegevenstabel mag in deze situatie niet worden gebruikt.
Er zijn dus tags gebruikt die alleen bedoeld zijn voor een datatabel, namelijk th-tags. Deze mogen niet aanwezig zijn in een lay-outtabel. Dit kan verwarrend zijn voor blinde bezoekers, omdat deze tags het idee geven dat er een relatie is tussen de informatie in de verschillende cellen van de tabel, terwijl dit niet zo is.
Oplossing:
Verwijder de th-tags.
Koppen zijn niet als kop gemarkeerd
Impact: MediumType: ContentWCAG: 1.3.1
In dit pdf-document zijn verschillende koppen niet gemarkeerd als koppen. Zie "Advies aan Provinciale Staten", "Onderwerp: Voordracht Subsidievaststelling fractiebijdragen 2023-2024".
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.
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:
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.
De taal is niet ingesteld in de metadata
Impact: MediumType: ContentWCAG: 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: GrootType: ContentWCAG: 1.3.1
In dit pdf-document ontbreken 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.
Alleen kleur gebruikt in legenda bij grafiek
Impact: MediumType: ContentWCAG: 1.4.1
In dit pdf-document staan op pagina 477-479 grafieken. Kleur wordt gebruikt om informatie 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 of voeg datalabels toe.
Kleurcontrast van kleine tekst is te laag
Impact: MediumType: ContentWCAG: 1.4.3
In dit PDF-document worden kleurcombinaties gebruikt die niet voldoen aan de minimale contrastwaarden: voor tekst tot 24 px of vet minimaal 4,5:1 en voor grotere tekst vanaf 24 px of vet minimaal 3,0:1. Zie bijvoorbeeld op pagina’s 269-278 de combinatie groen (#89BE36) met wit; op pagina’s 430-451 de combinaties van verschillende blauwtinten (#00B3E6, #67CFF3, #39BDF0 en andere) met wit; en op pagina’s 453-472 de combinatie oranje (#F79647) met wit.
Oplossing:
Zorg ervoor dat het contrast minstens 4,5:1 is voor normale tekst en minstens 3,5:1 voor grote tekst. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.
Op deze pagina wordt onder het kopje "maandag 10 maart 2025" naast "Toelichting" het em-element gebruikt voor stylingdoeleinden.
Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).
Oplossing:
Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.
Opsomming is niet opgebouwd met het HTML-element ul of ol
Impact: MediumType: ContentWCAG: 1.3.1
Op deze pagina, onder het kopje "maandag 10 maart 2025", naast "Toelichting", is een lijst met 4 items aanwezig, maar deze heeft niet de juiste merkering.
Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.
Oplossing:
Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd. Gebruik de juiste knop in de tekstbewerker om lijsten correct op te maken. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.
Op deze pagina is de tekst "Nevenfuncties" onjuist gemarkeerd met hetstrong-element in plaats van met het juiste heading-element.
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.
strong-element is gebruikt voor opmaak
Impact: KleinType: ContentWCAG: 1.3.1
Op deze pagina, onder de kop "Boer, Aletta den", is de link "Recente bijdragen en stemmingen" opgenomen in het strong-element.
Het strong-element heeft een semantische waarde: het geeft een nadruk 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).
Oplossing:
Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.
Voldoet of niet van toepassing: 26
Voldoet niet: 7
