Content audit digitale toegankelijkheid van website bsgr.nl

Samenvatting

Wij hebben de content van de website bsgr.nl onderzocht tussen 13 en 15 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.

- Voldoet
- Afgekeurd
55 Totaal
- voldoet
Impact
Klein: 0 Medium: 0 Groot: 0
Type
Content: 0 Techniek: 0
Score per richtlijn (goed)
Waarneembaar - van 20
Bedienbaar - van 20
Begrijpelijk - van 13
Robuust - van 2
Deze SC zijn afgekeurd:
Over dit onderzoek
Onderzocht door
Proper Access
In opdracht van
Pleio
Leverancier techniek
Pleio
Datum rapport
18 augustus 2026
Standaard
WCAG 2.2
Methodologie
WCAG-EM

Scope van het onderzoek

  • De content op de website bsgr.nl

Buiten scope:

  • Technische aspecten van de website, zoals JavaScript, toetsenbordbediening en responsiveness
  • PDF-documenten. De links naar PDF's op de website waren tijdens het onderzoek niet te openen, omdat de documenten zijn gearchiveerd
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website
  • De van derden afkomstige inhoud (wettelijke uitzondering voor de overheid)
  • Oude PDF-bestanden met een aanmaakdatum van september 2018 of ouder
  • Oude video's die zijn gepubliceerd op 23-09-2020 of eerder

Basisniveau toegankelijkheidsondersteuning

  • Mozilla Firefox, versie 152
  • Google Chrome, versie 150
  • Apple Safari, versie 18
  • 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
  • DOM
  • WAI-ARIA
  • SVG

Hoe nu verder

Presentatie

Bekijk een korte presentatie (~15 min) met de belangrijkste bevindingen, cijfers en vervolgstappen, handig voor een teammeeting.

Bekijk presentatie

Plan van aanpak

Download het plan van aanpak met een geprioriteerde aanpak om de gevonden problemen op te lossen.

Download plan van aanpak

Voortgang opgeloste bevindingen

Samenwerken met je team

Exporteer alle bevindingen als CSV-bestand. Je kunt het in een (online) spreadsheet inladen om met je team samen te werken.

Importeer in Jira

Exporteer alle bevindingen als Jira-compatibel CSV-bestand. Je kunt het direct importeren via Jira > Issues > Import issues from CSV.

Zelf bijhouden in de browser

Houd per bevinding bij of het is opgelost. Je voortgang wordt opgeslagen in jouw browser. Niemand anders kan je resultaat zien.

Gevonden problemen

Filter bevindingen op:
Impact:
Type:

#1 - Verborgen koppen dupliceren de zichtbare koppen

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op veel pagina's staan verborgen koppen die een zichtbare kop verderop de pagina dupliceren. Deze koppen zijn niet te zien voor ziende bezoekers, maar een schermlezer kondigt ze wel aan. Op de pagina https://bsgr.nl/nieuwe-waterschapswet-2026 staat bijvoorbeeld een verborgen h1 "Nieuwe Waterschapswet 2026" boven het kruimelpad. Verderop op de pagina kondigt een h3 met dezelfde tekst de inhoud aan. Bezoekers die een schermlezer gebruiken horen dezelfde kop twee keer en kunnen niet bepalen welke van de twee bij de inhoud hoort.

Hetzelfde probleem doet zich voor op:

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, hoor ik dezelfde kop twee keer. Ik kan niet bepalen welke kop bij de inhoud hoort. Ik verwacht dat elke kop één keer voorkomt en zijn eigen sectie aankondigt.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Controleer of er koppen dubbel op de pagina staan. Navigeer daarna met een schermlezer door de koppen en controleer of geen enkele kop twee keer voorkomt.

Oplossing

Verwijder de verborgen dubbele kop. Zet de zichtbare kop op de juiste plek in de HTML en geef hem het juiste niveau: de kop die de inhoud aankondigt hoort een h1 kop te zijn en geen h3 kop.

Link naar pagina: https://bsgr.nl/

#2 - Decoratieve afbeelding is niet verborgen voor schermlezers

Impact: Medium Type: Content WCAG: 1.1.1, 2.4.4 EN: 9.1.1.1, 9.2.4.4

Op deze pagina staat onder "Nieuws" een decoratieve afbeelding met het tekstalternatief "Tegel met een illustratie van computer met tekens". Diezelfde tekst staat ook op de link om de afbeelding heen. Daardoor wordt het voor bezoekers die een schermlezer gebruiken onduidelijk waar die link naartoe gaat. Een decoratieve afbeelding voegt geen informatie toe en hoort verborgen te zijn voor schermlezers.

User story

Ik lees de website met een schermlezer. Als ik een decoratieve afbeelding tegenkom, leest mijn schermlezer overbodige tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet dan per afbeelding, icoon en SVG of er een tekstalternatief is en wat er staat. Een informatieve afbeelding heeft een toegankelijke naam nodig die de betekenis overbrengt: een alt-attribuut op een <img>, een aria-label of een <title>-element op een SVG, of een toegankelijke naam op een icoonfont. Een decoratief element hoort niet in de HTML te staan; gebruik daarvoor een achtergrondafbeelding in CSS. Staat het decoratieve element wel in de HTML, verberg het dan met aria-hidden="true", of met een leeg alt-attribuut als het een <img> is. Controleer daarna met een schermlezer dat er geen bestandsnaam en niet het woord "afbeelding" wordt voorgelezen.

Oplossing

Gebruik een leeg alt-attribuut: alt="". Verbergen met aria-hidden="true" kan ook.

Link naar pagina: https://bsgr.nl/nieuwe-waterschapswet-2026

#3 - Verborgen kop "Carrousel" past niet bij de inhoud

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op deze pagina staat een verborgen kop "Carrousel" boven een afbeelding. Die kop is niet te zien voor ziende bezoekers, maar een schermlezer kondigt hem wel aan. De kop hoort niet bij inhoud die erop volgt: er staat geen carrousel op de pagina, alleen één afbeelding. Bezoekers die een schermlezer gebruiken verwachten daardoor iets anders dan er staat.

Zie ook:

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, hoor ik de kop 'Carrousel', terwijl er geen carrousel op de pagina staat. Ik verwacht dat elke kop beschrijft wat erna komt.

Hoe te testen

Navigeer met een schermlezer door de koppen en controleer of elke kop past bij de inhoud die erop volgt.

Oplossing

Verwijder de verborgen h3 kop "Carrousel". Is er een kop nodig boven de afbeelding, gebruik dan een kop die de inhoud beschrijft.

#4 - Decoratieve afbeelding is niet verborgen voor schermlezers

Impact: Medium Type: Content WCAG: 1.1.1 EN: 9.1.1.1

Op deze pagina staat onder "Nieuwe Waterschapswet 2026" een decoratieve afbeelding met het tekstalternatief "Afbeelding van een waterdijk". Een decoratieve afbeelding voegt geen informatie toe en hoort verborgen te zijn voor schermlezers.

User story

Ik lees de website met een schermlezer. Als ik een decoratieve afbeelding tegenkom, leest mijn schermlezer overbodige tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet dan per afbeelding, icoon en SVG of er een tekstalternatief is en wat er staat. Controleer daarna met een schermlezer dat er geen bestandsnaam en niet het woord "afbeelding" wordt voorgelezen.

Oplossing

Gebruik voor img-elementen een leeg alt-attribuut: alt="".

#5 - Tekst is geen kop, maar staat wel in een h5-element

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

De tekst "18 februari 2026" op deze pagina is geen kop, maar staat wel in een h5-element om de letters groter te maken. Kop-elementen brengen structuur aan in de informatie op een pagina; ze zijn niet bedoeld om tekst op te maken.

Hetzelfde probleem doet zich voor bij:

User story

Ik lees de website met een schermlezer. Ik verwacht dat elke kop een nieuwe sectie aankondigt. Het is verwarrend als een kop-element om tekst staat die geen kop is.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan om alle koppen op de pagina te zien. Loop de lijst langs en vraag je per kop af: kondigt deze tekst een eigen sectie met inhoud aan, of is het alleen opmaak, zoals een inleidende zin, een naam of een citaat? Volgt er geen sectie, dan hoort de tekst geen kop te zijn. Controleer het daarna met een schermlezer: navigeer met H in NVDA en JAWS, of met de rotor in VoiceOver. Hoor je een kop die je zelf geen sectietitel zou noemen, dan is het kop-element verkeerd gebruikt.

Oplossing

Verwijder het kop-element, gebruik een <p>-element en maak de tekst op met CSS. Haal ook het <strong>-element weg waar dat alleen voor de opmaak wordt gebruikt: bij een paar van deze teksten staan twee elementen om de tekst en geeft <strong> een nadruk die er niet hoort.

Link naar pagina: https://bsgr.nl/vergaderingen-algemeen-bestuur-2026

#6 - Lijststructuur is niet goed genest

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op deze pagina staat in de lijst onder "Bestuursvergaderingen" een leeg <ul>-element tussen de <li>-elementen. Een <ul>-element hoort binnen een <li>-element te staan en niet direct in een ander <ul>-element. Daarmee klopt de structuur van de lijst niet. Bezoekers die een schermlezer gebruiken horen een verkeerd aantal items, of ze horen de structuur van de lijst helemaal niet.

Hetzelfde probleem doet zich voor op:

User story

Ik lees de website met een schermlezer. Als ik door een lijst navigeer, hoor ik verkeerde informatie over de structuur. Ik verwacht dat de lijst goed wordt aangekondigd, met het juiste aantal items.

Hoe te testen

Open de WCAG Radar en zet de optie "Lijststructuur" aan. Controleer alle lijsten op de pagina en het aantal items per lijst. Controleer daarna met een schermlezer of de structuur van de lijst goed wordt aangekondigd.

Oplossing

Verwijder de lege lijst.

Link naar pagina: https://bsgr.nl/woz-waarde

#7 - Iframe heeft geen title-attribuut

Impact: Groot Type: Content WCAG: 4.1.2 EN: 9.4.1.2

Op deze pagina staat onder de kop "Uitleg WOZ-waarde en belastingen" een <iframe>-element zonder title-attribuut. Een schermlezer kan daardoor niet aankondigen waar het iframe voor is. Bezoekers weten niet welke inhoud erin staat en kunnen niet bepalen of het zin heeft om erin te gaan. Dat maakt navigeren met hulpsoftware een stuk lastiger.

User story

Ik lees de website met een schermlezer. Als ik een ingesloten kader tegenkom, hoor ik geen omschrijving en weet ik niet wat erin staat. Ik verwacht een duidelijke naam, zodat ik kan bepalen of ik het wil bekijken.

Hoe te testen

Open de WCAG Radar en zet de optie "Titels van ingesloten kaders (iframes)" aan. Elk iframe zonder titel wordt gemarkeerd. Controleer daarna met een schermlezer of de titel wordt aangekondigd zodra je bij het iframe komt.

Oplossing

Voeg een beschrijvend title-attribuut toe aan het <iframe>-element, zodat duidelijk is welke inhoud erin staat. Bijvoorbeeld: <iframe title="Video Uitleg WOZ-waarde en belastingen" src="...">.

#8 - Tekst is als afbeelding geplaatst

Impact: Medium Type: Content WCAG: 1.4.5 EN: 9.1.4.5

Op deze pagina staat onder "Informatie over de WOZ-waarde" een afbeelding met tekst erin. Bezoekers kunnen die tekst niet vergroten en niet aanpassen, bijvoorbeeld het lettertype of de kleur. Daarmee is de tekst voor een deel van de bezoekers niet te lezen.

User story

Ik vergroot tekst om die beter te kunnen lezen. Tekst in een afbeelding verandert niet mee als ik de tekstgrootte, het lettertype of de kleuren aanpas. Ik verwacht dat alle tekst op de pagina echte tekst is.

Hoe te testen

Selecteer alle tekst op de pagina met Cmd+A of Ctrl+A. Ziet iets eruit als tekst, maar wordt het niet geselecteerd, dan is het een afbeelding van tekst. Dat mag alleen bij een logo, essentiële typografie, een foto of een label in een grafiek.

Oplossing

Zet de tekst als echte tekst op de pagina. Bezoekers kunnen de weergave dan zelf aanpassen, zodat de tekst voor hen leesbaar wordt.

#9 - Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Impact: Medium Type: Content WCAG: 1.1.1 EN: 9.1.1.1

Op deze pagina staat in de sectie "Informatie over de WOZ-waarde" een informatieve afbeelding met het tekstalternatief "Logo van bepaling WOZ waarde". Die tekst beschrijft de afbeelding niet. Een informatieve afbeelding heeft een tekstalternatief nodig dat de informatie uit de afbeelding kort en volledig overbrengt. De tekst op de pagina en de video eronder bevatten die informatie niet, dus die zijn geen alternatief.

User story

Ik lees de website met een schermlezer. Als ik een afbeelding tegenkom, hoor ik niet wat erop staat. Ik verwacht dat de schermlezer mij vertelt welke informatie de afbeelding overbrengt.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Controleer per afbeelding, icoon en SVG of er een betekenisvol tekstalternatief is. Controleer met een schermlezer dat er geen bestandsnaam en niet het woord "afbeelding" wordt voorgelezen.

Oplossing

Pas het tekstalternatief aan, zodat het beschrijft welke informatie de afbeelding overbrengt. Het tekstalternatief hoort uniek en beschrijvend te zijn. In deze afbeelding staat tekst: zet je die tekst als echte tekst op de pagina, dan wordt de afbeelding decoratief. Herhaal de informatie dan niet in het tekstalternatief.

Link naar pagina: https://bsgr.nl/veelgestelde-vragen/view/917c21e4-6349-4832-bc26-033e4fe1e3e7/welke-woz-waarde-moet-ik-opgeven-bij-mijn-aangifte-inkomstenbelasting

#10 - Genummerde lijst is opgesplitst en subitems zijn niet genest

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op deze pagina is een genummerde lijst opgesplitst in twee <ol>-elementen. Visueel is het één doorlopende lijst met twee items. De items hebben ook subitems, maar die staan in losse lijsten in plaats van in een geneste lijst. Bezoekers die een schermlezer gebruiken horen daardoor meerdere losse lijsten in plaats van één lijst met de juiste structuur.

User story

Ik lees de website met een schermlezer. Als ik door de lijst navigeer, hoor ik meerdere losse lijsten. Ik kan niet bepalen welke items bij elkaar horen en welke items subitems zijn. Ik verwacht één lijst met de juiste structuur en het juiste aantal items.

Hoe te testen

Bekijk de pagina in de DevTools van de browser. Controleer of alle items die bij elkaar horen in één <ol>-element staan en of de subitems binnen het bovenliggende <li>-element staan. Controleer daarna met een schermlezer of de structuur van de lijst goed wordt aangekondigd.

Oplossing

Voeg de twee <ol>-elementen samen tot één lijst. Zet de subitems in een geneste lijst binnen het bovenliggende <li>-element.

Link naar pagina: https://bsgr.nl/veelgestelde-vragen/view/eef7daaf-5157-4149-9001-f9346da93c5f/waarom-krijg-ik-geen-automatische-kwijtschelding

#11 - Visuele opsomming is niet als lijst gemarkeerd

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op deze pagina staat onder "Bijvoorbeeld:" inhoud die eruitziet als een opsomming, maar die in de code niet als lijst is gemarkeerd met <ul>, <ol> en <li>. Zonder lijstmarkering kan een schermlezer niet aankondigen dat het om een lijst gaat en hoeveel items erin staan. Bezoekers die hulpsoftware gebruiken missen daarmee structuur die ziende bezoekers wel zien.

User story

Ik lees de website met een schermlezer. Als informatie als opsomming op de pagina staat, wil ik die structuur ook horen. Ik verwacht dat mijn schermlezer de lijst aankondigt en het aantal items noemt.

Hoe te testen

Open de WCAG Radar en zet de optie "Lijststructuur" aan. Controleer of elke opsomming op de pagina met <ul>, <ol> en <li> is gemarkeerd. Let op items die met een streepje of een ander teken met de hand zijn nagemaakt in plaats van met echte lijstmarkering.

Oplossing

Markeer de opsomming met de juiste elementen: <ul> voor een ongeordende lijst of <ol> voor een geordende lijst, met elk item in een <li>-element.

Link naar pagina: https://bsgr.nl/inloggen-mijnbsgr

#12 - Decoratieve afbeelding is niet verborgen voor schermlezers

Impact: Medium Type: Content WCAG: 1.1.1 EN: 9.1.1.1

Op deze pagina staat onder "MijnBSGR" een decoratieve afbeelding met het tekstalternatief "Afbeelding van een laptop waarmee man wil bij BSGR inloggen". Een decoratieve afbeelding voegt geen informatie toe en hoort verborgen te zijn voor schermlezers.

User story

Ik lees de website met een schermlezer. Als ik een decoratieve afbeelding tegenkom, leest mijn schermlezer overbodige tekst voor. Ik verwacht dat decoratieve afbeeldingen worden overgeslagen.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Je ziet dan per afbeelding, icoon en SVG of er een tekstalternatief is en wat er staat. Controleer daarna met een schermlezer dat er geen bestandsnaam en niet het woord "afbeelding" wordt voorgelezen.

Oplossing

Gebruik een leeg alt-attribuut: alt="". Verbergen met aria-hidden="true" kan ook.

#13 - Logo's hebben een automatisch gegenereerde alt-tekst

Impact: Klein Type: Content WCAG: 1.1.1 EN: 9.1.1.1

Op deze pagina staan onder de kop "MijnBSGR" twee logo's met een automatisch gegenereerd tekstalternatief. Bij het eerste logo staat "Lichtblauw kleurvlak met logo van digid met zwarte achtergrond en witte en oranje letters". Bij het tweede staat "Lichtblauw kleurvlak met logo Eherkenning in donkerblauwe achtergrond met witte E en rode H". Die teksten beschrijven hoe de afbeelding eruitziet en leveren daarmee ruis op. Ze vertellen niet om welk logo het gaat.

User story

Ik lees de website met een schermlezer. Als ik deze logo's tegenkom, hoor ik een lange beschrijving van kleuren en achtergronden. Ik verwacht dat het tekstalternatief mij vertelt welk logo het is.

Hoe te testen

Open de WCAG Radar en zet de optie "Afbeeldingen en alt-tekst" aan. Controleer het tekstalternatief van elk logo. Controleer met een schermlezer of dat tekstalternatief kort en betekenisvol is.

Oplossing

Vervang het automatisch gegenereerde tekstalternatief door een korte, betekenisvolle tekst. Bijvoorbeeld alt="DigiD" en alt="eHerkenning".

#14 - Decoratieve emoji's zijn niet verborgen voor schermlezers

Impact: Medium Type: Content WCAG: 1.1.1 EN: 9.1.1.1

Op deze pagina staat onder de tekst "MijnBSGR is de digitale omgeving waar u dag en nacht uw zaken met de Belastingsamenwerking Gouwe-Rijnland (BSGR) kunt regelen." een opsomming met emoji's. Een schermlezer leest de namen van die emoji's voor. Dat levert ruis op en kan bezoekers in de war brengen.

User story

Ik lees de website met een schermlezer. Als ik door de opsomming navigeer, leest mijn schermlezer de namen van emoji's voor. Ik verwacht dat decoratieve iconen worden overgeslagen.

Hoe te testen

Beluister de opsomming met een schermlezer en controleer of er geen namen van emoji's worden voorgelezen.

Oplossing

Verberg elke emoji voor hulpsoftware, bijvoorbeeld met aria-hidden="true" op het element eromheen.

#15 - Element met aria-hidden krijgt wel toetsenbordfocus

Impact: Medium Type: Techniek WCAG: 1.3.1, 4.1.2 EN: 9.1.3.1, 9.4.1.2

Op deze pagina staan twee links met aria-hidden="true" die wel toetsenbordfocus krijgen. Het gaat om de links met de logo's "DigiD" en "EH". Een element met aria-hidden="true" is verborgen voor schermlezers, maar bezoekers die met het toetsenbord navigeren komen er nog wel op. Wie een schermlezer en het toetsenbord combineert, komt dus op een element dat de schermlezer niet kan aankondigen.

User story

Ik lees de website met een schermlezer en navigeer met het toetsenbord. Als ik door de pagina tab, blijft mijn schermlezer stil bij één element. Ik weet niet wat dat element is en waar het naartoe gaat.

Hoe te testen

Tab door de pagina en controleer of elk element dat focus krijgt door de schermlezer wordt aangekondigd. Bekijk de link daarna in de DevTools van de browser en controleer of er aria-hidden="true" op een focusbaar element staat.

Oplossing

Haal het element uit de tabvolgorde met tabindex="-1". Of verwijder aria-hidden="true" van de link en geef de link een betekenisvolle toegankelijke naam.

Link naar pagina: https://contact.bsgr.nl/

#16 - Linkdoel van het logo is onbekend

Impact: Medium Type: Content WCAG: 1.1.1, 2.4.4, 2.5.3 EN: 9.1.1.1, 9.2.4.4, 9.2.5.3

Het logo bovenaan de website fungeert als link, maar heeft geen tekstalternatief. Bezoekers die een schermlezer gebruiken horen daardoor niets over de afbeelding en niets over de bestemming van de link. Bezoekers die spraakbesturing gebruiken kunnen de link niet activeren door de zichtbare tekst uit te spreken, omdat de toegankelijke naam niet overeenkomt met wat er in beeld staat. Hetzelfde probleem doet zich voor bij de LinkedIn-link in de header.

User story

Ik lees de website met een schermlezer. Als ik het logo bovenaan de pagina tegenkom, hoor ik alleen 'link' en verder niets over de bestemming. Ik verwacht dat de schermlezer vertelt waar de link naartoe gaat, bijvoorbeeld 'Startpagina Logo van Belastingsamenwerking Gouwe-Rijnland'.

Hoe te testen

Open de WCAG Radar en zet de optie "Linkteksten" aan. Je krijgt dan alle links op de pagina op een rij. Loop die lijst langs en controleer of duidelijk is waar de link op het logo naartoe gaat.

Oplossing

Geef de link context. Dat kan op drie manieren:

  • Is het logo een afbeelding, geef die dan een beschrijvend alt-attribuut dat de bestemming van de link aangeeft.
  • Geef het link-element een aria-label met een korte omschrijving van de bestemming.
  • Zet beschrijvende tekst binnen het <a>-element en verberg die visueel met CSS, zodat schermlezers de tekst wel voorlezen.

#17 - Tekstcontrast is lager dan 4,5:1

Impact: Medium Type: Content WCAG: 1.4.3 EN: 9.1.4.3

Op deze pagina staan de witte teksten "Home", "E-mail sturen", "Document uploaden" en andere op een blauwe achtergrond met kleurcode #6E8FC4. De contrastverhouding komt niet aan de minimumeis van 4,5:1. Voor normale tekst geldt een minimum van 4,5:1. Normale tekst is tekst kleiner dan 18pt, of kleiner dan 14pt vetgedrukt. Met te weinig contrast is tekst moeilijk of niet te lezen voor bezoekers met een visuele beperking, bezoekers die kleuren minder goed onderscheiden en iedereen die naar een scherm kijkt in fel licht.

Hetzelfde probleem doet zich voor bij:

  • de knop "Verstuur", met dezelfde kleurcombinatie.
  • de blauwe teksten "Veelgestelde vragen" en "MijnBSGR" met kleurcode #6E8FC4 op een witte achtergrond. De contrastverhouding is daar 3,3:1.
  • de foutmeldingen die verschijnen na het verzenden van een leeg formulier: rood met kleurcode #ff0000 op een witte achtergrond, met een contrastverhouding van 4,0:1. Op de lichtblauwe achtergrond met kleurcode #daedff is de contrastverhouding 3,3:1.

User story

Ik heb een visuele beperking. Als ik een pagina lees, dan kan ik tekst met weinig contrast niet onderscheiden. Ik verwacht dat tekst altijd duidelijk afsteekt tegen de achtergrond.

Hoe te testen

Open de WCAG Radar en zet de optie "Tekstcontrast" aan. Tekst op een effen achtergrond met te weinig contrast wordt automatisch gemarkeerd. Staat de tekst op een foto of een verloop, meet dan met de twee pipetten de kleur van de tekst en van de achtergrond. Test de tekst op de grootte en de dikte waarin hij normaal in beeld komt. Voor uitgeschakelde bedieningselementen geldt de eis niet.

Oplossing

Pas de tekstkleur of de achtergrondkleur aan, zodat de contrastverhouding minimaal 4,5:1 is.

#18 - Interactieve elementen hebben geen toegankelijke naam

Impact: Groot Type: Techniek WCAG: 1.3.1, 2.5.3, 4.1.2 EN: 9.1.3.1, 9.2.5.3, 9.4.1.2

Op deze pagina hebben de invoervelden, het selectievakje en de keuzelijst onder "E-mail sturen" geen toegankelijke naam. Bezoekers die een schermlezer gebruiken horen alleen "edit text" en weten niet wat ze moeten invullen. Hetzelfde probleem doet zich voor bij de andere secties in dit formulier.

User story

Ik lees de website met een schermlezer. Als ik een formulier invul, hoor ik alleen 'edit text' en geen uitleg. Ik verwacht dat elk veld een duidelijke naam heeft, zodat ik weet wat ik moet invullen.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam bij formuliervelden" aan. Je ziet dan de toegankelijke naam van de invoervelden, selectievakjes en keuzelijsten op de pagina. Controleer of elk element een naam heeft en of die naam overeenkomt met het label dat ernaast in beeld staat.

Oplossing

Koppel een <label>-element altijd aan het bijbehorende invoerveld in de code, met de attributen for en id. Dat heeft nog een voordeel: het klikgebied wordt groter, wat helpt voor bezoekers die moeilijk precies kunnen klikken.

Geef ook de keuzelijst een toegankelijke naam. Dat kan op drie manieren:

  • Koppel een <label> aan de keuzelijst met het for-attribuut, bijvoorbeeld <label for="onderwerp">Onderwerp</label> bij <select id="onderwerp">. Dit heeft de voorkeur, omdat elke bezoeker de naam dan ziet.
  • Geef de keuzelijst een aria-label als er geen zichtbaar label is: <select aria-label="Onderwerp">.
  • Verwijs met aria-labelledby naar tekst die al op de pagina staat: <select aria-labelledby="onderwerp-label"> bij <span id="onderwerp-label">Onderwerp</span>.

#19 - Autocomplete-attribuut ontbreekt bij invoervelden voor persoonsgegevens

Impact: Medium Type: Techniek WCAG: 1.3.5 EN: 9.1.3.5

Op deze pagina staat een formulier met invoervelden voor persoonsgegevens, "Telefoonnummer" en "E-mailadres", zonder autocomplete-attribuut. Bij velden die om persoonsgegevens vragen hoort het bijbehorende autocomplete-attribuut. Browsers en hulpsoftware kunnen die velden dan bijvoorbeeld automatisch invullen.

User story

Ik heb een beperkte motoriek en trillende handen. Als ik een formulier met mijn naam en e-mailadres moet invullen, kan mijn browser de velden niet automatisch vullen. Ik verwacht dat velden met persoonsgegevens automatisch worden ingevuld door mijn browser of mijn hulpsoftware.

Hoe te testen

Loop elk veld met persoonsgegevens langs: naam, adres, telefoonnummer, e-mailadres en wachtwoord. Bekijk het veld in de DevTools van de browser en controleer of er een autocomplete-attribuut op staat met de waarde die bij dat gegeven hoort. Controleer daarna of de browser het veld automatisch aanvult met opgeslagen gegevens.

Oplossing

Voeg het autocomplete-attribuut toe aan deze invoervelden. Welke waarden er zijn en hoe je ze gebruikt, staat in de lijst met input purposes van het W3C.

#20 - Taalinstelling van de pagina ontbreekt

Impact: Medium Type: Techniek WCAG: 3.1.1 EN: 9.3.1.1

Op deze pagina staat geen lang-attribuut op het <html>-element. Dat attribuut geeft aan in welke taal de pagina is geschreven. Zonder dat attribuut passen schermlezers en andere hulpsoftware de uitspraakregels van een andere taal toe, waardoor de inhoud moeilijk te begrijpen is.

User story

Ik lees de website met een schermlezer. Als ik een pagina open, kiest mijn schermlezer de verkeerde taal en klinkt de tekst onbegrijpelijk. Ik verwacht dat mijn schermlezer de inhoud automatisch in de juiste taal voorleest.

Hoe te testen

Open de WCAG Radar en zet de optie "Taal van de pagina" aan. Je kunt het ook in de HTML controleren.

Oplossing

Voeg het lang-attribuut toe aan het <html>-element en geef het de juiste taalcode, bijvoorbeeld lang="nl" voor Nederlands.

#21 - Koppen zijn niet als kop gemarkeerd

Impact: Medium Type: Content WCAG: 1.3.1 EN: 9.1.3.1

Op deze pagina staan in de footer teksten die niet als kop zijn gemarkeerd: "Postadres", "E-mailadres", "Bankrekeningnummer" en andere. Koppen brengen de structuur van de informatie op een pagina over. Zonder echte kop-elementen komt de structuur in de code niet overeen met wat er in beeld staat, en missen bezoekers die hulpsoftware zoals een schermlezer gebruiken die structuur.

User story

Ik lees de website met een schermlezer. Ik laat de koppen voorlezen om de pagina te scannen en ik navigeer van kop naar kop. Als koppen niet als kop zijn gemarkeerd, mis ik die secties en kan ik minder makkelijk navigeren.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop elke tekst langs die er visueel uitziet als een kop: groter, dikker, een andere kleur of een opvallende plek. Krijgen ze allemaal een kopmarkering van de WCAG Radar? Zo niet, dan zijn ze niet met h1 tot h6 gemarkeerd. Controleer het daarna met een schermlezer: navigeer met H in NVDA en JAWS, of met de rotor in VoiceOver. Elke visuele kop hoort als kop te worden aangekondigd.

Oplossing

Gebruik de elementen h1 tot h6 voor koppen, passend bij hun rol en hun plek in de hiërarchie.

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.