Doel van het onderzoek is om te beoordelen of de informatie op de website voor iedereen, inclusief mensen met een functiebeperking, toegankelijk is en bedient kan worden.
Deze rapportage bevat de bevindingen van dit onderzoek. Uitgewerkt per richtlijn benoemen we de status waarin aan de succescriteria voldaan wordt, wat daarbij geconstateerde toegankelijkheidsproblemen zijn en eventuele opmerkingen ter advies.
De opgetekende bevindingen zijn indicatief. Een betreffend probleem kan dus op meerdere locaties binnen de website voorkomen zonder dat die apart benoemd worden.
De gebruikte onderzoeksmethode, WCAG-EM, werkt op basis van een steekproef. Hoewel de steekproef van het onderzoek zorgvuldig wordt samengesteld om een evenwichtig beeld van de vastgestelde scope te onderzoeken, kan het voorkomen dat een toegankelijkheidsprobleem niet geconstateerd wordt, maar dit bij een vervolgonderzoek wel aan het licht komt. Ook kunnen bevindingen op een later tijdstip mogelijk anders geïnterpreteerd en beoordeeld worden door verdere ontwikkeling van kennis en technieken.
De WCAG (Web Content Accessibility Guidelines) zijn internationaal geaccepteerde richtlijnen, gepubliceerd door het W3C (World Wide Web Consortium), ter bevordering van de toegankelijkheid van webcontent voor mensen met een functiebeperking. De richtlijnen zijn techniek-onafhankelijk opgebouwd via een viertal principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Deze principes bevatten een serie richtlijnen met succescriteria waarmee webcontent beoordeeld kan worden.
Het toegankelijkheidsonderzoek voor de website Waterschap Zuiderzeeland Informatievijver is op 24 februari 2026 afgerond. Hiervoor is gebruikgemaakt van de WCAG-EM evaluatiemethode om te kijken hoe de onderzochte website voldoet aan de gestelde norm van WCAG 2.2 Niveau AA.
Op de volgende pagina's staan per succescriterium de bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Bij sommige succescriteria staan opmerkingen vermeldt. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Hieronder staan per succescriterium eventuele bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website en haar content verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Tevens staan bij sommige succescriteria opmerkingen. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Logo van de organisatie heeft geen tekstalternatief
Linksboven op de pagina staat het logo van de organisatie, dat tevens als link fungeert (naar de homepage).
De <img> binnen deze link heeft een leeg alt-attribuut (alt="") en is daarmee actief verborgen voor screenreaders.
Binnen dezelfde link is een sr-only<span> aanwezig met de tekst: “Open in a new window”. Deze tekst wordt hierdoor de toegankelijke naam van de link. De tekst:
is in het Engels, terwijl de pagina Nederlandstalig is
beschrijft niet het doel van de link
mist een tekstalternatief voor het logo
Impact op gebruikers
Screenreadergebruikers krijgen geen informatie dat dit het logo van de organisatie is en dat de link naar de homepage verwijst. In plaats daarvan horen ze enkel “Open in a new window”.
Oplossing
Zorg dat de logo-link een correcte, toegankelijke naam krijgt die het doel beschrijft. Geef de afbeelding een betekenisvolle alt-tekst, zoals: alt="Waterschap Zuiderzeeland – naar homepage"
Het automatisch openen van links in een nieuw venster of tabblad is niet aan te bevelen, omdat dit voor gebruikers onverwacht en verwarrend kan werken. Advies is om deze interactie te verwijderen en de link gewoon in het huidige venster te openen.
Als de functionaliteit blijft, moet de Engelse tekst naar het Nederlands vertaald worden.
In de lopende tekst zijn twee links aanwezig die geen zichtbare of betekenisvolle tekst bevatten.
De links bevatten uitsluitend een non-breaking space ( ). Hierdoor worden ze technisch gezien niet als volledig leeg beschouwd.
Omdat de link wel inhoud bevat (een spatie), maar geen leesbare tekst, wordt door screenreaders geen linktekst of URL voorgelezen. De link wordt alleen als “link” aangekondigd, zonder verdere context.
Er zijn ook links aanwezig met de content ":", waar ze een losse link in de content vormen. Beide instanties verwijzen ook naar verschillende pagina's.
Dit betreft waarschijnlijk een content- of opmaakfout.
Impact op gebruikers
Screenreadergebruikers krijgen een aankondiging van een link zonder dat duidelijk wordt wat het doel van de link is, waar de link naartoe leidt, of de link functioneel relevant is. Dit veroorzaakt verwarring en onderbreekt de leeservaring.
Omdat de linktekst ontbreekt, is het linkdoel niet te bepalen. Dit belemmert navigatie en kan het vertrouwen in de content verminderen.
Oplossing
Dit is waarschijnlijk een content. Verwijder de lege links uit de content
De hoofdtijd van de pagina is programmatisch ingesteld op lang="en-gb".
De inhoud van de pagina is echter volledig Nederlandstalig. De ingestelde taal komt daardoor niet overeen met de werkelijke taal van de content.
Impact op gebruikers
Screenreaders gebruiken de ingestelde paginataal om uitspraakregels en steminstellingen te bepalen.
Wanneer de taal onjuist is ingesteld, wordt Nederlandse tekst uitgesproken met Engelse uitspraakregels. Dit kan de verstaanbaarheid sterk verminderen en er ontstaat extra cognitieve belasting voor gebruikers.
Dit kan de inhoud moeilijk of onbegrijpelijk maken voor screenreadergebruikers.
Oplossing
Pas het lang-attribuut in het <html>-element aan naar de correcte taalcode:
<html lang="nl">
Als specifieke onderdelen van de pagina wel in een andere taal zijn, geef deze afzonderlijk aan met een passend lang-attribuut op elementniveau (bijv. lang="en").
Screenshots
Visuele koptekst is niet semantisch als kop gemarkeerd
Sommige tekst, zoals bijvoorbeeld “Data mag vrij worden gebruikt”, is visueel opgemaakt als koptekst (grotere lettergrootte, opvallende positionering).
In de code is deze tekst echter niet gemarkeerd als kop (<h1>–<h6>), maar opgebouwd als:
<p><strong>Data mag vrij worden gebruikt</strong></p>
Hierdoor ontbreekt de semantische kopstructuur in de HTML.
Impact op gebruikers
Screenreadergebruikers en andere gebruikers van ondersteunende technologie navigeren vaak via koppen.
Omdat deze tekst niet als kop is gemarkeerd verschijnt deze niet in de koppenlijst en kan er niet snel naartoe worden genavigeerd. Ook ontbreekt structuur en hiërarchie in de pagina.
Oplossing
Markeer de tekst als een semantische kop met een passend kopniveau, bijvoorbeeld:
<h2>Data mag vrij worden gebruikt</h2>
Kies het kopniveau op basis van de bestaande koppenhiërarchie op de pagina.
De hoofdnavigatie is opgebouwd met een correcte semantische HTML-structuur, maar deze semantiek wordt overschreven door het gebruik van role="menubar" op het navigatie-element en role="menuitem" op de <a>-elementen.
De rol menubar is bedoeld voor applicatie-achtige menucomponenten (vergelijkbaar met desktopapplicaties), niet voor reguliere website-navigatie.
Daarnaast ontbreekt de bijbehorende toetsenbordbediening die vereist is bij deze ARIA-rol (zoals pijltjestoetsnavigatie volgens het ARIA Authoring Practices-patroon).
De menu-items bevatten bovendien onnodige aria-label-attributen met exact dezelfde tekst als de zichtbare linktekst (in onderliggende <span>-elementen). Hierdoor wordt redundante ARIA toegepast zonder functionele meerwaarde.
Impact op gebruikers
Door het toepassen van role="menubar" verwachten screenreaders ander gedrag dan een standaard navigatie. Hierdoor kan verwarring ontstaan over het type component en worden afwijkende toetsenbordinteractie verwacht (oa. pijltjestoetsen). Omdat deze interactie er niet is, ontstaat een inconsistente en verwarrende situatie.
Onnodige aria-label-attributen vergroten daarnaast het risico op dubbele of afwijkende aankondigingen en geven vaak onderhoudsproblemen in de code, waardoor toekomstige inconsistenties tussen zichtbare en toegankelijke naam kunnen ontstaan. Dit kan de betrouwbaarheid van de navigatie voor gebruikers van ondersteunende technologie verminderen.
Oplossing
Pas ARIA alleen toe wanneer dit daadwerkelijk nodig is en volledig conform specificatie wordt geïmplementeerd. Gebruik de aanwezige semantische HTML-structuur zonder aanvullende ARIA-rollen:
Verwijder role="menubar"
Verwijder role="menuitem"
Verwijder overbodige aria-label-attributen wanneer de zichtbare linktekst al een correcte toegankelijke naam vormt
Een standaard <nav> met <ul> > <li> > <a>-structuur zoals in de code al aanwezig, is correct en voldoende voor website-navigatie.
Screenshots
Status van mobiel menu niet programmatisch beschikbaar
De knop voor het openen van het mobiele menu is geïmplementeerd als <button>, maar bevat geen aria-expanded-attribuut.
Hierdoor wordt de open- of gesloten status van het menu niet programmatisch doorgegeven aan ondersteunende technologie.
Visueel verandert het menu van gesloten naar geopend, en wordt de focus naar de nieuwe modal verplaatst, maar het toevoegen van aria-expanded aan de button informeert de gebruiker op voorhand van deze interactie.
Impact op gebruikers
Voor screenreadergebruikers is het met de aanwezigheid van aria-expanded op de button vooraf duidelijker dat de knop een nieuw menu gaat openen.
Oplossing
Voeg een dynamisch aria-expanded-attribuut toe aan de knop, dat de actuele status weergeeft:
In het mobiele menu is een knop aanwezig met een “X”-icoon om het menu te sluiten. De toegankelijke naam van deze knop is ingesteld op “Close”. De pagina en overige content zijn Nederlandstalig.
In de huidige opstelling is de pagina als Engelstalig aangeduid, waardoor dit technisch geen fout is, maar omdat de pagina-aanduiding aangepast moet worden naar Nederlands, heb ik deze toch opgenomen, zodat het niet vergeten wordt. Controleer ook andere elementen op de pagina's om te zorgen dat ze vertaald worden, of als Engelstalig worden aangeduid.
Impact op gebruikers
Screenreadergebruikers krijgen een Engelse aankondiging binnen een verder Nederlandstalige pagina.
Oplossing
Pas de toegankelijke naam aan naar een Nederlandstalige beschrijving. Indien er bewust gekozen wordt voor een Engelstalige naam, moet deze correct worden gemarkeerd met lang="en".
In dit geval is dat echter niet logisch, omdat de rest van de pagina Nederlandstalig is.
Screenshots
Actieve navigatie-item alleen via kleur aangeduid en onvoldoende contrast (mobiel menu)
In de mobiele versie van de hoofdnavigatie wordt de actieve pagina uitsluitend visueel aangeduid door middel van kleurverschil.
De actieve pagina wordt weergegeven via een lichtgroene tekstkleur op een witte achtergrond. De gemeten contrastverhouding bedraagt 2.2:1 (kleur #96BF0D op #FFFFFF), wat onvoldoende.
Impact op gebruikers
Gebruikers met visuele beperkingen of kleurenblindheid kunnen de actieve pagina mogelijk niet herkennen.
Oplossing
Zorg dat de tekst voldoende contrast heeft on leesbaar te zijn, hier minimaal 4.5:1 of 3:1 voor dikgedrukte tekst.
Zorg ook dat actieve navigatiestatus niet uitsluitend via kleur wordt gecommuniceerd door een extra visuele indicator toe te voegen (bijv. onderstreping, icoon, bold, meer dan 3:1 contrastverschil met de andere items of een achtergrondvlak).
Screenshots
Onvoldoende contrast van actieve indicator in desktopnavigatie
De focusindicator (groene rand rondom interactieve elementen) heeft op lichte achtergronden voldoende contrast.
Wanneer het element zich echter bevindt op een donkerdere of complexe achtergrond (zoals de foto in de header), is het contrast onvoldoende.
De gemeten contrastverhouding (bijvoorbeeld #5E7708 op #BBBEBF) bedraagt 2.7:1, wat lager is dan de vereiste 3:1 voor focusindicatoren.
De focusstijl is afhankelijk van één kleur en houdt geen rekening met variërende achtergronden.
Impact op gebruikers
Toetsenbordgebruikers zijn afhankelijk van een duidelijke visuele focusindicator om te zien waar ze zich op de pagina bevinden.
Bij onvoldoende contrast kan de focuspositie moeilijk of niet zichtbaar zijn en raakt de gebruiker de navigatiecontext kwijt. Zo wordt bediening via toetsenbord lastig en dit kan leiden tot desoriëntatie en verminderde bruikbaarheid.
Oplossing
Zorg dat de focusindicator in alle situaties een contrastverhouding van minimaal 3:1 heeft tegenover de aangrenzende achtergrond.
Een mogelijke oplossing is het toepassen van een duo-toon focusstijl, bijvoorbeeld een binnenrand in een lichte kleur gecombineerd met een buitenrand in een donkere kleur.
Hierdoor ontstaat voldoende contrast, ongeacht of de achtergrond licht of donker is.
Screenshots
Kaartcomponenten (klikbare tegels) hebben geen zichtbare focusindicator
Binnen de kaartcomponenten (klikbare tegels) zijn de daadwerkelijke <a>-elementen technisch los in de code geplaatst.
De zichtbare titel en beschrijving van de kaart (bijvoorbeeld “Schouwkaart” of “Peilbesluitkaart”) vallen niet binnen het <a>-element.
De <a>-elementen bevatten geen tekstinhoud, hebben geen aria-label en hebben geen aria-labelledby-verwijzing naar de zichtbare titel. Hierdoor hebben deze links geen toegankelijke naam en worden ze alleen als 'link' aangeduid, met de url afhankelijk van de screenreader.
Impact op gebruikers
Screenreadergebruikers krijgen een aankondiging van een link zonder naam, bijvoorbeeld enkel “link” en de volledige url, afhankelijk van de screenreader.
Oplossing
Zorg dat de link een correcte toegankelijke naam krijgt door één van de volgende oplossingen toe te passen:
Voorkeursoplossing (aanbevolen):
Maak de volledige kaart één klikbare link door het <a>-element om de titel en beschrijving heen te plaatsen.
Op de pagina staan meerdere externe logo-links (bijvoorbeeld NGR, PDOK en AHN).
De <a>-elementen rondom de logo’s hebben als enige toegankelijke naam de tekst “Opens in a new window”
De gebruikte afbeeldingen hebben geen betekenisvolle alt-tekst.
De naam van de organisatie staat visueel onder de afbeelding (bijvoorbeeld “NGR: Centrale vindplaats van geo-informatie”) en kan dienen als alternatieve tekst, maar deze tekst is niet programmatisch gekoppeld aan de bijbehorende link.
Hierdoor ontbreekt een programmatische relatie tussen link en zichtbare naam en is het doel van de link onbekend.
Impact op gebruikers
Screenreadergebruikers horen meerdere keren “Link, Opens in a new window, link” zonder aanvullende informatie.
Oplossing
Zorg dat iedere logo-link een unieke en beschrijvende toegankelijke naam krijgt die overeenkomt met de zichtbare tekst, zodat het doel van de link duidelijk is..
Plaats de zichtbare naam binnen het <a>-element zodat deze automatisch de toegankelijke naam vormt.
Bijvoorbeeld:
<a href="..."> <img src="ngr-logo.png" alt=""> <span>NGR – Centrale vindplaats van geo-informatie</span> </a>
of gebruik aria-labelledby op het <a>-element en verwijs met een ID van de zichtbare tekst.
Bijvoorbeeld:
<a href="..." aria-labelledby="ngr-titel"></a> <p id="ngr-titel">NGR – Centrale vindplaats van geo-informatie</p>
De aanduiding (vertaald) “(opent in nieuw venster)” kan aanvullend worden opgenomen, maar mag niet de enige toegankelijke naam vormen. Daarnaast is het actief openen van links in nieuwe vensters of tabbladen af te raden, omdat dit voor gebruikers verwarring kan opleveren.
Screenshots
Focusindicator bij logo-links deels of volledig afgedekt
Bij de externe logo-links (zoals NGR, PDOK en AHN) wordt bij toetsenbordfocus een focusindicator weergegeven.
Door de positionering van de afbeeldingen en de toegepaste CSS (zoals positionering of z-index) valt het logo gedeeltelijk of volledig over de focusoutline heen.
Hierdoor is de focusindicator slechts deels zichtbaar (geen fout) of volledig niet zichtbaar (wel fout).
Impact op gebruikers
Toetsenbordgebruikers moeten duidelijk kunnen zien welk element focus heeft.
Oplossing
Zorg dat de focusindicator in ieder geval deels zichtbaar is en niet volledig verborgen wordt door andere elementen.
Mogelijke oplossing is om de z-index-structuur zo aan te passen dat de afbeeldingen onder de focusoutline uitkomen.
Screenshots
Focusvolgorde wijkt af van visuele en logische volgorde bij kaart- en linkgroepen
Bij verschillende groepen van kaartcomponenten en externe links wijkt de toetsenbordfocusvolgorde af van de visuele en logische leesvolgorde.
Tijdens navigatie met de Tab-toets maakt de focus kleine sprongen binnen dezelfde groep, waarbij de volgorde niet overeenkomt met de visuele positionering (links naar rechts, boven naar beneden) en de logische leesvolgorde van de content.
De afwijkingen zijn relatief beperkt, maar structureel aanwezig binnen meerdere groepen.
Impact op gebruikers
Toetsenbordgebruikers verwachten dat de focusvolgorde overeenkomt met de visuele volgorde op de pagina. bij vergroting van de site of bij het gebruik van vergrotingssoftware dat de muis/focus volgt, kan verwarring ontstaan als de volgorde afwijkend is.
Hoewel de sprongen klein zijn, kan dit vooral bij grotere groepen kaarten of links desoriënterend werken.
Oplossing
Zorg dat de focusvolgorde overeenkomt met de visuele en logische leesvolgorde van de pagina.
Screenshots
Skiplink om hoofdnavigatie over te slaan ontbreekt
Op de website is geen skiplink aanwezig waarmee gebruikers direct de hoofdnavigatie kunnen overslaan en naar de hoofdinhoud kunnen springen.
Bij het navigeren met de Tab-toets moet eerst door de volledige hoofdnavigatie worden genavigeerd voordat de hoofdcontent bereikbaar is. Er is geen zichtbare of verborgen link aanwezig zoals “Ga naar de hoofdinhoud”.
Impact op gebruikers
Toetsenbordgebruikers en screenreadergebruikers moeten bij elke pagina eerst door herhalende navigatie-elementen navigeren.
Oplossing
Voeg een skiplink toe als eerste focusbare element op de pagina, bijvoorbeeld:
<a href="#main-content" class="skiplink">Ga naar de hoofdinhoud</a>
Zorg dat:
de link zichtbaar wordt bij focus
deze verwijst naar het hoofdcontentgebied (bijv. <main id="main-content">)
de focus daadwerkelijk naar dit element wordt verplaatst
Zorg dat de skiplink consistent op alle pagina’s beschikbaar is.
Op de pagina ontvangen meerdere niet-interactieve elementen toetsenbordfocus. In de kaartjes krijgen de 'kopteksten' bijvoorbeeld focus, maar er zit geen interactie op deze plek. De interactie zit op het link element dat daarna focus krijgt.
Impact op gebruikers
Toetsenbordgebruikers verwachten dat alleen interactieve elementen focus ontvangen.
Oplossing
Zorg dat alleen interactieve elementen toetsenbordfocus kunnen ontvangen.
Verwijder onnodige tabindex="0" van niet-interactieve elementen
Controleer de volledige focusvolgorde op consistentie.
Screenshots
Testplan
Dit zijn de geteste pagina's en componenten die onderdeel zijn van de steekproef.
