Op verzoek van Waterschap Zuiderzeeland is een toegankelijkheidsonderzoek uitgevoerd op de door hun aangeboden website, Zuiderzeeland Arcgis Hubs , om te beoordelen hoe deze voldoet aan de gestelde WCAG norm.
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.
Voor de interactieve kaartweergave geldt een (tijdelijke) uitzondering. Deze zijn daarom niet meegenomen in het onderzoek. Wel is de omliggende content onderzocht, evenals de bereikbaarheid van alternatieven voor de data.
Steekproef:
Voor dit onderzoek is een representatieve steekproef van de scope samengesteld. Zie steekproef lijst
Getoetste basisniveau:
De website is getoetst op geschiktheid voor gangbare browsers en hulpapparatuur.
Technieken:
Alle door W3C uitgebrachte technieken zijn ondersteund en kunnen gebruikt worden.
Het toegankelijkheidsonderzoek voor de ARCGis Hubs-websites is op 27 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 vermeld. 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.
Wanneer het globale navigatiemenu wordt geopend (overlay/modal), wordt de toetsenbordfocus niet binnen dit menu gehouden. Met de Tab-toets kan de focus verplaatsen naar interactieve elementen in de onderliggende pagina, terwijl deze visueel (semi-)verborgen is.
Het menu functioneert visueel als een modal overlay, maar programmatisch wordt de focus niet beperkt tot het actieve dialoogvenster.
Impact op gebruikers
Toetsenbordgebruikers en screenreadergebruikers kunnen:
Onbedoeld navigeren naar content die visueel niet beschikbaar is
De context van het geopende menu kwijtraken
Moeite hebben om te begrijpen welk onderdeel actief is
Bij vergroten van de pagina (vanaf circa 175%) wijzigt de zichtbare paginatitel. De oorspronkelijke titel (“Waterschap Zuiderzeeland”) wordt vervangen door een andere titel (“Hub Home”).
De inhoud van de pagina blijft gelijk, maar de zichtbare titel verandert afhankelijk van de viewportbreedte.
Impact op gebruikers
Gebruikers die inzoomen (bijvoorbeeld slechtzienden) kunnen twijfelen of zij op een andere pagina terecht zijn gekomen of verliezen mogelijk context over de huidige locatie binnen de site.
Oplossing
Zorg dat de zichtbare paginatitel consistent blijft, ongeacht zoomniveau of breakpoint. Zorg ook dat de paginatitel beschrijvend is voor de inhoud van de pagina.
Bij vergroten van de pagina tot 400% (equivalent aan 320 CSS pixels breed) valt bepaalde tekst buiten de viewport. De tekst wordt niet automatisch afgebroken, waardoor informatie verloren gaat.
Impact op gebruikers
Gebruikers met slechtziendheid die sterk inzoomen, kunnen mogelijk langere woorden niet lezen als deze buiten de viewport vallen.
Oplossing
Zorg dat tekst correct afbreekt binnen de beschikbare breedte, bijvoorbeeld door:
Gebruik van flexibele lay-out (responsive design)
Toepassen van CSS zoals word-break, overflow-wrap of hyphens waar nodig
Vermijden van vaste breedtes die herflow blokkeren
Alle content moet beschikbaar blijven en mag daarbij geen horizontaal scrollen leesbaar veroorzaken (uitgezonderd bepaalde tweedimensionale content zoals kaarten).
Screenshots
Onderdelen in afwijkende taal zonder juiste taalmarkering
De pagina is gemarkeerd met lang="nl". Verschillende interface-onderdelen worden echter vanuit het systeem in het Engels weergegeven (bijvoorbeeld onderdelen van het menu of andere UI-elementen).
Deze Engelstalige teksten zijn niet gemarkeerd met een lang="en" attribuut. De taal van deze onderdelen wijkt dus af van de primaire paginataal, zonder dat dit programmatisch is vastgelegd.
Gebruikers hebben geen directe controle over deze taalweergave, anders dan via algemene browser- of besturingssysteeminstellingen.
Impact op gebruikers
Screenreadergebruikers krijgen Engelstalige tekst uitgesproken met Nederlandse uitspraak
Oplossing
Zorg dat de weergegeven taal consistent is met de ingestelde paginataal dat afwijkende taalonderdelen correct worden gemarkeerd met een passend lang-attribuut (bijvoorbeeld lang="en")
Waar de taal dynamisch wordt bepaald, moet de taalmarkering automatisch meewisselen.
Overweeg een handmatige vertaaloptie te bieden, zodat mensen zelf de keuze behouden, maar bovenal een gebruikerservaring ondervinden waar de hele taal (en niet alleen onderdelen van de interface) dezelfde taal heeft.
Screenshots
Tekst wordt afgekapt met ellipsis bij verschillende schermbreedtes
Bij verschillende breakpoints wordt tekst binnen kaartcomponenten afgekapt met een ellipsis (“…”). Dit gebeurt onder andere bij titels en beschrijvingen.
De tekst wordt begrensd door containers met een vaste hoogte of beperkte ruimte, waardoor inhoud niet volledig zichtbaar is en niet automatisch naar een nieuwe regel kan afbreken.
Hierdoor gaat inhoud verloren of is deze niet voor iedereen even beschikbaar.
Impact op gebruikers
Gebruikers kunnen over schillende schermen (bijv bijj vergroting (200–400%), kleinere schermen en mobiele weergave, maar ook op desktop) niet altijd alle informatie lezen.
Wanneer tekst visueel wordt afgekapt zonder alternatieve toegang tot de volledige inhoud, is informatie feitelijk niet beschikbaar.
Oplossing
Zorg dat tekst volledig zichtbaar blijft en kan doorlopen naar meerdere regels:
Vermijd vaste hoogtes voor tekstcontainers
Verwijder overflow: hidden in combinatie met text-overflow: ellipsis voor informatieve tekst
Sta automatische regelafbreking toe
Indien verkorting noodzakelijk is, bied dan een toegankelijke manier om de volledige tekst te tonen (bijvoorbeeld uitklapbaar of volledig zichtbaar bij focus of op detailpagina).
Het logo bovenaan de pagina is geplaatst binnen een link die verwijst naar de homepage. De afbeelding mis echter een verplicht alt attribuut, waardoor de link geen toegankelijke naam heeft.
Daardoor ontbreekt een programmatisch bepaalde naam die het doel van de link en de betekenis van het logo beschrijft.
Impact op gebruikers
Screenreadergebruikers horen een nietszeggende aankondiging van de link maar weten niet dat dit een link naar de homepage betreft. De link is daarmee niet begrijpelijk of niet bruikbaar voor gebruikers van hulptechnologie.
Oplossing
Zorg dat de link een duidelijke toegankelijke naam heeft, bijvoorbeeld door een beschrijvende alt-tekst toe te voegen aan de afbeelding, zoals: alt="Waterschap Zuiderzeeland – naar homepage" .
Screenshots
Accordion-knoppen verwijzen naar dezelfde aria-controls ID
De accordion-knoppen bevatten aria-expanded en aria-controls attributen. De waarde van aria-controls verwijst echter bij alle knoppen naar dezelfde ID.
Ook het uitklapbare content-element gebruikt allemaal diezelfde ID. Hierdoor is er geen unieke relatie tussen een specifieke knop en het bijbehorende contentpaneel.
De ID-waarden zijn daarmee niet uniek binnen de pagina.
Impact op gebruikers
Screenreadergebruikers kunnen niet betrouwbaar bepalen welk paneel door welke knop wordt aangestuurd
Oplossing
Zorg dat:
Elke accordion-knop een unieke aria-controls waarde heeft
Elk uitklapbaar paneel een unieke id heeft
De aria-controls waarde exact verwijst naar het bijbehorende paneel
aria-expanded correct wordt bijgewerkt bij openen en sluiten
Volg bij voorkeur het WAI-ARIA accordion pattern voor correcte implementatie.
De groene focusindicator (kleur: #96BF0D) heeft onvoldoende contrast tegenover witte achtergronden (#FFFFFF). De gemeten contrastverhouding is circa 2.2:1.
Hierdoor voldoet de focusindicator niet aan de minimale contrasteis.
Opmerkelijk is dat er veel verschillende indicatoren worden gebruikt. Alleen in het menu zijn al 3 varianten aanwezig: de groene, een gestippelde en een combinatie van de twee.
Impact op gebruikers
Toetsenbordgebruikers en gebruikers met een visuele beperking kunnen hierdoor de focuspositie moeilijk of niet waarnemen, en over het hoofd zien welk element actief is. Dit belemmert effectieve toetsenbordnavigatie.
Oplossing
Zorg dat de focusindicator een contrastverhouding van minimaal 3:1 heeft tegenover de aangrenzende kleuren.
In het zijmenu worden iconen weergegeven in de groene kleur (#96BF0D) op een witte achtergrond (#FFFFFF). De gemeten contrastverhouding bedraagt circa 2.2:1.
Deze iconen functioneren als interactieve elementen (bijvoorbeeld voor volgen, favorieten en delen), maar voldoen niet aan de minimale contrasteis van 3:1 voor non-tekst elementen.
Impact op gebruikers
Gebruikers met een visuele beperking of verminderd contrastzicht kunnen de iconen moeilijk onderscheiden van de achtergrond en de functionaliteit over het hoofd zien.
Oplossing
Zorg dat iconen die onderdeel zijn van de gebruikersinterface een contrastverhouding van minimaal 3:1 hebben ten opzichte van aangrenzende kleuren.
Bij vergroten van de pagina vanaf circa 150% wordt de datasetweergave functioneel onbruikbaar. Interface-tekst valt weg en vaste panelen nemen een steeds groter deel van de beschikbare ruimte in beslag.
Vanaf ongeveer 175% vergroting blijft slechts een zeer beperkt deel van de oorspronkelijke werkruimte zichtbaar. Bij verdere vergroting wordt de beschikbare ruimte nog kleiner, waardoor de dataset niet meer effectief te gebruiken is.
Impact op gebruikers
De kernfunctionaliteit van de dataset is niet bruikbaar bij vergroting.
Oplossing
Zorg dat de datasetweergave bruikbaar blijft bij minimaal 200% tekstvergroting en bij 400% reflow. Laat panelen onder elkaar stapelen bij kleinere viewportbreedtes en zorg dat tekst niet verdwijnt of overlapt.
Beperk permanente zijpanelen of maak deze inklapbaar
De interface moet functioneel bruikbaar blijven zonder verlies van informatie of bediening. Dit geldt voor de interface zelf, om bijvoorbeeld bij de tabelweergave te kunnen komen.
Het onderzochte PDF-document bevat geen tags-structuur. Het document is niet getagd en bevat geen semantische markering van koppen, paragrafen, lijsten of andere structurele elementen. Hierdoor ontbreekt een programmatisch vastgelegde leesstructuur.
Impact op gebruikers
Screenreadergebruikers kunnen problemen hebben om de content sowieso voor te laten lezen. Als dat wel werkt, hebben ze meestal geen logische leesvolgorde en kunnen ze niet navigeren via koppen of andere structuren. Daardoor kunnen ze niet of nauwelijks de inhoud effectief begrijpen.
Het document is daarmee in de praktijk niet toegankelijk voor gebruikers van hulptechnologie.
Oplossing
Voorzie het PDF-document van een correcte tags-structuur. Gebruik een juiste documentstructuur (koppen, paragrafen, lijsten, tabellen) en zorg voor een logische leesvolgorde.
Controleer en corrigeer de tagstructuur in bijvoorbeeld Adobe Acrobat Pro. Het kan ook zijn dat het ArcGic systeem de informatie uit PDFs stript.
Het PDF-document bevat geen ingestelde documenttitel in de documenteigenschappen. Hierdoor wordt bij openen van het document geen beschrijvende titel weergegeven.
Impact op gebruikers
Voor screenreadergebruikers wordt zonder titel de bestandsnaam gebruikt, Ze horen bij het openen dan geen duidelijke documenttitel en kunnen het document moeilijk onderscheiden van andere open documenten. Dit vermindert de begrijpelijkheid en herkenbaarheid van het document.
Oplossing
Stel een duidelijke, beschrijvende documenttitel in via de documenteigenschappen van het PDF-bestand.
Zorg dat de titel de inhoud van het document correct weergeeft.
Op meerdere pagina’s worden groene knoppen toegepast (kleur: #96BF0D) met witte tekst (#FFFFFF), bijvoorbeeld bij de knop “Verkennen”.
Er zijn ook knoppen met de omgekeerde combinatie: witte achtergrond met groene tekst. Hiervoor geldt hetzelfde.
De gemeten contrastverhouding tussen de witte tekst en de groene achtergrond bedraagt circa 2.2:1. Dit voldoet niet aan de minimale contrasteis van 4.5:1 voor normale tekst.
Impact op gebruikers
Gebruikers met een visuele beperking of verminderd contrastzicht kunnen de knoptekst moeilijk lezen en knoppen minder snel herkennen als interactieve elementen. Dit heeft directe impact op de bruikbaarheid van primaire navigatie- en actie-elementen.
Oplossing
Zorg dat tekst op knoppen een contrastverhouding heeft van minimaal:
4.5:1 voor reguliere tekst
3:1 voor grote tekst (≥ 18pt of ≥ 14pt vet)
Screenshots
Visuele koppen zijn niet semantisch als kop gemarkeerd
Er wordt tekst visueel gepresenteerd als kop (bijvoorbeeld door grotere lettergrootte of vetgedrukte stijl), maar deze is in de HTML niet opgemaakt met een kop-element (h1–h6).
In plaats daarvan worden bijvoorbeeld div- of span-elementen gebruikt zonder semantische betekenis.
Impact op gebruikers
Screenreadergebruikers kunnen niet volledige navigeren via koppenstructuur en beperkt overzicht krijgen van de paginaopbouw. Hierdoor wordt de pagina minder goed scanbaar en minder begrijpelijk.
Oplossing
Gebruik semantisch correcte kop-elementen (h1–h6) voor alle tekst die functioneert als kop.
Op de pagina worden kopniveaus niet altijd logisch toegepast.
Bijvoorbeeld: de kop “Contact” in de footer is opgemaakt als h4, terwijl deze visueel en inhoudelijk een nieuwe hoofdsectie start. Door het gebruik van h4 valt deze kop in de semantische structuur onder de voorgaande h3 (bijvoorbeeld de titel van een kaartcomponent). Hierdoor ontstaat een onjuiste hiërarchische relatie tussen inhoudssecties.
Impact op gebruikers
Screenreadergebruikers kunnen niet volledige navigeren via koppenstructuur en beperkt overzicht krijgen van de paginaopbouw. Hierdoor wordt de pagina minder goed scanbaar en minder begrijpelijk.
Oplossing
Pas een logische en consistente koppenhiërarchie toe:
Gebruik kopniveaus op basis van inhoudelijke structuur, niet op basis van visuele styling
Zorg dat nieuwe hoofdsecties starten op het juiste niveau (bijvoorbeeld h2)
Vermijd het overslaan of kunstmatig verlagen/verhogen van niveaus voor vormgeving. De visuele opmaak kan onafhankelijk via CSS worden geregeld.
Screenshots
Linkdoel “Deze kaart delen” is niet contextspecifiek
Er is een knop aanwezig met de tekst “Deze kaart delen”. De toegankelijke naam van de knop verwijst niet naar de specifieke kaart waarop de actie betrekking heeft.
Hoewel visueel soms (niet altijd) duidelijk is om welke 'kaart' het gaat, bijvoorbeeld door positionering op de pagina, ontbreekt deze context in de programmatisch bepaalde naam van de knop.
Impact op gebruikers
Voor screenreadergebruikers is niet duidelijk welke kaart precies gedeeld kan worden (de knop wordt bij dynamisch tonen wel aangekonidg via aria-live).
Oplossing
Maak de toegankelijke naam van de knop contextspecifiek en zorg dat de toegankelijke naam zelfstandig begrijpelijk is zonder afhankelijk te zijn van visuele positionering.
Koppel bijvoorbeeld extra informatie via aria-labelledby om te verwijzen naar de titel van de kaart. Een screenreadergebruiker hoort dan "deze kaart delen, [naam kaart]"
Screenshots
Decoratieve thumbnail afbeelding dataset heeft informatieve alt-tekst
De getoonde afbeelding (thumbnail van de dataset) bevat een alt-attribuut met de waarde: alt="zzl Bodemval thumbnail".
De afbeelding voegt geen aanvullende inhoudelijke informatie toe ten opzichte van de omringende tekst (titel en context van de dataset). De afbeelding kan daarom als decoratief worden beschouwd.
Impact op gebruikers
Door de huidige alt-tekst wordt echter overbodige of niet-informatieve content voorgelezen.
Oplossing
Indien de afbeelding geen inhoudelijke meerwaarde heeft, gebruik een leeg alt-attribuut: alt="" en verberg de afbeelding zo voor hulptechnologie. Alleen wanneer de afbeelding betekenisvolle, unieke informatie bevat, dient een beschrijvende alt-tekst te worden toegepast.
Screenshots
Focus- en leesvolgorde wijkt af van visuele volgorde
De programmatische volgorde van de content (DOM-volgorde en focusvolgorde) komt niet overeen met de visuele presentatie op de pagina.
Bij toetsenbordnavigatie wordt eerst door een groot deel van de linkerkolom genavigeerd, waarna de content van de rechterkolom volgt. De tags onderaan de linkerkolom worden initieel alleen overgeslagen en komen later pas aan bod.
Hierdoor ontstaat een verschil tussen wat visueel wordt gepresenteerd en de volgorde waarin content wordt aangeboden aan hulptechnologie.
Impact op gebruikers
De afwijkende volgorde kan verwarring en desoriëntatie veroorzaken, zeker als mensen gebruikmaken van inzoomen of inzoomsoftware die de cursor volgt.
Oplossing
Zorg dat de DOM-volgorde overeenkomt met de visuele volgorde.
Binnen de overzichtspagina met kaartcomponenten ontvangen volledige kaarttegels (de container van een kaartitem) toetsenbordfocus, terwijl deze zelf geen interactieve functie hebben.
Binnen elke tegel zijn reeds interactieve elementen aanwezig, namelijk de titel (link) en de knop “Verkennen” (link naar dezelfde bestemming). Naast deze twee focusbare elementen is er een extra focusstop op de gehele kaartcontainer, zonder dat deze een eigen actie of functie heeft.
Impact op gebruikers
Toetsenbordgebruikers moeten onnodige extra focusstops doorlopen en krijgen geen duidelijke feedback wat er gebeurt bij activatie. Hierdoor kunnen ze in verwarring raken over welk element daadwerkelijk interactief is. Dit maakt de navigatie minder efficiënt en minder voorspelbaar.
Oplossing
Zorg dat alleen interactieve elementen focusbaar zijn. Een oplossing is om de gehele tegel 1 link te maken, waarbij de titel en de beschrijvende tekst worden voorgelezen. de 'knop' kan blijven visueel blijven, maar kan voor screenreaders verborgen worden. Er kan ook gekozen owrden om alleen de titel een link te maken.
Zo wordt de interactie vereenvoudigd voor screenreaders maar blijft hij verder gelijk.
Screenshots
Testplan
Dit zijn de geteste pagina's en componenten die onderdeel zijn van de steekproef.
