Rapport:
Audit digitale toegankelijkheid website Waterdata Waterschap Rijn en IJssel

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s van de website toont het logo bovenaan de volledige tekst “Waterschap Rijn en IJssel Waterbeheer: veilig en op maat”, maar het tekstalternatief bevat alleen “Waterschap Rijn en IJssel”. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is en dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Verander het tekstalternatief zodat de volledige tekst van het logo erin staat: “Waterschap Rijn en IJssel Waterbeheer: veilig en op maat”. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

In de header van de website staan de knoppen “Waterkwantiteit” en “Waterkwaliteit” met pijltjes-iconen die aangeven dat er verborgen content aanwezig is. Deze iconen hebben echter geen tekstalternatief. Daardoor weten schermlezers niet dat hier verborgen content aanwezig is. Deze informatie is niet aanwezig in de vorm van een aria-expanded-attribuut of een verborgen tekst.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Op de website staan pagina’s met grafieken waarop het logo bovenaan is geïmplementeerd met een img-element, maar dit element heeft geen alt-attribuut. Hierdoor lezen schermlezers nu de bestandsnaam voor en dat is niet de bedoeling. Informatieve afbeeldingen, zoals een logo, moeten altijd een alt-tekst hebben. In die alt-tekst moet de volledige tekst staan die in het logo te zien is. Zo weten bezoekers die het plaatje niet kunnen zien, ook wat er staat. Voeg een alt-tekst toe die de volledige tekst van het logo bevat. Als het logo geen link is, voeg dan ook het woord ‘Logo’ toe aan de alternatieve tekst.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op de pagina’s met grafieken staan onderaan links met tekens zoals “[<--]” en “[-->]”. Deze tekens zijn interactief en functioneren als links. Deze tekens hebben echter geen beschrijvende tekstalternatieven, waardoor de links niet toegankelijk zijn. Daardoor hebben de links voor bezoekers die schermlezers gebruiken geen duidelijke betekenis. Om deze links toegankelijk te maken, moeten de tekens een tekstalternatief krijgen dat beschrijft waar de link naartoe leidt. Zo weten bezoekers die een schermlezer gebruiken wat het doel van de link is.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere. Zie ook succescriterium 2.4.4.

Op de pagina’s met grafieken zijn de grafieken geïmplementeerd als svg-elementen. Deze elementen hebben echter geen beschrijvend tekstalternatief. De beschrijving moet samenvatten wat de grafiek laat zien. Een mogelijke oplossing is het gebruik van het title-element en het desc-element. Omdat het hier om complexe afbeeldingen gaat met veel informatie die niet in een korte alternatieve tekst kan worden weergegeven, is het belangrijk om twee vormen van tekstalternatief aan te bieden: een korte en een lange beschrijving. De korte beschrijving, in de vorm van alternatieve tekst in het title-element van het svg-element, moet kort aangeven wat de grafiek toont en verwijzen naar een langere beschrijving. De lange beschrijving kan in tekst- of tabelvorm worden weergegeven. Deze lange beschrijving kan in het desc-element van het svg-element of direct op de pagina staan, maar ook beschikbaar zijn via een link naar een andere pagina of een downloadbaar bestand. Andere oplossingen zijn ook mogelijk.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/index.php?wat=timeseries&deeplink=0&lokid=897319 staat onder de kop "Afwatering van Formerhoek" een afbeelding die is toegevoegd met een img-element, maar dit element heeft geen alt-attribuut. Een img-element moet altijd een alt-attribuut hebben. Alleen bij een decoratieve afbeelding die geen betekenis overdraagt, moet dit attribuut leeg blijven (alt=""). Bij een informatieve afbeelding moet het alt-attribuut een duidelijke beschrijving van de afbeelding bevatten.

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: In de header van de website worden de interactieve elementen van het hoofdmenu, zoals links en knoppen, visueel als een groep weergegeven, maar deze groepering is niet zichtbaar in de HTML-structuur. Ook de links in de submenu’s die openen via “Waterkwantiteit” en “Waterkwaliteit” zijn visueel gegroepeerd, maar deze structuur ontbreekt eveneens in de HTML-code. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere. Vergelijkbare problemen kunnen vaker voorkomen.

Op pagina https://waterdata.wrij.nl/index.php?wat=inleiding zijn de teksten "Welkom op het Meetgegevens portaal van Waterschap Rijn en IJssel" en "Vragen?" visueel vormgegeven als kop, maar ze zijn niet als kop gemarkeerd in de HTML. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie navigeren. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven, bijvoorbeeld vetgedrukt, ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur. Dit kan voorkomen worden door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal is dit niveau instelbaar via de content-editor in het CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Op pagina https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan zijn de teksten “Wat wordt er gemeten?”, “Waarom wordt er gemeten?”, “Hoe worden de gegevens gecontroleerd?” en “Vragen?” visueel vormgegeven als kop, maar niet als kop gemarkeerd in de HTML. Bezoekers die hulpsoftware gebruiken kunnen daardoor niet snel navigeren of de inhoud scannen. De structuur van de informatie in de code komt hierdoor niet overeen met de visuele structuur. Dit kan voorkomen worden door koppen te markeren met het juiste HTML-element, op het juiste kopniveau.

Op pagina https://waterdata.wrij.nl/index.php?wat=waterkwaliteit zijn de teksten “Wat wordt er gemeten?”, “Waarom wordt er gemeten?” en “Vragen?” niet als kop gemarkeerd, terwijl ze er visueel wel zo uitzien. Voor bezoekers die hulpsoftware gebruiken is de informatie daardoor minder toegankelijk. De visuele structuur moet overeenkomen met de code door gebruik te maken van het juiste HTML-element voor koppen: h1 t/m h6.

Op pagina https://waterdata.wrij.nl/wqm.php?wat=metingen&mpn=53694&pakket=71631 zijn de teksten “Parameters” en “Metingen” visueel als koppen vormgegeven, maar in de HTML-structuur niet als koppen gemarkeerd. Zonder de juiste markering kunnen gebruikers van hulpsoftware deze onderdelen niet als kop herkennen of er direct naartoe navigeren. Gebruik de elementen h1 t/m h6 om dit te herstellen.
Hetzelfde probleem doet zich ook voor bij teksten op pagina's met grafieken, zoals https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 met de tekst "Debiet effluent daggemiddeld", https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210 met de tekst "Leidingweerstanden - traject Baakse Beek bovenloop", https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 met de tekst "Cumulatieve neerslag WRIJ", en op andere pagina's.

Op pagina https://waterdata.wrij.nl/index.php?wat=inleiding staat onder de kop "Inleiding" een tekstblok dat visueel uit meerdere alinea’s bestaat, maar in de HTML is dit als één enkel p-element gemarkeerd. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.
Op pagina https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan komt hetzelfde probleem voor. Onder de kop staat een tekstblok dat visueel uit meerdere alinea’s bestaat, maar in de HTML-structuur is dit als één alinea gemarkeerd. Elke visuele alinea moet in een apart p-element geplaatst worden.
Op pagina https://waterdata.wrij.nl/index.php?wat=waterkwaliteit bestaat het tekstblok onder de kop ook visueel uit meerdere alinea’s, maar in de code is dit niet zo gemarkeerd. De HTML moet de visuele structuur volgen door elke afzonderlijke alinea in een eigen p-element te zetten.

Op pagina https://waterdata.wrij.nl/index.php?wat=inleiding staat onder de tekst "Welkom op het Meetgegevens portaal van Waterschap Rijn en IJssel" een opsomming met twee items die visueel als lijst wordt weergegeven, maar deze is in de HTML niet gemarkeerd als lijst. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Meestal is hier een knop voor in de content-editor in het CMS. Voor lijsten en opsommingen worden de HTML-elementen ul (lijst met bullets) of ol (lijst met cijfers) gebruikt. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

Op pagina https://waterdata.wrij.nl/index.php?wat=standardgraph worden de links gegroepeerd met een ul-element. Dit ul-element bevat echter andere ul-elementen die sublijsten voorstellen, en ook br-elementen als directe onderliggende elementen. Zowel de ul-elementen als de br-elementen mogen niet direct binnen een ul-element geplaatst worden. Deze structuur doorbreekt de semantische hiërarchie van de lijst. Om dit probleem op te lossen, moeten de br-elementen verwijderd worden en moet ervoor gezorgd worden dat alleen li-elementen als directe kinderen van het ul-element worden gebruikt. Om de juiste lijstopbouw te behouden, moeten de sublijsten genest worden binnen het bijbehorende ouder-li-element.
Vergelijkbare problemen zijn te zien op pagina’s https://waterdata.wrij.nl/wqm.php?wat=overzicht en https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle. Zorg dat de ul-elementen alleen li-elementen als directe kinderen bevatten en dat alle sublijsten correct genest zijn binnen hun bijbehorende ouder-li-element.

Op pagina https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle staat onder “Filter opties:” een groep selectievakjes, voorafgegaan door de tekst "Soort meting:". Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de tekst “Soort meting:”.

Op de pagina’s met grafieken opent het interactieve element met het download-icoon een submenu. Dit element en het submenu dat het aanstuurt zijn echter niet programmatisch met elkaar verbonden. Hierdoor kunnen hulptechnologieën zoals schermlezers de relatie niet vaststellen tussen het activerende element en de inhoud die getoond wordt. Zorg dat het interactieve element met het download-icoon programmatisch gekoppeld wordt aan het submenu dat het opent. Een mogelijke oplossing is het toevoegen van een aria-controls-attribuut aan het besturende element dat verwijst naar het id-attribuut van het submenu. Andere oplossingen zijn ook mogelijk.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op de pagina’s met grafieken opent het interactieve element met het download-icoon een submenu. De interactieve elementen in dit submenu worden visueel als een groep weergegeven, maar deze groepering is niet terug te zien in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen, bijvoorbeeld op in een ul-element. Andere oplossingen zijn mogelijk. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op de pagina’s met grafieken staat onderaan een groep gerelateerde navigatielinks die visueel als een groep gepresenteerd worden, maar deze groepering is niet terug te zien in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn. Neem de elementen op in een ul- of nav-element. Geef de groep een beknopte beschrijvende naam met behulp van het aria-label-attribuut. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 bevat de legenda van de grafiek interactieve elementen, zoals “RWZI Aalten – Effluent Debiet”, “RWZI Dinxperlo – Effluent Debiet” en andere. Wanneer bezoekers deze legendapunten activeren om een bijbehorende gegevensreeks in de grafiek te verbergen, verandert de visuele weergave van het element. Deze visuele verandering wordt echter niet programmatisch doorgegeven aan schermlezers. Hierdoor kan hulpsoftware deze informatie niet overbrengen en weten schermlezers niet of een gegevensreeks zichtbaar of verborgen is.
Hetzelfde probleem komt voor op andere pagina’s, bijvoorbeeld: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=289786 en andere.

Op de pagina’s met grafieken worden de visuele relaties tussen onderdelen van de grafiek, zoals assen, gegevensreeksen en legenda, niet programmatisch doorgegeven. Terwijl ziende bezoekers kunnen zien welke as bij welke gegevens hoort en welke legendapunt verwijst naar welke lijn in de grafiek, zijn deze relaties niet aanwezig in de onderliggende SVG-structuur. Hulpsoftware herkent de afzonderlijke tekstelementen, zoals aswaarden, titels en legendalabels, als losse en niet-verbonden elementen. Hierdoor kunnen gebruikers van schermlezers niet begrijpen hoe deze onderdelen met elkaar samenhangen of welke gegevens de grafiek weergeeft. Om dit op te lossen, moet de structuur en samenhang van de grafiek programmatisch worden vastgelegd. Gebruik hiervoor geschikte groeperingen en ARIA-rollen. Dit helpt hulpsoftware om de grafiek als één betekenisvolle structuur te interpreteren, in plaats van als een verzameling losse elementen.
Zie hetzelfde probleem op andere pagina’s, zoals: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=289786 en andere.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de website staan pagina’s met grafieken. Deze pagina’s bevatten een interactief element met de tekst: “Waterschap Rijn en IJssel - Graph by Highcharts”. De grijze tekst (HEX #909090) op een witte achtergrond heeft een contrastratio van 3,2:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 bevat de legenda van de grafiek interactieve elementen, zoals “RWZI Aalten – Effluent Debiet”, “RWZI Dinxperlo – Effluent Debiet” en andere. Wanneer deze elementen geactiveerd worden om de bijbehorende gegevensreeks in de grafiek te verbergen, verandert de tekstkleur naar lichtgrijs (HEX #CCCCCC) op een witte achtergrond. De contrastratio is dan 1,6:1. Dit moet minimaal 4,5:1 zijn.
Zie hetzelfde probleem op andere pagina’s, zoals: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=289786 en andere.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer pagina’s van de website worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, zijn de socialmedia-links in de header niet zichtbaar en niet bedienbaar. Als een bezoeker inzoomt, moet alles nog werken. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Wanneer de pagina https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raken linkteksten zoals “Grondwaterstandsmeter 78 (Stelkampsveld)”, “Weerstationhaaksbergen”, “Ensinkgoorsdijk/Schipbeek” en andere deels uit beeld of worden afgekapt. Zorg dat alles nog werkt en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

Op de pagina’s met grafieken verschijnt er bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom een horizontale scrollbar. Hoewel de grafiek zelf is vrijgesteld van de eisen rond herschikking (reflow) als complexe datavisualisatie, geldt deze uitzondering niet voor de omliggende interactieve elementen zoals navigatiepijlen, grafiekknoppen en links. Deze elementen worden afgekapt of vereisen horizontaal scrollen, wat in strijd is met deze succescriterium.
Om dit op te lossen, moet ervoor gezorgd worden dat alle interactieve en navigatie-elementen die bij de grafiek horen correct herschikken en volledig zichtbaar en bedienbaar blijven binnen een viewport van 320 pixels breed.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Uitkomst: Onvoldoende

Bevindingen: Op de website staan pagina’s met grafieken. Deze pagina’s bevatten interactieve elementen met print- en download-iconen. De kleurcontrasten van deze iconen zijn onvoldoende. De blauwe kleur (HEX #B5C9DF) van het print-icoon tegenover de grijze randlijn (HEX #A0A0A0) heeft een contrastratio van 1,5:1. De groene kleur (HEX #A8BF77) van het download-icoon tegenover dezelfde grijze randlijn heeft ook een contrastratio van 1,5:1. Voor beide iconen geldt bovendien dat de grijze randlijn onvoldoende contrast heeft ten opzichte van de lichtgrijze achtergrond (HEX #F7F7F7), met een contrastratio van 2,4:1. Het kleurcontrast van functionele iconen moet minimaal 3,0:1 zijn. Zorg dat de iconen voldoende contrast hebben. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op de website staan pagina’s met grafieken. Sommige kleurcombinaties in deze grafieken hebben onvoldoende contrast. Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 heeft de grijze lijn (HEX #A9A9A9) tegenover de blauwe lijn (HEX #73B2FF) een contrastratio van 1,1:1. De blauwe lijn tegenover de oranje lijn (HEX #DB843D) heeft een contrastratio van 1,3:1. De donkerrode lijn (HEX #AA4643) tegenover de paarse lijn (HEX #80699B) heeft een contrastratio van 1,2:1.
Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210 heeft de zwarte lijn (HEX #474747) tegenover de blauwe lijn (HEX #084B8A) een contrastratio van 1,1:1.
Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=373135 heeft de paarse lijn (HEX #B404AE) tegenover de roze lijn (HEX #DB843D) een contrastratio van 2,2:1. Het contrast tussen informatieve elementen van een grafiek moet minimaal 3,0:1 zijn, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben. Zie ook andere pagina’s met grafieken.

Op de website staan pagina’s met grafieken waarbij de kleuren van de grafieklijnen te weinig contrast hebben ten opzichte van de witte achtergrond.
Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 heeft de grijze lijn (HEX #A9A9A9) een contrastratio van 2,4:1 tegen de witte achtergrond. De blauwe lijn (HEX #73B2FF) heeft een contrastratio van 2,2:1 en de groene lijn (HEX #89A54E) een contrastratio van 2,8:1.
Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210 heeft de lichtblauwe lijn (HEX #00BFFF) een contrastratio van 2,1:1 tegen de witte achtergrond. Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=373135 heeft de roze lijn (HEX #DB843D) een contrastratio van 2,7:1 tegen de witte achtergrond. Het contrast tussen grafieklijnen en de achtergrond moet minimaal 3,0:1 zijn, zodat bezoekers de gegevens goed kunnen onderscheiden. Controleer ook op andere pagina’s of de kleuren in de grafieken voldoende contrast hebben ten opzichte van de achtergrond.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het hoofdmenu in de header bevat knoppen die submenu’s openen, zoals “Waterkwantiteit” en “Waterkwaliteit”. Wanneer een bezoeker met de muis over deze knoppen beweegt, verschijnen de submenu’s en overlappen ze de pagina-inhoud. De bezoeker moet deze content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website bevatten de knoppen “Waterkwantiteit” en “Waterkwaliteit” in het hoofdnavigatiemenu submenu’s die niet met het toetsenbord bedienbaar zijn. Zorg dat submenu’s met het toetsenbord kunnen worden geopend en gebruikt, en dat de informatie in deze submenu’s toegankelijk is voor alle bezoekers.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Op de website staan pagina’s met grafieken. Deze pagina’s bevatten interactieve elementen met print- en download-iconen. Deze interactieve elementen zijn niet toegankelijk via het toetsenbord.
Hetzelfde probleem doet zich voor bij de interactieve elementen in het submenu dat opent na het klikken op het download-icoon, en bij het interactieve element met de tekst “Waterschap Rijn en IJssel - Graph by Highcharts”. Wanneer een bezoeker met het toetsenbord navigeert, worden deze interactieve elementen overgeslagen. Zorg dat alle interactieve elementen ook met de Enter-, Return- of spatietoetsen kunnen worden bediend.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 bevat de legenda van de grafiek interactieve elementen, zoals “RWZI Aalten – Effluent Debiet”, “RWZI Dinxperlo – Effluent Debiet” en andere. Deze elementen stellen bezoekers in staat om de bijbehorende gegevensreeksen in de grafiek te tonen of te verbergen. Deze interactieve elementen kunnen echter alleen met een muis geactiveerd worden en zijn niet bedienbaar met het toetsenbord. Daardoor kunnen bezoekers die alleen het toetsenbord gebruiken niet dezelfde acties uitvoeren als muisgebruikers, wat betekent dat zij bijvoorbeeld geen aanpassingen doen aan de grafiek. Zorg dat alle interactieve elementen in de grafiek ook met het toetsenbord bediend kunnen worden.
Zie hetzelfde probleem op andere pagina’s, zoals: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=289786 en andere.

Op de pagina’s met grafieken verschijnen er tooltips wanneer met de muis over datapunten wordt bewogen. Deze tooltips tonen belangrijke informatie, zoals de naam van de gegevensreeks, de datum en de waarde. Bijvoorbeeld: “RWZI Etten – Effluent Debiet (m³/s), 15-09-2025 00:00: 0.802”. Deze tooltips kunnen echter niet worden geactiveerd of benaderd met het toetsenbord. Hierdoor hebben toetsenbordgebruikers en schermlezergebruikers geen toegang tot deze informatie, terwijl die essentieel is voor het begrijpen van de specifieke gegevenswaarden in de grafiek. Zorg dat alle interactieve elementen van de grafiek, inclusief tooltips, volledig bedienbaar zijn met het toetsenbord. Datapunten moeten focusbaar zijn, en wanneer ze de focus krijgen, moet dezelfde informatie die in de tooltip wordt weergegeven ook op het scherm zichtbaar zijn en worden aangekondigd aan schermlezers.
Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: De pagina’s van de website bevatten geen skiplink. Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Hiervoor wordt een skiplink gebruikt. Daarmee kunnen bezoekers vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Uitkomst: Onvoldoende

Bevindingen: De pagina’s https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle en https://waterdata.wrij.nl/wqm.php?wat=overzicht hebben dezelfde tekst in het title-element van de pagina: “Waterdata - Waterschap Rijn en IJssel: Overzicht”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger. Verander de tekst in het title-element, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

Op de website staan pagina’s met grafieken die allemaal dezelfde tekst hebben in het title-element: “Waterdata - Grafiek - Waterschap Rijn en IJssel - KiMare :: Grafiek”. Zie bijvoorbeeld de pagina’s:
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325,
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210,
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/index.php?wat=timeseries&deeplink=0&lokid=897319 is de titel “Waterdata - Waterschap Rijn en IJssel: Beschikbare reeksen” geen goede beschrijving van de inhoud van de pagina. In het title-element van elke pagina moet een tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Hierdoor begrijpen bezoekers beter waar de pagina over gaat. Wanneer correct ingesteld, wordt deze tekst bovendien getoond in de tab van de browser. Met een duidelijke beschrijving kunnen bezoekers makkelijker navigeren tussen verschillende pagina’s. Zet een duidelijke tekst in het title-element van de pagina die de inhoud van de pagina beschrijft.
Hetzelfde probleem is te zien op pagina https://waterdata.wrij.nl/wqm.php?wat=metingen&mpn=53694&pakket=71631 met de titel: “Waterdata - Waterschap Rijn en IJssel: Metingen” en op pagina https://waterdata.wrij.nl/index.php?wat=download&deeplink=0&lokid=897319&tsid=90653042 met de titel: “Waterdata - Waterschap Rijn en IJssel: Reeks downloaden”.

Uitkomst: Onvoldoende

Bevindingen: In de header van de website komt de toetsenbordfocus op onzichtbare interactieve elementen terecht wanneer de pagina wordt bekeken op een klein scherm met een resolutie van 320 pixels. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen, zoals links, knoppen of formuliervelden. Als dat wel gebeurt, kan een bezoeker deze elementen onbedoeld activeren. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina’s met grafieken staan onderaan links met tekens zoals “[<--]” en “[-->]”. Deze tekens hebben geen beschrijvend tekstalternatief, waardoor het doel van de links niet duidelijk is. Dit kan worden opgelost door de links te voorzien van toegankelijke, tekstuele inhoud. Een mogelijke oplossing is het toevoegen van een beschrijvende visueel verborgen tekst binnen het a-element, of het gebruik van een aria-label-attribuut met een beknopte beschrijving van het linkdoel. Andere oplossingen zijn ook mogelijk. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/index.php?wat=timeseries&deeplink=0&lokid=897319 staan meerdere links met de tekst “grafiek” die naar verschillende bestemmingen verwijzen. Hetzelfde probleem doet zich voor bij links met de tekst “download”. Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers. Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.
Hetzelfde probleem komt voor op pagina https://waterdata.wrij.nl/wqm.php?wat=metingen&mpn=53694&pakket=71631 bij de links “grafiek” onder “Parameters”.

Uitkomst: Onvoldoende

Bevindingen: Er is geen tweede manier om de pagina’s van deze website te vinden.
Alle pagina’s die op de website staan moeten op meerdere manieren gevonden kunnen worden. Dit kan bijvoorbeeld via een zoekveld worden gedaan.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website is de toetsenbordfocus niet zichtbaar op de links “Inleiding”, “Zwemwater” en “Links”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren, moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle staat onder “Filter opties:” een keuzelijst (select-element) met het label “Stroomgebied”. De toegankelijke naam van dit select-element is echter leeg.
Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst in de toegankelijke naam staat, bij voorkeur vooraan.
Hetzelfde probleem komt voor op pagina https://waterdata.wrij.nl/wqm.php?wat=metingen&mpn=53694&pakket=71631 en op pagina https://waterdata.wrij.nl/index.php?wat=download&deeplink=0&lokid=897319&tsid=90653042 bij de keuzelijsten met de labels “Vanaf” en “t/m”.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op de website staan pagina’s met grafieken waarbij het lang-attribuut op het html-element ontbreekt. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is. Zorg dat het lang-attribuut aanwezig is, en dat dit attribuut de taalcode bevat van de taal van de pagina. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header van de website gebruiken de socialmedia-links, zoals Facebook, Twitter en LinkedIn, een icoon voor de visuele weergave en een title-attribuut voor de beschrijving. Hierdoor is de link alleen afhankelijk van het title-attribuut om context te geven. Het pictogram wordt toegevoegd via de ::before-pseudo-element en wordt door hulpsoftware weergegeven als een betekenisloos teken, wat resulteert in een ontoegankelijke naam. Het title-attribuut wordt bovendien niet consistent voorgelezen door schermlezers en kan daarom niet dienen als betrouwbare naam. Hierdoor kunnen schermlezergebruikers de bedoeling van de link niet begrijpen, wat de link ontoegankelijk maakt. Om dit op te lossen, moet elke link met alleen een icoon een programmatisch bepaalbare toegankelijke naam hebben. Een mogelijke oplossing is om het icoon te verbergen voor hulpsoftware met aria-hidden="true" en een toegankelijke naam toe te voegen, bijvoorbeeld met een visueel verborgen tekst zoals:
<span class="sr-only">Facebook Waterschap Rijn en IJssel</span> waarbij dit via CSS buiten beeld wordt geplaatst, of door gebruik te maken van een aria-label-attribuut op de link zelf. Deze aanpak zorgt ervoor dat schermlezergebruikers dezelfde betekenisvolle informatie ontvangen als ziende gebruikers en begrijpen wat het doel van elke link is. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

In de header van de website bevat het hoofdnavigatiemenu knoppen die submenu’s openen, maar een blinde bezoeker krijgt geen informatie over de toestand van deze submenu’s. Als er een link is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/index.php?wat=inleiding, https://waterdata.wrij.nl/index.php?wat=inleiding_waterkwan, https://waterdata.wrij.nl/index.php?wat=standardgraph en andere.

Op pagina https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle staat onder “Filter opties” een keuzelijst (select-element) met het label “Stroomgebied”. De toegankelijke naam ontbreekt. Hierdoor is het element niet toegankelijk. Geef het select-element een toegankelijke naam.
Hetzelfde probleem komt voor op pagina https://waterdata.wrij.nl/wqm.php?wat=metingen&mpn=53694&pakket=71631 en op pagina https://waterdata.wrij.nl/index.php?wat=download&deeplink=0&lokid=897319&tsid=90653042 bij de keuzelijsten met de labels “Vanaf” en “t/m”.

Op pagina https://waterdata.wrij.nl/index.php?wat=overzicht&type=alle staan onder “Filter opties:” selectievakjes, voorafgegaan door de teksten "Soort meting:" en “Toon niet actief:”. Deze selectievakjes hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen. Invoervelden moeten altijd een toegankelijke naam hebben die het doel van het veld beschrijft. Geef het invoerveld dus een toegankelijke naam, bijvoorbeeld door een label-element toe te voegen met de beschrijvende tekst en dit label-element te koppelen aan het input-element.

Op de website staan pagina’s met grafieken. Deze pagina’s bevatten interactieve elementen met print- en download-iconen. Deze elementen hebben niet de correcte toegankelijke rol. Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet. Zorg dat interactieve elementen de juiste toegankelijke rol hebben.
Hetzelfde probleem komt voor bij de interactieve elementen in het submenu dat wordt geopend door op het download-icoon te klikken, en bij het interactieve element met de tekst “Waterschap Rijn en IJssel - Graph by Highcharts”. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op de pagina’s met grafieken bevat het interactieve element met het downloadicoon een submenu, maar een blinde bezoeker krijgt geen informatie over of dit submenu open of gesloten is. Als er een link is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen. Daarvoor kan het aria-expanded-attribuut gebruikt worden. Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Op pagina https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325 bevat de legenda van de grafiek interactieve elementen, zoals “RWZI Aalten – Effluent Debiet”, “RWZI Dinxperlo – Effluent Debiet” en andere. Deze elementen stellen bezoekers in staat om de bijbehorende gegevensreeksen in de grafiek te tonen of te verbergen, maar ze hebben niet de correcte toegankelijke rol. Interactieve elementen moeten een toegankelijke rol hebben die overeenkomt met hun functie, zodat schermlezers en andere hulpsoftware correct kunnen communiceren wat het element doet en hoe het gebruikt kan worden.
Zie hetzelfde probleem op andere pagina’s, zoals:
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210,
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368,
https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=289786 en andere.

Op de pagina’s met grafieken is de grafische inhoud geïmplementeerd met een SVG-element. Dit SVG-element heeft echter geen gedefinieerde rol die aangeeft dat het om een betekenisvolle grafiek of visuele weergave gaat.
Zonder een expliciete rol kunnen hulptechnologieën niet bepalen wat voor soort inhoud het SVG-element vertegenwoordigt of hoe het geïnterpreteerd moet worden. Een SVG zonder semantische rol wordt standaard vaak weergegeven als een generieke groep of volledig genegeerd. Hierdoor krijgen schermlezergebruikers niet de informatie dat het element essentiële grafische gegevens bevat. Om dit op te lossen, moet een geschikte rol aan het SVG-element worden toegekend, bijvoorbeeld role="img". Zie bijvoorbeeld de pagina’s: https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=893325, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=374210, https://waterdata.wrij.nl/grafiek-kiwis-multi.php?graphid=336368 en andere.

Uitkomst: Voldoende