Op verzoek van Waterschap Zuiderzeeland is een toegankelijkheidsonderzoek uitgevoerd op de door hun aangeboden website, Kaartverhalen , 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.
Het toegankelijkheidsonderzoek voor de website Kaartverhalen 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.
Icoonknop voor instructies heeft geen toegankelijke naam
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.
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
Screenreadergebruikers horen bij iedere kaart alleen “Map” of “Kaart, application”. Hierdoor ontbreekt context, zeker met meerdere kaarten op een pagina.
Oplossing
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.
Impact op gebruikers
Screenreadergebruikers weten niet dat deze knop de popup sluit.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Decoratieve herhaling van logo met onjuiste alt-tekst in hero-afbeelding
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Visuele koppen zijn niet als kop gemarkeerd in de code
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..
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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"
Screenshots
Links worden alleen door kleur onderscheiden van omliggende tekst
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.
Impact op gebruikers
Gebruikers met kleurenblindheid of een verminderd contrastvermogen kunnen links niet goed onderscheiden van gewone tekst.
Oplossing
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.
Screenshots
Onvoldoende contrast bij actieve pagina in mobiel menu
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Onvoldoende contrast tussen blauwe tekst en lichtgroene achtergrond
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.
Impact op gebruikers
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.
Oplossing
Pas de kleur van de tekst of de achtergrond aan zodat de contrastverhouding minimaal 4,5:1 bedraagt voor normale tekst.
Screenshots
Paginanavigatie valt bij inzoomen deels weg en tekst wordt afgekapt
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Onvoldoende contrast bij groene tekst op blauwe achtergrond
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Onvoldoende contrast in groene knop met witte tekst
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.
Impact op gebruikers
Gebruikers met een visuele beperking kunnen de tekst in de knop moeilijk lezen.
Oplossing
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.
Impact op gebruikers
Toetsenbordgebruikers kunnen moeilijk zien welk element focus heeft.
Oplossing
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.
Screenshots
Tekst valt buiten container bij aangepaste tekstafstand
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Automatisch afspelende animatie in popup kan niet gepauzeerd worden
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.
Impact op gebruikers
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.
Oplossing
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Onlogische en mogelijk desoriënterende focusvolgorde bij kaartbediening
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.
Impact op gebruikers
Toetsenbordgebruikers kunnen moeilijk voorspellen waar de focus naartoe gaat. Zeker als er ook ingezoomd wordt, zal de interface mogelijk heen en weer springen.
Oplossing
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.
Screenshots
Toegankelijke naam van knop komt niet overeen met zichtbare tekst
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".
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Dynamisch vertaalde knoppen wijken af van ingestelde paginataal
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Geen skiplink aanwezig om hoofdnavigatie over te slaan
ID
ISSUE-6c170fb1
Ernst
Gemiddeld
Type
WCAG Fout
Beschrijving
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.
Impact op gebruikers
Toetsenbordgebruikers en screenreadergebruikers moeten bij elke pagina opnieuw door dezelfde navigatie heen. Dit kost extra tijd en maakt het navigeren minder efficiënt.
Oplossing
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.
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.
Impact op gebruikers
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.
Oplossing
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.
Screenshots
Testplan
Dit zijn de geteste pagina's en componenten die onderdeel zijn van de steekproef.
