Zuiderzeeland - Kaartverhalen - v2026.1 — Tabelweergave

Op de pagina staat een knop met een icoon (handje) die een popup met instructies opent.

De knop bevat geen zichtbare tekst en heeft geen toegankelijk label. De afbeelding binnen de knop heeft een leeg alt-attribuut. Hierdoor heeft de knop geen toegankelijke naam. 

Voor hulpsoftware wordt het element alleen als “knop” aangekondigd, zonder verdere toelichting. is is wel enige uitleg in de tekst ernaast, maar er is geen directe relatie tussen deze tekst en de knop.

Screenreadergebruikers weten niet wat deze knop doet.

Zij kunnen niet bepalen dat hiermee instructies voor het gebruik van de kaart worden geopend. Dit maakt de functionaliteit moeilijk vindbaar en beperkt bruikbaar.

Geef de knop een duidelijke, toegankelijke naam die het doel beschrijft, bijvoorbeeld: “Toon instructies voor gebruik van de kaart”.

De ingevoegde kaartapplicaties op de pagina’s hebben allemaal dezelfde algemene groepsnaam, zoals “Map” of “Kaart”.

Deze naam wordt gebruikt in combinatie met role="application" en fungeert als label voor de volledige kaart. De naam beschrijft echter niet de inhoud of het doel van de specifieke kaart.

Screenreadergebruikers horen bij iedere kaart alleen “Map” of “Kaart, application”. Hierdoor ontbreekt context, zeker met meerdere kaarten op een pagina.

Geef iedere kaart een unieke en beschrijvende toegankelijke naam, bijvoorbeeld via aria-label of aria-labelledby, waarin het onderwerp van de kaart wordt benoemd.

Notitie: Gebruik role="application" alleen als dit strikt noodzakelijk is en volledig correct wordt ondersteund. In de meeste gevallen volstaat een semantische container met een duidelijke naam.

De popup (bijv. met instructies) bevat een sluitknop met een kruis-icoon (SVG).

De SVG bevat geen title-element en de knop zelf heeft geen toegankelijke naam, bijvoorbeeld via een aria-label. Hierdoor heeft de knop geen programmatisch bepaalde naam.

Voor hulpsoftware wordt alleen “knop” aangekondigd, zonder uitleg van de functie.

Screenreadergebruikers weten niet dat deze knop de popup sluit.

Geef de knop een duidelijke toegankelijke naam, bijvoorbeeld “Sluiten”.

Dit kan via een zichtbaar label of via aria-label="Sluiten".
Als de SVG wordt gebruikt voor de naam, zorg dan voor een correct title-element en een juiste koppeling.

Op de pagina worden aanvullende illustratieve afbeeldingen gebruikt met een alt-tekst. De alt-teksten beginnen met formuleringen zoals:

“Afbeelding: Illustratieve afbeelding: Luchtfoto van …”

Een screenreader kondigt zelf al aan dat het om een afbeelding gaat. Door dit ook in de alt-tekst te herhalen, wordt meerdere keren achter elkaar vermeld dat het om een afbeelding gaat.

De beschrijving van de inhoud is op zichzelf passend, maar de inleidende aanduiding is overbodig.

Screenreadergebruikers horen onnodige herhaling.

Dit maakt de ervaring omslachtiger en minder prettig. De extra woorden voegen geen betekenis toe en vertragen het navigeren door de pagina.

Verwijder woorden zoals “Afbeelding:” of “Illustratieve afbeelding:” uit de alt-tekst.

Begin direct met een korte, inhoudelijke beschrijving, bijvoorbeeld:
“Luchtfoto van een klein dorp omringd door landbouwgrond.”

Veel afbeeldingen op de website zijn zorgvuldig voorzien van een passende alt-tekst, maar soms is een afbeelding hierop een uitzondering.

Zo wordt een informatieve afbeelding gebruikt die inhoudelijke informatie overbrengt, zoals bodemlagen en grondwaterstanden. Deze afbeelding heeft een leeg alt-attribuut en er is geen beschrijving in de omliggende tekst aanwezig. Hierdoor is de informatie alleen visueel beschikbaar.

Soms zijn er ook foto's die niet direct informatie toevoegen. Omdat de trend op de website is om wel goede alt teksten toe te voegen, is het advies dat voor deze afbeeldingen ook te doen om dingen consistent te houden. 

Screenreadergebruikers krijgen geen toegang tot de informatie uit de afbeelding.

De meeste screenreader gebruikers zijn niet volledig blind en kunnen mogelijk nog wel de afbeelding, maar niet de details, waarnemen.

Voeg een passend tekstalternatief toe dat de essentie van de afbeelding beschrijft, zoals bij de andere afbeeldingen gedaan wordt. Controller of alle benodigde afbeeldingen op de site voorzien zijn.

Een afbeelding wordt gebruikt als link en opent een grotere versie in een overlay.

Zowel de kleine afbeelding, als de vergrote versie, hebben een leeg alt-attribuut (alt=""). Hierdoor worden de afbeeldingen genegeerd door hulpsoftware.

Omdat de link alleen uit een afbeelding bestaat en geen toegankelijke naam heeft, wordt deze door screenreaders enkel aangekondigd als “link”. In de overlay is, volgens hulpsoftware, alleen de sluitknop aanwezig. De vergrote afbeelding zelf is niet toegankelijk.

Screenreadergebruikers weten niet wat de link doet of wat er wordt geopend.

In de overlay krijgen zij geen inhoud te horen en missen zij volledig de informatie uit de afbeelding. Dit maakt de functionaliteit feitelijk onbruikbaar.

Geef de link een duidelijke toegankelijke naam die het doel beschrijft en ene samenvatting voor de afbeelding.

Voor de vergrote afbeelding moet een passend tekstalternatief worden toegevoegd dat de inhoud of functie beschrijft.

In de hero-afbeelding wordt het logo van Waterschap Zuiderzeeland opnieuw getoond. Het logo in de header heeft al een correcte alt-tekst.

De hero-afbeelding bevat daarnaast een uitgebreide alt-tekst met een waarschuwing voor screenreadergebruikers over de toegankelijkheid van kaarten op de website. Deze informatie hoort niet bij de afbeelding zelf en maakt de alt-tekst onnodig lang en inhoudelijk onjuist.

De afbeelding fungeert hier als decoratief element.

Screenreadergebruikers krijgen dubbele en mogelijk verwarrende informatie te horen, terwijl de tekst met alle goede intenties is toegevoegd.

De alt-tekst beschrijft niet alleen de afbeelding, maar bevat ook algemene website-informatie. Hierdoor wordt navigeren trager en minder duidelijk. Belangrijke informatie over toegankelijkheidsbeperkingen staat bovendien niet op een logische plek op de pagina.

Markeer de hero-afbeelding als decoratief met alt="".

Plaats de informatie over de beperkte toegankelijkheid van kaarten als reguliere (eventueel visueel verborgen) tekst op de pagina, of op een aparte toegankelijkheidspagina. Zorg dat deze informatie logisch vindbaar is voor alle gebruikers.

Op de pagina's wordt visueel duidelijke structuur aangebracht met grote titels en tussenkoppen, zoals bijvoorbeeld “Water en bodem sturend”, “Kaartverhalen” en “Toekomstbestendige inrichting”.

In de HTML-code worden deze teksten echter niet als koppen (h1–h6) gemarkeerd. De structuur is alleen visueel aanwezig en niet programmatisch vastgelegd.

Hierdoor is het ook niet mogelijk om een goede betekenisvolle volgorde te bepalen, omdat technische structuur ontbreekt..

Screenreadergebruikers kunnen niet navigeren op koppen. Zij missen overzicht en kunnen niet snel door de pagina springen. Dit maakt het lastiger om de inhoud te scannen en te begrijpen.

Ook andere hulpsoftware kan de structuur niet correct interpreteren.

Gebruik semantische kop-elementen (h1–h6) om de visuele structuur ook programmatisch vast te leggen.

Zorg voor een logische hiërarchie, met één h1 voor de hoofdtitel en opvolgende niveaus voor tussenkoppen.

Het document 210707-watervisie-waterschap-zuiderzeeland.pdf bevat geen tags.

Hierdoor ontbreekt een programmatische structuur met koppen, paragrafen, lijsten en andere semantische elementen.

Screenreadergebruikers kunnen het document niet logisch navigeren. De leesvolgorde is niet betrouwbaar en gebruikers kunnen niet springen tussen koppen of andere structuuronderdelen. Dit maakt het document moeilijk of niet bruikbaar.

Voorzie het PDF-document van een correcte tag-structuur.

Zorg voor:

• Een logische koppenhiërarchie
• Correct gemarkeerde paragrafen en lijsten
• Een juiste leesvolgorde
• Correct gemarkeerde afbeeldingen met alt-tekst

Controleer het document na aanpassing met een PDF-toegankelijkheidscontrole, bijvoorbeeld via PAC of Adobe Acrobat Pro

De hoofdnavigatie is opgebouwd met een ARIA-structuur waarbij role="menubar" wordt gebruikt.

Een menubar-rol is bedoeld voor applicatie-achtige menu’s met specifiek toetsenbordgedrag (zoals pijltjestoetsnavigatie). De hoofdnavigatie op deze website functioneert als een reguliere lijst met links en niet als een applicatiemenu.

De gebruikte ARIA-rol komt daarom niet overeen met het feitelijke gedrag van de navigatie.

Screenreadergebruikers krijgen afwijkend of onverwacht gedrag te horen.

Zij verwachten bij een menubar bediening met pijltjestoetsen en specifieke interactiepatronen. Als dit gedrag niet correct is geïmplementeerd, kan navigatie verwarrend of moeilijk bruikbaar worden.

Gebruik voor de hoofdnavigatie reguliere semantische HTML, zoals een <nav>-element met een lijst (ul / li) en links.

Verwijder role="menubar" en de onderliggende rollen role="menuitem"

Binnen de blauwe vlakken worden links weergegeven in groen naast witte tekst.

Het onderscheid tussen de gewone tekst (#FFFFFF) en links (#97BF0C) wordt uitsluitend met kleur gemaakt. Er wordt geen extra visuele aanduiding gebruikt, zoals onderstreping of een andere stijl of een contrast groter dan 3:1.

Gebruikers met kleurenblindheid of een verminderd contrastvermogen kunnen links niet goed onderscheiden van gewone tekst.

Gebruik naast kleur altijd een extra visuele indicator, zoals een onderstreping of een contrastverschil van minimaal 3:1 met de gewone tekst.

Zorg daarnaast dat de linkkleur voldoende contrast heeft tegenover de achtergrond (minimaal 4,5:1 voor normale tekst of 3:1 voor grote tekst). Dit is ook opgenomen als los issue.

In het mobiele menu wordt de actieve pagina weergegeven met een groene achtergrond en witte tekst.

De gemeten contrastverhouding tussen de witte tekst (#FFFFFF) en de groene achtergrond (#97BF0C) is ongeveer 2,1:1. Dit is onvoldoende voor grote of dikgedrukte tekst, waar minimaal 3:1 vereist is.

De kleurwisseling van blauw naar wit als aanduiding van de actieve status is op zichzelf voldoende onderscheidend, maar het contrast tussen tekst en achtergrond voldoet niet.

Gebruikers met een visuele beperking kunnen de actieve pagina moeilijk lezen of herkennen.

De status van de actieve pagina is daardoor minder duidelijk en de leesbaarheid is beperkt.

Verhoog het contrast tussen tekst en achtergrond tot minimaal 3:1 voor grote tekst.

Dit kan door de groene achtergrond donkerder te maken of door een andere tekstkleur te gebruiken met voldoende contrast. Zorg er bij dat laatste wel voor dat er een kleurverschil met een ratio van minimaal 3:1 overblijft.

Controleer na aanpassing opnieuw de contrastverhouding om te bevestigen dat deze minimaal 3:1 bedraagt voor zowel de leesbaarheid van de tekst als het het verschil tussen actief en niet-actief.

Op de pagina wordt blauwe tekst (#0162A1) gebruikt op een lichtgroene achtergrond (#BFD472).

De gemeten contrastverhouding is ongeveer 3,9:1. Dit is onvoldoende voor normale tekst, waarvoor minimaal 4,5:1 vereist is. Alleen voor grote tekst voldoet deze combinatie.

Gebruikers met een verminderd zicht kunnen de tekst moeilijk lezen.

Voor gewone tekst is het contrast te laag, waardoor de leesbaarheid afneemt, vooral bij kleinere lettergroottes of minder gunstige lichtomstandigheden.

Pas de kleur van de tekst of de achtergrond aan zodat de contrastverhouding minimaal 4,5:1 bedraagt voor normale tekst.

Bij vergroten van de pagina (reflow) wordt de tekst in de paginanavigatie, zoals “Volgende pagina” en “Terug naar …”, afgekapt met puntjes. De inhoud blijft technisch aanwezig, maar is visueel niet volledig leesbaar.

Daarnaast verschuift bij meer dan 200% zoom de link “Volgende pagina” deels over het lichtgroene vlak. Hierdoor ontstaat onvoldoende contrast tussen tekst en achtergrond.

Gebruikers die inzoomen om tekst beter te kunnen lezen, krijgen te maken met afgekorte of slecht leesbare navigatie. De betekenis van de link kan onduidelijk worden. Door het verminderde contrast kan de link moeilijk leesbaar zijn.

Zorg dat tekst niet wordt afgekapt. Laat de navigatietekst afbreken naar een nieuwe regel of geef voldoende ruimte zodat de volledige linktekst zichtbaar blijft.

Voorkom dat tekst over verschillende achtergrondkleuren heen valt of zorg dat het contrast in alle weergaven minimaal 4,5:1 bedraagt voor normale tekst.

Op de pagina wordt groene tekst (#97BF0C) gebruikt op een blauwe achtergrond (#008AC8).

De gemeten contrastverhouding is ongeveer 1,8:1. Dit is onvoldoende voor zowel normale als grote tekst. De tekst voldoet niet aan de minimale contrastvereisten.

Gebruikers met een visuele beperking kunnen de tekst moeilijk lezen. Bij fel licht of op kleinere schermen kan de tekst zelfs volledig wegvallen tegen de achtergrond.

Pas de kleur van de tekst of de achtergrond aan zodat de contrastverhouding minimaal 4,5:1 bedraagt voor normale tekst en minimaal 3:1 voor grote tekst.

Controleer na aanpassing opnieuw de contrastverhouding.

In de groene knop (bijvoorbeeld “Bronnen”) wordt witte tekst (#F0F0F0) gebruikt op een groene achtergrond (#97BF0C).

De gemeten contrastverhouding is ongeveer 1,9:1. Dit is onvoldoende voor zowel normale als grote tekst.

Gebruikers met een visuele beperking kunnen de tekst in de knop moeilijk lezen.

Pas de kleur van de tekst of de achtergrond aan, zodat de contrastverhouding minimaal 4,5:1 bedraagt voor normale tekst.

De groene kleur van de knop geeft ook onvoldoende contrast met de blauwe achtergrond, maar door het gebruik van de lichtgrijze lijn als rand van de knop, die wel (net) voldoende contrast biedt, keuren we dit niet af. 

Ons advies zou wel zijn om te overwegen de knop van een andere kleur te voorzien, zodat zowel de tekst voldoet als dat ook de knop beter zichtbaar wordt op de achtergrond.

De focusindicator wordt weergegeven als een donkergroene rand (#5E7708) rondom een link.

Deze focusstijl wordt o.a. getoond op een blauwe achtergrond (#008AC8). De gemeten contrastverhouding is 1,3:1. Dit is onvoldoende om de focus duidelijk zichtbaar te maken.

Toetsenbordgebruikers kunnen moeilijk zien welk element focus heeft.

Zorg dat de focusindicator een contrastverhouding van minimaal 3:1 heeft tegenover de aangrenzende achtergrond.

Gebruik bijvoorbeeld een lichtere of contrasterende kleur, of voeg een duidelijke outline toe die goed zichtbaar is op alle achtergronden.

Controleer de focusstijl op alle kleurvlakken binnen de website. Bij wisselende kleurvakken is het hebben van een duo-toon indicator vaak een praktische oplossing, waarbij de twee gebruikte kleuren in de indicator zelf al voldoende contrast met elkaar hebben.

Bij het verhogen van de tekstafstand (line-height, letter-spacing, word-spacing en alinea-afstand) valt op sommige plekken tekst buiten de container.

Hierdoor overlapt tekst met andere elementen of wordt deze deels afgesneden. De inhoud blijft technisch aanwezig, maar is visueel minder goed leesbaar.

Gebruikers die aangepaste tekstafstand nodig hebben om beter te kunnen lezen, krijgen te maken met overlappende of slecht leesbare tekst. Dit kan het begrijpen van de inhoud bemoeilijken en maakt de pagina minder bruikbaar.

Zorg dat containers flexibel meegroeien met de tekst.

Gebruik geen vaste hoogtes en voorkom dat tekst wordt verborgen via overflow: hidden. Test de pagina met verhoogde tekstafstand volgens WCAG-richtlijnen en controleer dat alle tekst volledig zichtbaar en leesbaar blijft.

Dit gaat tijdens testen overal goed, behalve bij de 'hero' op de openingspagina, omdat hier een vaste height: 500px; is ingesteld.

De popup met instructies bevat een animatie die automatisch afspeelt. Deze animatie is een GIF-bestand.

Er is geen mogelijkheid om de animatie te pauzeren, te stoppen of stil te zetten. De enige manier om de animatie te beëindigen is het sluiten van de popup. Daarmee verdwijnt ook de bijbehorende uitleg.

Gebruikers die gevoelig zijn voor beweging kunnen hinder of afleiding ervaren.

Omdat de animatie niet gepauzeerd kan worden, kunnen zij de instructies mogelijk niet rustig lezen of verwerken. Het sluiten van de popup is geen goed alternatief, omdat dan ook de inhoud niet meer beschikbaar is.

Bied een mogelijkheid om de animatie te pauzeren of te stoppen.

Een betere oplossing is om geen automatisch bewegende GIF te gebruiken, maar een statische afbeelding of een animatie die alleen start na interactie.

Gebruik daarbij / daarnaast prefers-reduced-motion media queries om een alternatieve, niet-geanimeerde versie te tonen voor gebruikers die in hun besturingssysteem hebben aangegeven minder beweging te willen zien.

Het document 210707-watervisie-waterschap-zuiderzeeland.pdf bevat geen ingestelde documenttitel in de documenteigenschappen.

Bij openen in een PDF-lezer wordt geen betekenisvolle titel weergegeven in de titelbalk, maar de bestandsnaam.

Gebruikers van screenreaders krijgen geen duidelijke documenttitel te horen. De bestandsnaam is makkelijk(er) aan te passen en wordt daarom niet als betrouwbare bron gezien in deze context.

Ook bij meerdere geopende documenten is het moeilijk te herkennen welk document actief is. Dit vermindert de oriëntatie en bruikbaarheid.

Stel in de documenteigenschappen een duidelijke en beschrijvende documenttitel in.

Zorg dat de titel overeenkomt met de inhoud van het document en dat de PDF-instelling “Documenttitel weergeven in plaats van bestandsnaam” is geactiveerd.

De interactieve kaart bevat verschillende bedieningsknoppen, zoals zoom, lagen en volledig scherm.

Bij navigeren met het toetsenbord verloopt de focusvolgorde niet logisch. De focus springt heen en weer tussen knoppen op verschillende posities in de kaartinterface.

Hoewel de kaartinhoud zelf buiten scope valt, wordt de omliggende bediening wel beoordeeld.

Toetsenbordgebruikers kunnen moeilijk voorspellen waar de focus naartoe gaat. Zeker als er ook ingezoomd wordt, zal de interface mogelijk heen en weer springen.

Zorg dat de focusvolgorde overeenkomt met de visuele volgorde van de bedieningselementen.

De focus moet op Nederlandse sites de logische volgorde van boven naar beneden en van links naar rechts verlopen, zonder onverwachte sprongen.

De knop met de zichtbare tekst “Volgende pagina” heeft een aria-label met de titel van de volgende pagina, bijvoorbeeld “De ondergrond klinkt door”.

Hierdoor wordt de zichtbare tekst overschreven. In de toegankelijke naam komt “Volgende pagina” niet meer voor.

De programmatisch bepaalde naam wijkt dus af van wat visueel wordt getoond.

De knop "Terug naar boven" en "Vorige pagina" hebben hetzelfde probleem, omdat het aria-label daar overschrijft met de waarde "terug naar het begin".

Dit kan verwarrend zijn, vooral voor gebruikers van spraakbediening. Zij kunnen de knop niet activeren met de zichtbare tekst, omdat die niet voorkomt in de toegankelijke naam.

Zorg dat de zichtbare tekst onderdeel blijft van de toegankelijke naam.

Bijvoorbeeld: “Volgende pagina – De ondergrond klinkt door”

Gebruik bij voorkeur de zichtbare tekst als basis en voeg extra context toe via aria-label of verborgen tekst, zonder de zichtbare tekst volledig te overschrijven.

De pagina is gemarkeerd met lang="nl".

Sommige knoppen, zoals de knop om het mobiele menu te sluiten, krijgen echter automatisch een Engelse naam op basis van de taal van de browser. Bijvoorbeeld: “close”.

Deze vertaling gebeurt zonder dat de gebruiker de taal van de website wijzigt. De Engelse tekst wordt niet gemarkeerd met een juiste taalcode.

Screenreadergebruikers krijgen Engelse woorden te horen binnen een Nederlandse pagina.

Dit kan verkeerd worden uitgesproken en zorgt voor verwarring. Ook is voor gebruikers niet duidelijk waarom onderdelen ineens in een andere taal verschijnen.

Interface-elementen automatisch vertalen op basis van de browsertaal leidt vaak tot inconsistente problemen..

Als de website alleen in het Nederlands beschikbaar is, houd dan ook alle knoppen en labels in het Nederlands.

Bied alleen een taalwissel aan als gebruikers daar zelf voor kiezen, en markeer bij meertaligheid altijd correct de taal van onderdelen.

Op de pagina’s ontbreekt een skiplink waarmee gebruikers direct naar de hoofdinhoud kunnen springen.

Bij navigeren met het toetsenbord moet eerst de volledige, herhalende hoofdnavigatie worden doorlopen voordat de inhoud bereikt kan worden.

Er is geen zichtbare of verborgen link aanwezig die deze navigatie kan overslaan.

Ook andere methodes als landmarks (header, main, footer) ontbreken en er worden ook geen kopteksten gebruikt.

Toetsenbordgebruikers en screenreadergebruikers moeten bij elke pagina opnieuw door dezelfde navigatie heen. Dit kost extra tijd en maakt het navigeren minder efficiënt.

Voeg een skiplink toe als eerste focusbare element op de pagina.

Deze link moet bij focus zichtbaar worden en verwijzen naar het begin van de hoofdinhoud, bijvoorbeeld via een anker naar het <main>-element.

https://www.toegankelijkonline.nl/artikelen/skiplinks-sneller-navigeren-met-een-toetsenbord

In het document 210707-watervisie-waterschap-zuiderzeeland.pdf zijn op meerdere pagina’s contrastproblemen aangetroffen.

Voorbeelden zijn:

• Witte tekst op een lichtgroene achtergrond (contrast circa 2,4:1)
• Groene tekst op een blauwe achtergrond (contrast circa 1,3:1)
• Groene koppen op een witte achtergrond met een contrast van circa 2,8:1
• Witte tekst over een foto, gemeten op een lichtbruin stuk ondergrond (contrast circa 2,2:1)

Deze en andere combinaties voldoen niet aan de minimale contrastvereisten voor tekst.

Gebruikers met een verminderd zicht kunnen delen van het document moeilijk of niet lezen. Belangrijke koppen en tekstblokken zijn hierdoor minder goed waarneembaar. Dit vermindert de bruikbaarheid van het document.

Pas de gebruikte tekst- en achtergrondkleuren aan, zodat normale tekst minimaal een contrast van 4,5:1 heeft en grote of vetgedrukte tekst en grafische elementen zoals grafieken minimaal 3:1 halen.

Controleer alle kleurcombinaties in het document opnieuw met een contrasttool en zorg dat zowel tekst als betekenisdragende grafische elementen voldoen aan de contrastcriteria.