Audit digitale toegankelijkheid van website instrumentbetaalbarevoorraad.nl/zuid-holland
Samenvatting
Wij hebben de pagina's van provincie Zuid-Holland op de website www.instrumentbetaalbarevoorraad.nl onderzocht tussen 21 en 24 augustus 2026. Op dit moment is een deel van de succescriteria als voldoende beoordeeld. In dit rapport lees je welke punten nog verbetering behoeven en hoe deze kunnen worden aangepakt.
Bovenaan de pagina's staat het logo, dat ook een link is. Bij die link staat geen tekst die de bestemming beschrijft. De afbeelding van het logo heeft geen betekenisvolle alt-tekst, dus bezoekers met een schermlezer horen niet wat er staat en waar de link heen gaat. Bezoekers die de website met hun stem bedienen, kunnen de link niet activeren door de zichtbare tekst uit te spreken, want de toegankelijke naam komt niet overeen met wat er te zien is.
User story
Ik lees de website met een schermlezer. Als ik bovenaan de pagina bij het logo kom, dan hoor ik alleen "link" en verder niets. Ik verwacht dat mijn schermlezer vertelt waar de link heen gaat, bijvoorbeeld "provincie Zuid-Holland, ga naar de startpagina".
Hoe te testen
Gebruik in onze WCAG Radar de optie "Namen van links en knoppen". Die laat de toegankelijke naam van elke link en knop op de pagina zien. Controleer of de naam de bestemming van de link uitlegt en of hij overeenkomt met de tekst die je ziet staan.
Oplossing
Er zijn drie manieren om de bestemming toe te voegen:
geef de afbeelding een alt-tekst die de bestemming van de link beschrijft;
zet op het a-element een aria-label met een korte beschrijving van de bestemming;
zet beschrijvende tekst binnen het a-element en verberg die met CSS voor het oog, zodat een schermlezer hem wel voorleest.
De tekst moet overeenkomen met de zichtbare tekst in het logo, zodat bezoekers die hun stem gebruiken de link kunnen activeren door die tekst uit te spreken.
#2 - Links met dezelfde tekst gaan naar verschillende bestemmingen
Ik lees de website met een schermlezer. Als ik door een lijst met links ga, dan hoor ik twee keer dezelfde linktekst en kom ik toch op verschillende pagina's terecht. Ik verwacht dat elke linktekst beschrijft waar de link heen gaat.
Hoe te testen
Open de lijst met links in onze WCAG Radar met de optie "Links" en de optie "Toegankelijke naam". Zoek links met dezelfde tekst die naar een andere bestemming gaan.
Oplossing
Zorg dat links met dezelfde tekst ook naar dezelfde URL gaan. Gaat de link ergens anders heen, geef hem dan een andere tekst.
Bovenaan de pagina's staan de rode teksten "Home", "Onze aanpak", "Instrumenten" en "Contact" met kleurcode #d11f3d op een grijze achtergrond met kleurcode #b7b4b4. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen. Controleer het contrast ook als de muis op de link staat en als de link toetsenbordfocus heeft.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
#4 - Rand van het zoekveld heeft te weinig contrast
In de header staat een zoekveld. De rand daarvan verschilt te weinig van de witte achtergrond van de pagina. Bezoekers die het veld niet zien staan, kunnen het ook niet gebruiken.
User story
Ik heb een visuele beperking. Als ik een invoerveld wil invullen, dan zie ik de rand niet goed, want die verschilt nauwelijks van de achtergrond. Ik verwacht dat ik de rand van elk formulierveld duidelijk kan zien.
Hoe te testen
Meet het contrast tussen het element en de achtergrond ernaast met de Colour Contrast Analyser. Het minimum is 3,0:1. Je kunt ook onze WCAG Radar openen en de optie "Contrast" gebruiken.
Oplossing
Pas de kleur van de rand aan, zodat de contrastverhouding met de achtergrond ernaast minimaal 3,0:1 is. Dit geldt voor invoervelden, selectievakjes en keuzerondjes. Controleer de nieuwe kleur met een contrasttool.
#5 - Toegankelijke namen zijn Engels en beschrijven de bestemming niet
Onderaan de pagina's staan links met een Engelse toegankelijke naam. De afbeelding van het boek is een link met de naam "Book-open", de afbeelding van de koffer een link met de naam "Suitcase" en de afbeelding van de ketting een link met de naam "Link". Een schermlezer spreekt deze Engelse woorden uit volgens de uitspraakregels van het Nederlands, want dat is de taal van de pagina. Daardoor zijn ze moeilijk te verstaan. De namen beschrijven bovendien het pictogram en niet de bestemming, dus bezoekers met een schermlezer horen niet waar de links heen gaan.
User story
Ik lees de website met een schermlezer. Als ik bij deze links kom, dan spreekt mijn schermlezer de namen met Nederlandse klanken uit en versta ik niet wat de links doen. Ik hoor ook niet waar ze heen gaan. Ik verwacht bij elke link een duidelijke naam in de juiste taal, die de bestemming beschrijft.
Hoe te testen
Open de lijst met links in onze WCAG Radar met de optie "Links" en de optie "Toegankelijke naam". Controleer of de namen in de taal van de pagina staan en of ze beschrijven waar de link heen gaat.
Oplossing
Vervang de toegankelijke namen van deze links door een Nederlandse beschrijving van de bestemming.
#6 - Onzichtbaar element krijgt toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Op deze pagina's komt de toetsenbordfocus na de link met het pictogram van de ketting op een onzichtbaar element terecht dat je wel kunt bedienen. Onzichtbare elementen horen niet in de focusvolgorde te staan. Bezoekers die met het toetsenbord navigeren raken de focus uit het oog en kunnen per ongeluk iets activeren.
User story
Ik bedien de website met het toetsenbord. Als ik met de Tab-toets door de pagina ga, dan komt de focus soms op elementen die ik niet zie. Ik verwacht dat de focus alleen op zichtbare elementen staat.
Hoe te testen
Ga met de Tab-toets door de pagina. De focusindicator hoort nooit te verdwijnen op een element dat onzichtbaar is of buiten beeld staat. Verdwijnt de indicator terwijl je verder tabt, dan krijgt een verborgen element focus. Zoek in de DOM naar elementen die verborgen zijn en toch focus kunnen krijgen.
Oplossing
Zorg dat alleen zichtbare interactieve elementen focus kunnen krijgen en dat de focusvolgorde logisch loopt.
Op deze pagina staat een knop met een vergrootglas. Als die knop toetsenbordfocus krijgt, verschilt het pictogram te weinig van de achtergrond: de contrastverhouding is dan 2,9:1. De knop heeft namelijk een eigen focusstijl. Bezoekers met een visuele beperking of met een kleurzienstoornis zien daardoor moeilijk of niet waar de focus staat.
User story
Ik kan kleuren slecht onderscheiden. Als ik door de pagina ga, dan zie ik niet goed welk element focus heeft. Ik verwacht dat ik de focus aan meer zie dan alleen een kleurverschil.
Hoe te testen
Meet het contrast tussen het element en de achtergrond ernaast met de Colour Contrast Analyser. Het minimum is 3,0:1. Je kunt ook onze WCAG Radar openen en de optie "Contrast" gebruiken.
Oplossing
Geef het pictogram een contrastverhouding van minimaal 3,0:1 met de achtergrond. Maak de focus daarnaast op een tweede manier zichtbaar, dus niet alleen met een kleurverschil. Dat kan met een dikkere rand, een onderstreping of een andere achtergrond. Je kunt ook de standaard focusindicator van de browser terugzetten. Zo zien alle bezoekers waar de focus staat.
Op deze pagina staat de rode tekst "Instrumentenkoffer" met kleurcode #D11F3D op een blauwe achtergrond met kleurcode #131040. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen.
Zie ook:
de rode teksten "ons" en "Status toegankelijkheidslabel van Instrument betaalbare voorraad" met kleurcode #D11F3D op een zwarte achtergrond met kleurcode #2E2E35 op deze pagina; de contrastverhouding is 3,0:1;
Deze teksten zijn ook links. Als de muis erop staat, haalt de tekst de minimale contrastverhouding van 4,5:1 evenmin.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
#9 - Links verschillen alleen in kleur van de tekst eromheen
Op deze pagina staan links in de lopende tekst, bijvoorbeeld "Instrumentenkoffer". Kleur is het enige verschil tussen de link en de tekst eromheen. Bezoekers met een visuele beperking of met een kleurzienstoornis zien daardoor niet welke woorden een link zijn.
Ik kan kleuren slecht onderscheiden. Als ik een tekst met links lees, dan zie ik niet welke woorden aanklikbaar zijn. Ik verwacht dat links ook een onderstreping of een ander verschil hebben.
Hoe te testen
Bekijk de pagina in grijstinten: open onze WCAG Radar en zet de optie "Grijstinten" aan. Controleer of de links in de lopende tekst dan nog opvallen.
Oplossing
Geef links in lopende tekst een tweede kenmerk naast kleur, bijvoorbeeld een onderstreping, een pictogram of een patroon. Je kunt ook zorgen dat de contrastverhouding tussen de kleur van de link en de kleur van de tekst eromheen minimaal 3,0:1 is.
#10 - Tekst is geen kop, maar staat wel in een h3-element
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
De teksten "Toevoegen door nieuwbouw en transformatie", "Behouden betaalbare woningen in de woningvoorraad", "Beter benutten van betaalbare woningen" en andere teksten op deze pagina zijn geen koppen. Ze staan wel in een h3-element, alleen om de letters groter te maken. Een kopelement is bedoeld voor de structuur van de pagina en niet voor de opmaak.
Ik lees de website met een schermlezer. Ik verwacht dat elke kop een nieuw onderdeel aankondigt. Als een kopelement om een tekst staat die geen kop is, dan raak ik het spoor bijster.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan, zodat je alle koppen op de pagina ziet. Vraag je bij elke kop af of er een eigen onderdeel op volgt, of dat het alleen opmaak is, bijvoorbeeld een inleidende zin, een naam of een citaat. Volgt er geen onderdeel, dan hoort het geen kop te zijn. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Hoor je een kop die je zelf geen titel van een onderdeel zou noemen, dan staat het kopelement er ten onrechte en hoort de tekst in een p-element met CSS-opmaak.
Oplossing
Haal het kopelement weg en maak de tekst met CSS groter.
strong wordt alleen voor de opmaak gebruikt
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staat het strong-element om tekst die niet belangrijker is dan de rest, alleen om die tekst te laten opvallen. Zie "De informatie uit deze instrumentenkoffer … geactualiseerd en aangevuld.". Het strong-element betekent "belangrijk" en schermlezers veranderen daar vaak hun toon voor. Gebruik je het voor de opmaak, dan krijgen willekeurige woorden nadruk en verandert de betekenis van de gesproken tekst.
User story
Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Sterke nadruk (strong)" aan. Controleer bij elk gemarkeerd element of de tekst echt belangrijk is.
Oplossing
Gebruik strong alleen als een woord of een zin echt belangrijk is. Wil je tekst alleen laten opvallen, gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold.
Op deze pagina staan de grijze teksten "Zuid-Hollandplein 1, 2596 AW Den Haag", "[email protected]", "070 441 6611" en andere teksten met kleurcode #b7b4b4 op een witte achtergrond. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
Op deze pagina staan onder de kop "Contact" twee logo's die een link zijn. Bij die links staat geen tekst die de bestemming beschrijft. De afbeeldingen hebben geen betekenisvolle alt-tekst, dus bezoekers met een schermlezer horen niet wat er staat en waar de links heen gaan. Bezoekers die de website met hun stem bedienen, kunnen de links niet activeren door de zichtbare tekst uit te spreken, want de toegankelijke naam komt niet overeen met wat er te zien is.
User story
Ik lees de website met een schermlezer. Als ik bij de logolinks kom, dan hoor ik alleen "link" en verder niets. Ik verwacht dat mijn schermlezer vertelt waar elke link heen gaat.
Hoe te testen
Gebruik in onze WCAG Radar de optie "Namen van links en knoppen". Die laat de toegankelijke naam van elke link en knop op de pagina zien. Controleer of de naam de bestemming van de link uitlegt en of hij overeenkomt met de tekst die je ziet staan.
Oplossing
Er zijn drie manieren om de bestemming toe te voegen:
geef de afbeelding een alt-tekst die de bestemming van de link beschrijft;
zet op het a-element een aria-label met een korte beschrijving van de bestemming;
zet beschrijvende tekst binnen het a-element en verberg die met CSS voor het oog, zodat een schermlezer hem wel voorleest.
De tekst moet overeenkomen met de zichtbare tekst in het logo, zodat bezoekers die hun stem gebruiken de link kunnen activeren door die tekst uit te spreken.
Op deze pagina staat het strong-element om de tekst "Het rijksbeleid is er nu op gericht … kort uiteengezet.", die niet belangrijker is dan de rest. Het element is hier alleen gebruikt om die tekst te laten opvallen. Het strong-element betekent "belangrijk" en schermlezers veranderen daar vaak hun toon voor. Gebruik je het voor de opmaak, dan krijgen willekeurige woorden nadruk en verandert de betekenis van de gesproken tekst.
User story
Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Sterke nadruk (strong)" aan. Controleer bij elk gemarkeerd element of de tekst echt belangrijk is.
Oplossing
Gebruik strong alleen als een woord of een zin echt belangrijk is. Wil je tekst alleen laten opvallen, gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold.
strong-elementen staan in de plaats van koppen
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staan de teksten "Tips uit Kennissessies Platform31/RIGO" en "Voorbeelden/meer informatie" in een strong-element in plaats van in een kopelement. Die teksten zijn visueel opgemaakt als kop en ze kondigen een eigen onderdeel aan, maar in de code is dat niet het geval: strong geeft alleen nadruk en geen structuur.
De structuur die je ziet, komt daardoor niet overeen met de structuur in de code. Bezoekers die hulpsoftware gebruiken, herkennen deze teksten niet als kop en kunnen er niet met koppennavigatie naartoe.
User story
Ik lees de website met een schermlezer. Ik gebruik de koppen om de pagina te scannen en ik spring van kop naar kop. Als een titel in een strong-element staat in plaats van in een kopelement, dan hoor ik niet dat het een kop is en kom ik er niet snel bij.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan. Controleer elke tekst die eruitziet als een kop, dus ook "Tips uit Kennissessies Platform31/RIGO" en "Voorbeelden/meer informatie". Krijgen die teksten een markering van de WCAG Radar? Zo niet, bekijk dan de HTML. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort te worden aangekondigd als kop en hoort bereikbaar te zijn met koppennavigatie.
Oplossing
Gebruik h2 tot en met h6 voor teksten die een kop zijn, passend bij hun plek in de structuur. Gebruik strong niet in de plaats van een kopelement, maar alleen als een woord of een zin binnen een alinea nadruk nodig heeft.
#13 - De rol van kop ontbreekt in een accordeon
Impact: GrootType: TechniekWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staat onder "Sturing woningbouwprogramma op betaalbare woningen" een onderdeel met verborgen inhoud. De elementen waarmee je die inhoud open- en dichtklapt, staan niet in een kopelement. Die teksten zijn de kop van de inhoud eronder, dus ze horen in de code ook een kop te zijn.
Ik lees de website met een schermlezer. Als ik door de koppen ga, dan staan de titels van de accordeon niet in mijn lijst met koppen. Ik verwacht dat die titels koppen zijn, zodat ik ze snel kan vinden.
Hoe te testen
Ga met de koppennavigatie van een schermlezer door de pagina en controleer of de titels van de accordeon als kop worden aangekondigd en of ze in de koppenstructuur staan.
Oplossing
Zet de titel in een h2 of een h3, passend bij de structuur van de pagina. In het artikel over de accordeon van het W3C staat hoe je een toegankelijke accordeon bouwt: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.
#14 - Linktekst heeft te weinig contrast als de muis erop staat
De tekst van de links "Woningbouwimpuls", "Subsidieregeling wonen Zuid-Holland", "Sturen op een betaalbaar woningbouwprogramma; lessen uit Zuid-Holland" en andere links verandert van kleur als de muis erop staat. De contrastverhouding is dan 1,6:1. Tekst op informatieve elementen moet altijd genoeg contrast houden, ook als het element focus heeft of als de muis erop staat.
Ik heb een visuele beperking. Als ik met de muis over een link of een knop ga, dan wordt de tekst soms slecht leesbaar. Ik verwacht dat de tekst in elke toestand goed leesbaar blijft.
Hoe te testen
Zet de muis op het element en maak een schermafdruk. Open onze WCAG Radar, zet de optie "Contrast" aan en meet de kleur van de tekst en de achtergrond met de pipetten.
Oplossing
Zorg dat de tekst ook met de muis erop een contrastverhouding van minimaal 4,5:1 met de achtergrond heeft.
#15 - Onzichtbaar element krijgt toetsenbordfocus
Impact: GrootType: TechniekWCAG: 2.4.3EN: 9.2.4.3
Op deze pagina komt de toetsenbordfocus na de link "Sturen op een betaalbaar woningbouwprogramma; lessen uit Zuid-Holland" op een onzichtbaar element terecht dat je wel kunt bedienen. Dat gebeurt voor de geopende accordeon. Onzichtbare elementen horen niet in de focusvolgorde te staan. Bezoekers die met het toetsenbord navigeren raken de focus uit het oog en kunnen per ongeluk iets activeren.
Ik bedien de website met het toetsenbord. Als ik met de Tab-toets door de pagina ga, dan komt de focus soms op elementen die ik niet zie. Ik verwacht dat de focus alleen op zichtbare elementen staat.
Hoe te testen
Ga met de Tab-toets door de pagina. De focusindicator hoort nooit te verdwijnen op een element dat onzichtbaar is of buiten beeld staat. Verdwijnt de indicator terwijl je verder tabt, dan krijgt een verborgen element focus. Zoek in de DOM naar elementen die verborgen zijn en toch focus kunnen krijgen.
Oplossing
Zorg dat alleen zichtbare interactieve elementen focus kunnen krijgen en dat de focusvolgorde logisch loopt.
Op deze pagina staat onder "Sturing in woningbouwprogramma op gemeentelijke locaties", na de link "artikel", een link zonder inhoud. Daardoor is niet te achterhalen waar die link heen gaat. Bezoekers met een schermlezer weten niet wat ze aanklikken.
Hetzelfde gebeurt op deze pagina onder "Sturing op woningbouwprogramma via het bestemmingsplan/omgevingsplan", "Goedkoper en slimmer bouwen", "Tijdelijke huisvestingsmogelijkheden" en andere kopjes. Let ook op zinnen en woorden die over meerdere links zijn verdeeld terwijl ze naar dezelfde pagina gaan, bijvoorbeeld "Ymere verdriedubbelt het aantal woningen in het Eenhoorngebied in Amsterdam-Oost." onder "Sturing woningbouwprogramma op locaties van corporaties". Eén link is daar beter.
Ik lees de website met een schermlezer. Als ik door de links op de pagina ga, dan verwacht ik bij elke link een duidelijke naam die vertelt waar hij heen gaat.
Hoe te testen
Open de lijst met links in onze WCAG Radar met de optie "Links". Die laat alle links op de pagina zien. Lees de lijst en controleer of bij elke link duidelijk is waar hij heen gaat. Gebruik daarnaast de optie "Toegankelijke naam" om te controleren of deze link een naam heeft.
Oplossing
Haal de extra link zonder tekst weg. Wil je hem houden, geef hem dan een toegankelijke naam, met beschrijvende linktekst, met een aria-label of op een andere manier. Bij elke link moet duidelijk zijn waar hij heen gaat.
Op deze pagina staat het em-element om de tekst "Niet alleen de hoeveelheid beschikbare … zelfstandig gaan wonen?", die geen nadruk nodig heeft. Het element is hier alleen gebruikt om die tekst te laten opvallen. Het em-element betekent dat een woord in gesproken taal nadruk krijgt, en schermlezers veranderen daar vaak hun toon voor. Gebruik je het voor de opmaak, dan krijgen willekeurige woorden nadruk en verandert de betekenis van de gesproken tekst.
User story
Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Nadruk (em)" aan. Controleer bij elk gemarkeerd element of de tekst echt nadruk nodig heeft.
Oplossing
Gebruik em alleen als een woord of een zin echt nadruk krijgt in gesproken taal. Wil je tekst alleen laten opvallen, gebruik dan CSS, bijvoorbeeld een eigen class met font-style: italic.
Op deze pagina staat de grijze tekst "Om nieuwe betaalbare … worden gedraaid." met kleurcode #b7b4b4 op een lichtgrijze achtergrond met kleurcode #f5f5f9. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
Op deze pagina staan meerdere links met de vage tekst "Lees meer". Die tekst vertelt niet waar de link heen gaat. Bezoekers met een cognitieve beperking en bezoekers met een schermlezer hebben daar last van.
User story
Ik lees de website met een schermlezer. Als ik de lijst met links op de pagina open, dan zie ik alleen namen als "Lees meer". Ik verwacht dat elke link beschrijft waar hij heen gaat.
Hoe te testen
Open onze WCAG Radar en zet de optie "Alle links" aan. Die laat elke link op de pagina zien. Lees de lijst en beoordeel of elke linktekst op zichzelf te begrijpen is, dus zonder de tekst eromheen. Let op vage teksten als "Lees meer".
Oplossing
Zorg dat de linktekst de bestemming beschrijft. Is die bestemming uit de omgeving van de link duidelijk, dan kun je de vage tekst aanvullen met tekst die je met CSS voor het oog verbergt, bijvoorbeeld "Lees meer over onze aanpak".
Op deze pagina staan de oranje teksten "Wat is de inzet t.a.v. de positie van lage en middeninkomens?", "De woonvisie", "prestatieafspraken" en andere teksten met kleurcode #f46036 op een witte achtergrond. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
Op deze pagina staan de teksten "Regionale Realisatieagenda's en Programmering Woningbouw", "Programma Versnelling Woningbouw", "Toekomstbestendig bouwen" en andere teksten niet in een kopelement. Koppen brengen de structuur van de pagina over. Zonder echte kopelementen komt de structuur in de code niet overeen met wat je op de pagina ziet, en missen bezoekers die hulpsoftware gebruiken die structuur.
User story
Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de pagina te scannen en ik spring van kop naar kop. Als koppen geen kopelement zijn, dan mis ik die onderdelen en kom ik er minder makkelijk bij.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan. Controleer elke tekst die eruitziet als een kop, dus tekst die groter is, dikker, in een andere kleur of nadrukkelijk geplaatst. Krijgen die teksten allemaal een markering van de WCAG Radar? Zo niet, dan staan ze niet in een h1 tot en met h6. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort te worden aangekondigd als kop.
Oplossing
Gebruik h1 tot en met h6 voor koppen, passend bij hun plek in de structuur.
Op deze pagina staat de tekst "Voorbeelden/meer informatie" in een strong-element in plaats van in een kopelement. Die tekst is visueel opgemaakt als kop en kondigt een eigen onderdeel aan, maar in de code is dat niet het geval: strong geeft alleen nadruk en geen structuur.
De structuur die je ziet, komt daardoor niet overeen met de structuur in de code. Bezoekers die hulpsoftware gebruiken, herkennen deze tekst niet als kop en kunnen er niet met koppennavigatie naartoe.
Ik lees de website met een schermlezer. Ik gebruik de koppen om de pagina te scannen en ik spring van kop naar kop. Als een titel in een strong-element staat in plaats van in een kopelement, dan hoor ik niet dat het een kop is en kom ik er niet snel bij.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan. Controleer elke tekst die eruitziet als een kop. Krijgt die tekst een markering van de WCAG Radar? Zo niet, bekijk dan de HTML. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort te worden aangekondigd als kop en hoort bereikbaar te zijn met koppennavigatie.
Oplossing
Gebruik h2 tot en met h6 voor teksten die een kop zijn, passend bij hun plek in de structuur. Gebruik strong niet in de plaats van een kopelement, maar alleen als een woord of een zin binnen een alinea nadruk nodig heeft.
strong wordt alleen voor de opmaak gebruikt
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staat het strong-element om tekst die niet belangrijker is dan de rest, alleen om die tekst te laten opvallen. Zie "Om betaalbare woningen … indien dit wenselijk is." en "Een aantal instrumenten … de Huisvestingsverordening.". Het strong-element betekent "belangrijk" en schermlezers veranderen daar vaak hun toon voor. Gebruik je het voor de opmaak, dan krijgen willekeurige woorden nadruk en verandert de betekenis van de gesproken tekst.
User story
Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Sterke nadruk (strong)" aan. Controleer bij elk gemarkeerd element of de tekst echt belangrijk is.
Oplossing
Gebruik strong alleen als een woord of een zin echt belangrijk is. Wil je tekst alleen laten opvallen, gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold.
Op deze pagina staan de rode teksten "Koopvoorrang voor huurders bij Rochdale.", "Knarrenhof", "Woonzorgchallenge" en andere teksten met kleurcode #D55B70 op de achtergrond. Die combinatie haalt de minimale contrastverhouding van 4,5:1 niet. Voor normale tekst, dus tekst kleiner dan 18 punten of kleiner dan 14 punten vetgedrukt, geldt een minimum van 4,5:1. Bezoekers met een visuele beperking, met een kleurzienstoornis of met veel licht op het scherm kunnen deze tekst moeilijk of niet lezen.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Test de tekst op de grootte en de dikte waarin hij op het scherm staat. Uitgeschakelde elementen hoeven niet aan deze eis te voldoen.
Oplossing
Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.
#22 - Toetsenbordfocus is niet zichtbaar op de links
Impact: GrootType: TechniekWCAG: 2.4.7EN: 9.2.4.7
Op deze pagina hebben de links met de teksten "Koopvoorrang voor huurders bij Rochdale.", "Knarrenhof", "Woonzorgchallenge" en andere links geen zichtbare focusindicator. Bezoekers die met het toetsenbord navigeren, hebben een duidelijk zichtbaar kader nodig om te zien welk element focus heeft en wat ze op dat moment kunnen activeren.
User story
Ik bedien de website met het toetsenbord. Als ik langs de links ga, dan zie ik niet welke link focus heeft. Ik verwacht dat het actieve element duidelijk oplicht.
Hoe te testen
Ga met de Tab-toets door de hele pagina en controleer of je steeds ziet waar de focus staat. Zoek in de CSS naar outline: none zonder vervanging. Je kunt ook onze WCAG Radar openen en de optie "Focus zichtbaar maken" aanzetten.
Oplossing
Geef de interactieve elementen een zichtbare focusstijl. Gebruik de standaard focusindicator van de browser, of geef zelf een focusstijl terug die genoeg contrast heeft en duidelijk opvalt.
strong-elementen staan in de plaats van koppen
Impact: MediumType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staan de teksten "Tips uit Kennissessies Platform 31/RIGO" en "Voorbeelden/meer informatie:" in een strong-element in plaats van in een kopelement. Die teksten zijn visueel opgemaakt als kop en ze kondigen een eigen onderdeel aan, maar in de code is dat niet het geval: strong geeft alleen nadruk en geen structuur.
De structuur die je ziet, komt daardoor niet overeen met de structuur in de code. Bezoekers die hulpsoftware gebruiken, herkennen deze teksten niet als kop en kunnen er niet met koppennavigatie naartoe.
User story
Ik lees de website met een schermlezer. Ik gebruik de koppen om de pagina te scannen en ik spring van kop naar kop. Als een titel in een strong-element staat in plaats van in een kopelement, dan hoor ik niet dat het een kop is en kom ik er niet snel bij.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan. Controleer elke tekst die eruitziet als een kop. Krijgt die tekst een markering van de WCAG Radar? Zo niet, bekijk dan de HTML. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort te worden aangekondigd als kop en hoort bereikbaar te zijn met koppennavigatie.
Oplossing
Gebruik h2 tot en met h6 voor teksten die een kop zijn, passend bij hun plek in de structuur. Gebruik strong niet in de plaats van een kopelement, maar alleen als een woord of een zin binnen een alinea nadruk nodig heeft.
strong wordt alleen voor de opmaak gebruikt
Impact: KleinType: ContentWCAG: 1.3.1EN: 9.1.3.1
Op deze pagina staat het strong-element om tekst die niet belangrijker is dan de rest, alleen om die tekst te laten opvallen. Zie "Om nieuwe of bestaande … Zo heeft de gemeente" en "Katwijk het … de Huisvestingsverordening.". Het strong-element betekent "belangrijk" en schermlezers veranderen daar vaak hun toon voor. Gebruik je het voor de opmaak, dan krijgen willekeurige woorden nadruk en verandert de betekenis van de gesproken tekst.
User story
Ik lees de website met een schermlezer. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Sterke nadruk (strong)" aan. Controleer bij elk gemarkeerd element of de tekst echt belangrijk is.
Oplossing
Gebruik strong alleen als een woord of een zin echt belangrijk is. Wil je tekst alleen laten opvallen, gebruik dan CSS, bijvoorbeeld een eigen class met font-weight: bold.
Op deze pagina staat de tekst "Voorbeelden/meer informatie" in een strong-element in plaats van in een kopelement. Die tekst is visueel opgemaakt als kop en kondigt een eigen onderdeel aan, maar in de code is dat niet het geval: strong geeft alleen nadruk en geen structuur.
De structuur die je ziet, komt daardoor niet overeen met de structuur in de code. Bezoekers die hulpsoftware gebruiken, herkennen deze tekst niet als kop en kunnen er niet met koppennavigatie naartoe.
User story
Ik lees de website met een schermlezer. Ik gebruik de koppen om de pagina te scannen en ik spring van kop naar kop. Als een titel in een strong-element staat in plaats van in een kopelement, dan hoor ik niet dat het een kop is en kom ik er niet snel bij.
Hoe te testen
Open onze WCAG Radar en zet de optie "Koppen" aan. Controleer elke tekst die eruitziet als een kop. Krijgt die tekst een markering van de WCAG Radar? Zo niet, bekijk dan de HTML. Controleer het daarna met een schermlezer: navigeer met de H-toets in NVDA en JAWS, of met de rotor in VoiceOver. Elke zichtbare kop hoort te worden aangekondigd als kop en hoort bereikbaar te zijn met koppennavigatie.
Oplossing
Gebruik h2 tot en met h6 voor teksten die een kop zijn, passend bij hun plek in de structuur. Gebruik strong niet in de plaats van een kopelement, maar alleen als een woord of een zin binnen een alinea nadruk nodig heeft.
Op deze pagina staat in de accordeon "Nationaal Fonds Betaalbare Koopwoningen" inhoud die eruitziet als een lijst, want er staan streepjes voor de regels. In de code is het geen lijst: de ul- en li-elementen ontbreken. Een schermlezer kondigt de lijst daardoor niet aan en meldt ook niet hoeveel onderdelen erin staan. Die informatie zien bezoekers zonder hulpsoftware wel.
User story
Ik lees de website met een schermlezer. Als informatie in een lijst staat, dan wil ik dat horen. Ik verwacht dat mijn schermlezer de lijst aankondigt en het aantal onderdelen noemt.
Hoe te testen
Bekijk de pagina met een schermlezer of met de ontwikkeltools van de browser en controleer of lijsten die je ziet staan in de code ul, ol en li gebruiken. Let op regels die met een handmatig streepje of een ander teken beginnen.
Oplossing
Zet de lijst in de juiste elementen: ul voor een lijst zonder volgorde, ol voor een lijst met volgorde, en elk onderdeel in een li.
Op deze pagina staat onder de kop "Tip 2: Stel duidelijke, consequente langetermijndoelen" een schema. Een paar kleurcombinaties daarin hebben te weinig contrast. De grijze pijl met kleurcode #B1B8B9 op een witte achtergrond heeft een contrastverhouding van 2,0:1. Kijk ook naar het grijs met kleurcode #C8C8C8 in dit schema.
User story
Ik heb een visuele beperking. Als ik naar een schema kijk, dan zie ik de lijnen en de vlakken niet uit elkaar. Ik verwacht dat alle onderdelen in een schema duidelijk van elkaar verschillen.
Hoe te testen
Meet met de Colour Contrast Analyser het contrast van alle informatieve lijnen, balken en vlakken in het schema. Meet ze tegen de achtergrond waar ze op staan en tegen elkaar.
Oplossing
Geef informatieve elementen in een schema een contrastverhouding van minimaal 3,0:1 met de vlakken ernaast, zodat bezoekers ze uit elkaar kunnen houden. Controleer alle kleuren in dit schema.
#25 - Tekst in het schema heeft te weinig contrast
Onder de kop "Tip 2: Stel duidelijke, consequente langetermijndoelen" staat een schema. Daarin staat gele tekst met kleurcode #ED9E28 op een witte achtergrond, bijvoorbeeld "Fase van beleidsontwikkeling … worden.". De contrastverhouding is 2,3:1 en dat is te laag. Kijk ook naar de witte tekst "Minder scherpe beleidslijn" op de blauwe achtergrond met kleurcode #A2B0D0.
User story
Ik heb een visuele beperking. Als tekst te weinig verschilt van de achtergrond waar hij op staat, dan wordt lezen moeilijk. Ik verwacht dat tekst genoeg contrast heeft om makkelijk te lezen.
Hoe te testen
Open onze WCAG Radar en zet de optie "Contrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Voor tekst op een foto of een verloop meet je de kleur van de tekst en de achtergrond met de twee pipetten. Het minimum is 4,5:1 voor normale tekst en 3,0:1 voor grote tekst, dus tekst van minimaal 24 pixels of van minimaal 18,7 pixels vetgedrukt. Vergeet placeholders, tekst op afbeeldingen en elementen die uitgeschakeld lijken niet.
Oplossing
Deze tekst is kleiner dan 19 pixels, dus de contrastverhouding moet minimaal 4,5:1 zijn.
De bevindingen op deze pagina staan hierboven al beschreven.
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.
Hoe werkt dit rapport?
Bevindingen bekijken en filteren
Alle gevonden toegankelijkheidsproblemen staan onder Gevonden problemen. Je kunt de bevindingen filteren op:
Impact (Groot, Medium, Klein, Advies) — hoe ernstig is het probleem voor de gebruiker?
Type (Content, Techniek) — moet de inhoud of de techniek worden aangepast?
Status (Open, Opgelost) — welke problemen zijn al verholpen?
Voortgang bijhouden
Je kunt je voortgang op twee manieren bijhouden:
CSV-export — exporteer alle bevindingen als CSV-bestand en laad het in een (online) spreadsheet om met je team samen te werken.
Jira-export — exporteer alle bevindingen als Jira-compatibel CSV-bestand. Importeer het via Jira > Issues > Import issues from CSV. Bevindingen worden aangemaakt als bugs met prioriteit op basis van impact.
Registreer in de browser — activeer deze optie om per bevinding bij te houden of het is opgelost. Je voortgang wordt opgeslagen in je browser. Niemand anders kan je resultaat zien. Let op: de voortgang is gekoppeld aan je browser. Als je een andere browser of een ander apparaat gebruikt, begint de telling opnieuw.
Plan van aanpak — download een geprioriteerd plan van aanpak om de gevonden problemen stap voor stap op te lossen. Dit is beschikbaar bij audits vanaf maart 2026.
Link naar een specifieke bevinding delen
Bij elke bevinding verschijnt een link-icoon wanneer je er met de muis overheen gaat. Klik op dit icoon om de directe link naar die bevinding te kopiëren. Je kunt deze link plakken in een e-mail of chatbericht, bijvoorbeeld om een vraag te stellen aan Proper Access over een specifiek punt.
