Zuiderzeeland - Hubs - v2026.1 — Tabelweergave

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.

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

Implementeer correcte modal-dialoogfunctionaliteit:

• Beperk de focus tot interactieve elementen binnen het menu (focus trap)
• Verplaats focus bij openen naar het eerste logische element in het menu
• Herstel focus naar de triggerknop bij sluiten
• Markeer de onderliggende content als niet-interactief (bijv. inert of aria-hidden="true" waar passend)

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.

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.

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.

Gebruikers met slechtziendheid die sterk inzoomen, kunnen mogelijk langere woorden niet lezen als deze buiten de viewport vallen.

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).

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.

Screenreadergebruikers krijgen Engelstalige tekst uitgesproken met Nederlandse uitspraak

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.

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.

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.

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.

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.

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" .

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.

Screenreadergebruikers kunnen niet betrouwbaar bepalen welk paneel door welke knop wordt aangestuurd

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.

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.

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.

Gebruikers met een visuele beperking of verminderd contrastzicht kunnen de iconen moeilijk onderscheiden van de achtergrond en de functionaliteit over het hoofd zien.

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.

De kernfunctionaliteit van de dataset is niet bruikbaar bij vergroting.

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.

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.

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.

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.

Stel een duidelijke, beschrijvende documenttitel in via de documenteigenschappen van het PDF-bestand.

Zorg dat de titel de inhoud van het document correct weergeeft.

In het PDF-document is geen documenttaal ingesteld in de documenteigenschappen. Hierdoor ontbreekt een programmatisch vastgelegde primaire taal.

Screenreadergebruikers krijgen mogelijk een verkeerde uitspraak van tekst. Dit kan leiden tot verminderde begrijpelijkheid van de inhoud.

Stel de primaire documenttaal correct in (bijvoorbeeld Nederlands) via de documenteigenschappen.

Indien delen van het document een andere taal bevatten, markeer deze taalwisselingen op elementniveau in de codes.

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.

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.

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)

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.

Screenreadergebruikers kunnen niet volledige navigeren via koppenstructuur en beperkt overzicht krijgen van de paginaopbouw. Hierdoor wordt de pagina minder goed scanbaar en minder begrijpelijk.

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.

Screenreadergebruikers kunnen niet volledige navigeren via koppenstructuur en beperkt overzicht krijgen van de paginaopbouw. Hierdoor wordt de pagina minder goed scanbaar en minder begrijpelijk.

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.

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.

Voor screenreadergebruikers is niet duidelijk welke kaart precies gedeeld  kan worden (de knop wordt bij dynamisch tonen wel aangekonidg via aria-live).

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]"

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.

Door de huidige alt-tekst wordt echter overbodige of niet-informatieve content voorgelezen.

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.

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.

De afwijkende volgorde kan verwarring en desoriëntatie veroorzaken, zeker als mensen gebruikmaken van inzoomen of inzoomsoftware die de cursor volgt.

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.

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.

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.