Zuiderzeeland - Informatievijver (ArcGis) - v2026.1

Bevindingen zoeken

Zoeken in

Overzicht van alle bevindingen
ID	Titel	Ernst	Type	WCAG Criteria	Beschrijving	Gebruikersimpact	Oplossing
ISSUE-8ca4c6ba	Logo van de organisatie heeft geen tekstalternatief	Gemiddeld	WCAG Fout	SC 1.1.1 SC 3.1.2 SC 2.4.4	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	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”.	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.
ISSUE-f6749dc6	Lege of onduidelijke links aanwezig in de content	Gemiddeld	WCAG Fout	SC 4.1.2 SC 2.4.4	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.	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.	Dit is waarschijnlijk een content. Verwijder de lege links uit de content
ISSUE-fa5a56e3	Onjuiste taalinstelling van de pagina	Gemiddeld	WCAG Fout	SC 3.1.1	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.	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.	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"`).
ISSUE-d5485263	Visuele koptekst is niet semantisch als kop gemarkeerd	Gemiddeld	WCAG Fout	SC 1.3.1	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.	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.	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.
ISSUE-1dd93916	Onjuiste ARIA-rollen toegepast op hoofdnavigatie	Gemiddeld	WCAG Fout	SC 1.3.1 SC 2.1.1 SC 4.1.2	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.	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.	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.
ISSUE-fbdfa69e	Status van mobiel menu niet programmatisch beschikbaar	Gemiddeld	WCAG Fout	SC 1.3.1 SC 4.1.2	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.	Voor screenreadergebruikers is het met de aanwezigheid van aria-expanded op de button vooraf duidelijker dat de knop een nieuw menu gaat openen.	Voeg een dynamisch `aria-expanded`-attribuut toe aan de knop, dat de actuele status weergeeft: `<button aria-expanded="false" aria-controls="menu-id">` Gebruik `aria-expanded="false"` wanneer het menu gesloten is. De knop wordt al via `aria-controls` aan het bijbehorende menu-element gekoppeld.
ISSUE-936c6a09	Sluitknop mobiel menu heeft Engelse toegankelijke naam	Gemiddeld	WCAG Fout	SC 3.1.2	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.	Screenreadergebruikers krijgen een Engelse aankondiging binnen een verder Nederlandstalige pagina.	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.
ISSUE-28227294	Actieve navigatie-item alleen via kleur aangeduid en onvoldoende contrast (mobiel menu)	Hoog	WCAG Fout	SC 1.4.3 SC 1.4.1	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.	Gebruikers met visuele beperkingen of kleurenblindheid kunnen de actieve pagina mogelijk niet herkennen.	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).
ISSUE-aaba70f0	Onvoldoende contrast van actieve indicator in desktopnavigatie	Gemiddeld	WCAG Fout	SC 1.4.11 SC 1.4.1	In de desktopweergave van de hoofdnavigatie wordt de actieve pagina aangeduid met een horizontale onderlijning onder het menu-item. Deze onderlijning heeft een lichtgroene kleur (#96BF0D) op een lichtgrijze achtergrond (#E8E8E8). De gemeten contrastverhouding bedraagt 1.8:1. Dit is lager dan de minimale vereiste contrastverhouding van 3:1 voor visuele indicatoren van gebruikersinterfacecomponenten.	Gebruikers met een visuele beperking of verminderd contrastzicht kunnen de actieve pagina mogelijk niet herkennen binnen de navigatie.	Zorg dat de actieve indicator (onderlijning) een contrastverhouding van minimaal 3:1 heeft tegenover de aangrenzende achtergrondkleur.
ISSUE-d0657cb7	Focusindicator heeft onvoldoende contrast op wisselende achtergronden	Gemiddeld	WCAG Fout	SC 1.4.11 SC 2.4.7	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.	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.	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.
ISSUE-f4d7c559	Kaartcomponenten (klikbare tegels) hebben geen zichtbare focusindicator	Hoog	WCAG Fout	SC 2.4.7 SC 2.4.11 SC 2.4.13 SC 1.4.11	Op de pagina zijn meerdere klikbare kaartcomponenten aanwezig (bijvoorbeeld “Schouwkaart”, “Peilbesluitkaart”, “Waterloket Zeewolde”). Deze tegels functioneren als interactieve elementen (links), maar tonen bij toetsenbordfocus geen duidelijke, zichtbare focusindicator. Wanneer met de Tab-toets door de pagina wordt genavigeerd, is niet visueel waarneembaar welke kaartcomponent focus heeft.	Toetsenbordgebruikers zijn afhankelijk van een zichtbare focusindicator om te zien welk element actief is.	Zorg dat alle kaartcomponenten een duidelijke, consistente focusindicator krijgen. Bijvoorbeeld: een contrasterende outline rondom de volledige tegel een duidelijke randverandering een combinatie van binnen- en buitenrand (duo-toon) zodat voldoende contrast wordt gegarandeerd Zorg dat de indicator minimaal 3:1 contrastratio heeft. Verwijder geen standaard focus-outline zonder een gelijkwaardig alternatief te bieden.
ISSUE-d1225811	Links binnen kaartcomponenten hebben geen toegankelijke naam	Kritiek	WCAG Fout	SC 2.4.4 SC 1.3.1 SC 4.1.2	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.	Screenreadergebruikers krijgen een aankondiging van een link zonder naam, bijvoorbeeld enkel “link” en de volledige url, afhankelijk van de screenreader.	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. Bijvoorbeeld: `<a href="...">` `<h3>Schouwkaart</h3>` `<p>Beschrijving...</p>` `</a>` Alternatief: Gebruik `aria-labelledby` op het `<a>`-element en verwijs naar de ID van de zichtbare titel. Bijvoorbeeld: `<a href="..." aria-labelledby="kaart1-titel"></a>` `<h3 id="kaart1-titel">Schouwkaart</h3>` Zorg dat de toegankelijke naam overeenkomt met de zichtbare titel.
ISSUE-0dea8507	Externe logo-links hebben geen toegankelijke naam	Kritiek	WCAG Fout	SC 1.1.1 SC 2.4.4 SC 1.3.1	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.	Screenreadergebruikers horen meerdere keren “Link, Opens in a new window, link” zonder aanvullende informatie.	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.
ISSUE-8aed1f50	Focusindicator bij logo-links deels of volledig afgedekt	Gemiddeld	WCAG Fout	SC 2.4.7 SC 2.4.13	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).	Toetsenbordgebruikers moeten duidelijk kunnen zien welk element focus heeft.	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.
ISSUE-8af5c108	Focusvolgorde wijkt af van visuele en logische volgorde bij kaart- en linkgroepen	Laag	WCAG Fout	SC 2.4.3 SC 1.3.2	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.	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.	Zorg dat de focusvolgorde overeenkomt met de visuele en logische leesvolgorde van de pagina.
ISSUE-5e7aedf5	Skiplink om hoofdnavigatie over te slaan ontbreekt	Gemiddeld	WCAG Fout	SC 2.4.1	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”.	Toetsenbordgebruikers en screenreadergebruikers moeten bij elke pagina eerst door herhalende navigatie-elementen navigeren.	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.
ISSUE-415993e8	Niet-interactieve elementen ontvangen toetsenbordfocus	Gemiddeld	WCAG Fout	SC 2.4.3 SC 2.1.1	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.	Toetsenbordgebruikers verwachten dat alleen interactieve elementen focus ontvangen.	Zorg dat alleen interactieve elementen toetsenbordfocus kunnen ontvangen. Verwijder onnodige `tabindex="0"` van niet-interactieve elementen Controleer de volledige focusvolgorde op consistentie.

Zuiderzeeland - Informatievijver (ArcGis) - v2026.1 — Tabelweergave