Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Weet van Water en Klimaatatlassen Waterschap Rijn en IJssel

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Weet van Water en Klimaatatlassen
Datum 7 mei 2025
Scope van de website Binnen de scope van het onderzoek valt:
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 28

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de header van elke pagina van de website "Weetvanwater" staat het logo van de website. De toegankelijke tekst van het logo is "Weet van Water". Dat het om een logo gaat is van belang. Voeg het woord logo toe en eventueel de tekst "naar de homepagina" zodat het voor bezoekers die afhankelijk zijn van hulpsoftware ook duidelijk is wat het linkdoel is.

Bevinding 2: Bevinding aangepast na hercontrole:
Op pagina https://weetvanwater.nl/nieuws-en-media/12-juni-kom-naar-de-inspiratieavond-groene-tuin-in-het-zone-college/ staat een afbeelding "Een groene tuin hoe dan?" met onder andere het tijdstip van de inspiratie avond. Deze informatie is niet beschikbaar voor bezoekers die afhankelijk zijn van hulpsoftware. Plaats deze informatie ook als tekst op de pagina.

Bevinding 3: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 staan afbeeldingen met informatie zonder een toegankelijke tekst. Bijvoorbeeld naast de kop "Zomerse hoosbuien worden heviger en vallen vaker" staat een afbeelding met klimaateffecten. Klimaateffect 1 wordt in de tekst uitgelegd, maar klimaateffect 2 komt verder in de website niet voor. Geef de tekst op de afbeelding ook als html tekst weer om aan dit criterium en aan 1.4.5 te voldoen.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 4: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 staat de video "Waterschap Rijn en IJssel start balgen-project in strijd tegen droogte". Deze video heeft een automatisch gegenereerde ondertiteling. Op een aantal plekken staan onjuiste woorden zoals op 0:05 "What's gebreide ijssel" in plaats van "Het Waterschap Rijn en IJssel". Ook ontbreekt de interpunctie waardoor de zinnen moeilijk te begrijpen zijn. Maak een goede ondertiteling.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 5: Bevinding aangepast na hercontrole: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 staat de video "Waterschap Rijn en IJssel start balgen-project in strijd tegen droogte". Er ontbreekt uitgeschreven tekst en er is geen audiodescriptie die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien en afhankelijk zijn van hulpsoftware zoals een schermvoorleessoftware niet weten wat er wordt getoond in de video. Het gaat bijvoorbeeld om de naam en functie van de spreker op tijdstip 0:22. Zet deze en andere informatie in een transcript. Of maak gebruik van een extra audiospoor om ook te voldoen aan SC 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Bevinding aangepast na hercontrole: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 staat de video "Waterschap Rijn en IJssel start balgen-project in strijd tegen droogte". Er ontbreekt een voiceover die vertelt wat er op het scherm staat. Zo kunnen mensen die de video niet kunnen zien niet weten wat er wordt getoond in de video. Laat de teksten in beeld uitspreken door een voiceover of maak gebruik van een audiodescriptie.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op de pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 zijn koppen opgemaakt met het strong element en niet als kop. Het gaat bijvoorbeeld om "Welkom op de Klimaatatlas van Duiven!" en "Wat zie ik op de kaart?". Bezoekers die gebruikmaken van schermvoorleessoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk dat koppen ook als kop opgemaakt zijn. Gebruik bijvoorbeeld H3 om deze koppen op te maken.

Bevinding 8: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 zijn alle links ook opgemaakt met het strong element. Strong heeft een semantische betekenis, het wordt gebruikt om de nadruk op een woord of een aantal woorden in een tekst te leggen. Gebruik strong niet voor opmaak, maak bijvoorbeeld alle links bold doormiddel van CSS.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 9: Bijvoorbeeld op de pagina https://weetvanwater.nl/nieuws-en-media/ staan blokken met een datum, een kop en tekst. Als de blokken achter elkaar worden voorgelezen is het niet duidelijk bij welke kop de afbeelding hoort. Zet de koppen vooraan in de HTML-code en zet hierachter de datum. Visueel mag deze indeling wel aangehouden worden. Hetzelfde probleem komt vaker voor in de website, bijvoorbeeld op de zoekresultaten pagina https://weetvanwater.nl/?s=water moet het type zoekresultaat, (Bericht/Tip/Verhaal/Pagina etc.) in de html na de titel van het zoekresultaat geplaatst worden.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Voldoende

Bevinding 10: Opmerking: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan kaarten met daarnaast een legenda. Bijvoorbeeld de kaart "Plasvorming na korte bui". De koppeling tussen de informatie in de legenda met de kaart gebeurt vrijwel uitsluitend doormiddel van kleur, bijvoorbeeld groene wegen voor begaanbaar en rode voor onbegaanbaar. Kaarten vormen een uitzondering binnen de Nederlandse wetgeving, maar het valt te overwegen om naast kleur ook andere eigenschappen te gebruiken, zoals verschillende arceringspatronen zodat een grotere groep bezoekers de aangeboden informatie kunnen waarnemen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://weetvanwater.nl/nieuws-en-media/ heeft de witte (grote) tekst "Nieuws en media" op lichtgele achtergrond (HEX #FFB82E) een te laag contrast. De contrastverhouding is hier 1,7:1 waar dat minstens 3:1 moet zijn.

Bevinding 12: Op de pagina https://weetvanwater.nl/nieuws-en-media/ wordt de kleur van een nieuwsitem titel lichtblauw bij hover. Deze lichtblauwe tekst (HEX #3AAEDF) heeft een te laag contrast met de witte achtergrond. De contrastverhouding is hier 2,5:1 waar dat minstens 4,5:1 moet zijn.

Bevinding 13: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea heeft de kleine blauwe tekst boven de titel van de pagina "Verzameling" (HEX ##3299AD) op witte achtergrond een te laag contrast. De contrastverhouding is hier 3,3 :1 waar dat minstens 4,5:1 moet zijn. De grotere tekst van de zelfde kleur "Klimaatatlassen" heeft voldoende contrast, voor grote tekst moet de verhouding minstens 3:1 zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 14: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan legenda's als afbeeldingen met tekst. Bijvoorbeeld onder "Plasvorming na korte bui" is een legenda "Plasvorming na korte bui". Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina. Plaats deze tekst daarom als HTML-tekst op de pagina. Hetzelfde komt vaker voor op deze website. Bij alle legenda's en bijvoorbeeld op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 bij de tekst "Zomerse hoosbuien worden heviger en vallen vaker" staat een afbeelding met klimaateffect 1 en 2. Klimaateffect 1 wordt in de tekst uitgelegd, maar klimaateffect 2 komt verder in de website niet voor.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 15: Wanneer bezoekers op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 inzoomen tot 400% bij een schermbreedte van 1280x1024px is er te weinig plaats voor de kaarten in de pagina, bijvoorbeeld voor de kaart "Plasvorming na korte bui". Met de knop "Uitklappen" kan de kaart groter in beeld vertoond worden, maar bijvoorbeeld de knoppen "Inzoomen" en "Uitzoomen" zijn dan niet beschikbaar. Zorg ervoor dat links en knoppen ook op lage resolutie blijven werken.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan kaarten, bijvoorbeeld de kaart "Plasvorming na korte bui". Als met de muis op een kaart geklikt worde verschijnt er een popup met informatie over de kaart. Deze informatie is niet beschikbaar bij navigatie met behulp van het toetsenbord. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=1 wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. Voeg de volgende eigenschap aan de embedcode toe: 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium. Hetzelfde komt ook voor op de website "Weetvanwater", bijvoorbeeld op pagina https://weetvanwater.nl/gemeente/duiven/ bij de video "Animatie Klimaatatllas".

2.2 Genoeg tijd

2.2.1 Timing aanpasbaar (Niveau A)

Informatie over succescriterium 2.2.1 Timing aanpasbaar

Uitkomst: Onvoldoende

Bevinding 18: Wanneer bezoekers op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 de knop 'Sectiekoppeling kopiëren' activeren, verschijnt een melding op het scherm. Deze melding verdwijnt na enige tijd. Dit kan er voor zorgen dat sommige bezoekers niet genoeg tijd hebben om de melding te lezen. Zorg ervoor bezoekers ervoor kunnen zorgen dat de melding langer in beeld blijft staan, of verwijder de tijdslimiet op de melding en zorg ervoor dat bezoekers deze zelf kunnen verwijderen, bijvoorbeeld met een sluitknop.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 19: Op de website Klimaatatlassen heeft elke pagina dezelfde titel "Klimaatatlassen", ook bijvoorbeeld de pagina "Klimaatatlas Duiven" https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7. Zorg dat elke pagina uniek identificeerbaar is doormiddel van een korte titel die de inhoud van de pagina beschrijft.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 20: Op de pagina https://weetvanwater.nl/tips/plaats-planten-en-bomen-om-de-hitte-buiten-te-houden/ staat een knop "Deel deze tips" waarmee een aantal sociale media iconen zichtbaar wordt. Deze iconen krijgen ook focus als ze niet zichtbaar zijn. Zorg ervoor dat alleen zichtbare interactieve elementen focus kunnen krijgen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 21: In de footer van elke pagina op de website "Weetvanwater" staan sociale media links, bijvoorbeeld de LinkedIn link. Deze hebben geen toegankelijke naam. Omdat de links daarmee geen linkdoel hebben, is het voor blinden en slechtzienden die gebruikmaken van een screenreader niet duidelijk waar de links heen gaan. Voeg een toegankelijke naam waarin het linkdoel is omschreven toe om dit probleem op te lossen. Hetzelfde probleem komt op meer plaatsen in de website voor, bijvoorbeeld op pagina https://weetvanwater.nl/tips/plaats-planten-en-bomen-om-de-hitte-buiten-te-houden/ bij de socialmedia links die beschikbaar komen als op de knop "Deel deze tip" geklikt wordt.

Bevinding 22: Onder andere op pagina https://weetvanwater.nl/nieuws-en-media/ is een navigatie om tussen de pagina's te kunnen navigeren. De naam van de links luiden nu '1', '2', '3', etc. Voor ziende bezoekers is het duidelijk dat het hier gaat om paginanummers, maar bezoekers die het scherm niet kunnen zien, weten niet dat deze links naar volgende pagina's verwijzen. Vul de toegankelijke naam van deze links daarom aan met het woord 'pagina' zodat het linkdoel voor screenreadergebruikers duidelijk is.

Bevinding 23: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan verschillende links met de linktekst "Weet van water" die naar verschillende pagina's in de "Weetvanwater" website gaan. Uit de directe context is niet af te leiden waar de links naar toe gaan. Zorg dat linkteksten duidelijk beschrijven waar de link naartoe gaat, bijvoorbeeld door de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 24: In de header van elke pagina staat een knop "Grote tekst aan/uit" waarmee een dropdown met drie knoppen geopend wordt: A-, A en A+. Deze knoppen hebben geen toegankelijke naam, bezoekers afhankelijk van hulpsoftware weten niet wat er gebeurt als hierop geklikt wordt. Geef deze knoppen een beschrijvende toegankelijke naam bijvoorbeeld doormiddel van een aria-label attribuut. Hetzelfde komt vaker in de website voor, bijvoorbeeld in de homepagina https://weetvanwater.nl/ in de carrousel bij de "Volgende" (>) en "Vorige" (<) knoppen.

Bevinding 25: Op de homepagina https://weetvanwater.nl/ staat onder "Nieuws en media" een element met een aria-label= "Carousel Navigation". Dit is geen interactief element, daarom mag aria-label hier niet gebruikt worden. Laat de aria-label code weg.

Bevinding 26: Als op pagina https://weetvanwater.nl/tips/plaats-planten-en-bomen-om-de-hitte-buiten-te-houden/ op de knop "Deel deze tip" geklikt wordt verdwijnt de tekst "Deel deze tip". Daardoor heeft de knop dan geen toegankelijke naam meer. Gebruikers die afhankelijk zijn van hulpsoftware weten niet wat er gebeurt als er bij focus op de enterknop geklikt wordt, namelijk dat de sociale media iconen uit beeld verdwijnen. Geef de knop een altijd beschikbare toegankelijke naam.

Bevinding 27: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan knoppen zonder toegankelijke naam. Bijvoorbeeld de foto naast de kop "Wateroverlast" van een ondergelopen straat zit in een element met het role="button" en een tabindex="0" attribuut. Gebruikers die afhankelijk zijn van hulpsoftware weten niet wat er gebeurt als op de enterknop geklikt wordt. Ook wordt de status van de knop niet weergegeven, is de foto vergroot weergegeven of niet. Geeft de knop een naam en status die beschrijven wat er gebeurt. Hetzelfde geldt voor alle foto's op de pagina en ook voor de afbeeldingen van de legenda's in het tekst gedeelte van de pagina bij "Wat zie ik op de kaart?".

Bevinding 28: Bevinding aangepast na hercontrole: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan in de header de knop "Meer acties". Deze knop is geplaatst in een div-element waarop het attribuut aria-expanded is geplaatst. Het is niet toegestaan om aria-expanded op een element zonder een geschikte rol te plaatsen. Daarnaast is aria-expanded ook geplaatst op de onderliggende button-elementen en daarom is het overbodig om het ook op het div-element te plaatsen. Los dit probleem op door aria-expanded van de div-elementen te verwijderen. Lees meer over aria-expanded op developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-05-22 18:28:49 v2.4-011