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 29 juli 2024
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: 52

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, zie 2.4.4.

Bevinding 2: Op pagina https://weetvanwater.nl/nieuws-en-media/grote-bomenactie-oude-ijsselstreek/ staat een infographic waarin het aantal bomen dat voor de bomenactie is uitgedeeld wordt getoond. Dit aantal komt verder op de pagina niet voor, de afbeelding bevat informatie en kan niet als illustratief beschouwd worden. Geef daarom een alt tekst of geef de informatie in de afbeelding ook weer in de tekst van de pagina om ook te voldoen aan 1.4.5. Hetzelfde komt vaker voor in de website, zoals op pagina https://weetvanwater.nl/nieuws-en-media/12-juni-kom-naar-de-inspiratieavond-groene-tuin-in-het-zone-college/. Hier 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://weetvanwater.nl/tips/plaats-planten-en-bomen-om-de-hitte-buiten-te-houden/ staan een aantal afbeeldingen van donkerblauwe en lichtblauwe stippen. Het aantal donkerblauwe stippen is een indicatie hoe hoog de "kosten", de "Moeilijkheid" of het "Onderhoud" is van deze tip. Bezoekers die de stippen niet kunnen zien en afhankelijk zijn van hulpsoftware weten nu niet hoeveel stippen donkerblauw zijn. Geef deze informatie ook op een toegankelijke manier, bijvoorbeeld in een onzichtbare tekst die alleen voor hulpsoftware beschikbaar is.

Bevinding 4: 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 5: 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 6: Op de homepagina https://weetvanwater.nl/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:06 "Ada heeft een groene tuin en gaat zuinig om met water". 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. 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 7: Op de homepagina https://weetvanwater.nl/ is er in de video op verschillende plaatsen tekst in beeld, bijvoorbeeld rond 0:06 "Ada heeft een groene tuin en gaat zuinig om met water". 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 8: Op pagina https://weetvanwater.nl/nieuws-en-media/grote-bomenactie-oude-ijsselstreek/ staat een tabel. De eerste rij beschrijft de inhoud van de twee onderliggende rijen, daarom moeten de cellen van de eerste rij als kopcellen (th) gemarkeerd worden zodat hulpsoftware de inhoud van de bijbehorende datacellen juist weer kan geven.

Bevinding 9: Op pagina https://weetvanwater.nl/verhalen/ada/ is de introtekst cursief gemaakt doormiddel van het em-element, dat is niet de bedoeling. Het em-element is net als het strong element bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een introtekst in een cursief lettertype te tonen. Hetzelfde komt vaker voor in de website, bijvoorbeeld op pagina https://weetvanwater.nl/nieuws-en-media/12-juni-kom-naar-de-inspiratieavond-groene-tuin-in-het-zone-college/ onder "Meer informatie" waar een groot stuk tekst met het em-element is opgemaakt en een ander stuk tekst met zowel het srong- element als het em-element.

Bevinding 10: 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 11: 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 12: 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.

Bevinding 13: Op pagina https://weetvanwater.nl/nieuws-en-media/12-juni-kom-naar-de-inspiratieavond-groene-tuin-in-het-zone-college/ staat een voetnoot. Voor ziende bezoekers is duidelijk waar deze voetnoot bij hoort. Zorg ervoor dat ook bezoekers van hulpsoftware begrijpen waar de voetnoot bij hoort, bijvoorbeeld door de tekst van de voetnoot direct achter de verwijzing te plaatsen in de HTML code. Visueel kan dezelfde volgorde worden aangehouden.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Voldoende

Bevinding 14: 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 15: Op de homepagina https://weetvanwater.nl/ staat in de carrousel
"Nieuws en media" bij elk item een publicatiedatum. De lichtgrijze kleur van de datum (HEX #9C9CC1) heeft een te laag contrast met de witte achtergrond. De contrastverhouding is hier 2,7:1 terwijl dit tenminste 4,5:1 moet zijn. Dit probleem komt vaker voor op de website, bijvoorbeeld bij de datum gegevens op pagina https://weetvanwater.nl/nieuws-en-media/.

Bevinding 16: Op de 404 pagina https://weetvanwater.nl/fout heeft de grijze tekst "Back to the home page" (HEX # C0C0C0) een te laag contrast met de witte achtergrond. De contrastverhouding is hier 1,8:1 waar dat minstens 4,5:1 moet zijn.

Bevinding 17: Op pagina https://weetvanwater.nl/tips/?c=buurt heeft de witte tekst "Bedrijf" op lichtblauwe achtergrond (HEX #3AAEDF) een te laag contrast. De contrastverhouding is hier 2,5:1 waar dat minstens 4,5:1 moet zijn. Deze kleurencombinatie komt op meer plaatsen in de website voor, bijvoorbeeld bij de knop "In je bedrijf" op de homepagina https://weetvanwater.nl.

Bevinding 18: Op pagina https://weetvanwater.nl/tips/?c=buurt heeft de witte tekst "Buurt" op lichtgele achtergrond (HEX #FFB82E) een te laag contrast. De contrastverhouding is hier 1,7:1 waar dat minstens 4,5:1 moet zijn. Deze kleurencombinatie komt op meer plaatsen in de website voor, bijvoorbeeld bij de knop "In je buurt" op de homepagina https://weetvanwater.nl.

Bevinding 19: Op pagina https://weetvanwater.nl/tips/?c=buurt heeft de witte tekst "Huis" op lichtgroene achtergrond (HEX #9AD15D) een te laag contrast. De contrastverhouding is hier 1,8:1 waar dat minstens 4,5:1 moet zijn. Deze kleurencombinatie komt op meer plaatsen in de website voor, bijvoorbeeld bij de knop "In je huis" op de homepagina https://weetvanwater.nl.

Bevinding 20: 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 21: 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 22: 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.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 23: Op elke pagina van de website "Weetvanwater" staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scalable=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 24: 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 25: Op elke pagina van de website "Weetvanwater" staat in de HTML-code bij meta name="viewport" de volgende instellingen: "maximum-scale=1.0" en "user-scalable=0". Op mobiel of tablet kunnen bezoekers daarom in sommige gevallen niet inzoomen. Laat deze instelling weg.

Bevinding 26: 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 27: Op de homepagina https://weetvanwater.nl/ staat in de header de knop "Kies je gemeente". Bezoekers die met het toetsenbord navigeren, bijvoorbeeld met de tabtoets, kunnen deze knop niet bedienen. Zorg ervoor dat alle interactieve elementen bereikbaar en bedienbaar zijn met het toetsenbord. hetzelfde komt vaker voor op de website, bijvoorbeeld op de zelfde pagina zijn onder "Ben jij al goed bezig? Check je klimaatscore" de ja/nee knoppen niet te bedienen en in de header van elke pagina op de website zijn bij de knop "Grote tekst aan/uit" de knoppen om de tekstgrootte te veranderen niet te bedienen met behulp van het toetsenbord.

Bevinding 28: 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 29: 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 30: 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.2.2 Pauzeren, stoppen, verbergen (Niveau A)

Informatie over succescriterium 2.2.2 Pauzeren, stoppen, verbergen

Uitkomst: Onvoldoende

Bevinding 31: Op veel pagina's van de website "Weetvanwater", bijvoorbeeld op de homepagina https://weetvanwater.nl onder "Ben jij al goed bezig? Check je klimaatscore" is een bewegende golf te zien, onder stilstaande content. Door de bewegende content, hebben sommige bezoekers moeite met het lezen en bekijken van de stilstaande content. Zorg ervoor dat bezoekers bewegende of scrollende content kunnen stoppen of pauzeren, of verwijder de bewegende of scrollende content.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 32: Op elke pagina van de website "Weetvanwater" ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd. Zie voor een voorbeeld van een skiplink https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 .

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 33: 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 34: Op de homepagina https://weetvanwater.nl/ staat een element met de toegankelijke naam "Carrousel Navigation" waarbij het attribuut tabindex="0" is gebruikt. Daardoor krijgt dit element focus terwijl het niet interactief is. De bijbehorende knoppen zijn wel interactief maar zij krijgen geen focus omdat hier tabindex="-1" is gebruikt. Dit is niet erg omdat met behulp van de tab-toets alle elementen in de carrousel focus krijgen, maar zorg dat de focusvolgorde door webpagina's logisch is, wanneer men met het toetsenbord navigeert. Plaats geen tabindex="0" op elementen die geen focus horen te krijgen.

Bevinding 35: 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.

Bevinding 36: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 is de tabpanel (een div-element met role=tabpanel) opgenomen in de focus volgorde doordat hier tabindex=0 op is geplaatst. Dit is geen interactief element en moet dus geen focus krijgen. Zorg ervoor dat dit element uit de focus volgorde wordt gehaald door hier bijvoorbeeld tabindex=-1 op te plaatsen. Het komt vaak voor op de website dat elementen die niet interactief zijn focus krijgen doormiddel van tabindex=0, bijvoorbeeld bij elke kaart op dezelfde pagina.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 37: Op de homepagina https://weetvanwater.nl/ staat onder "Nieuws en media" een carrousel. De elementen die niet meteen zichtbaar zijn krijgen wel focus bij navigatie met de tab-toets, bijvoorbeeld de link "Vanaf 13 mei rijdt Tegeltaxi Montferland". Omdat het element waarbinnen de link zich bevind verborgen is voor hulpsoftware heeft de link geen toegankelijk linkdoel. Zorg er voor dat ook bezoekers die afhankelijk zijn van hulpsoftware weten wat het linkdoel is, laat het aria-hidden attribuut hier weg.

Bevinding 38: 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 39: 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 40: 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.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 41: Als met behulp van het toetsenbord doormiddel van de tab-toets door de website "weetvanwater" genavigeerd wordt, bijvoorbeeld op de homepagina https://weetvanwater.nl is er geen focusrand te zien rond een elementen dat focus heeft. Dat geldt voor bijna alle interactieve elementen op de pagina. Zorg ervoor dat bezoekers die met het toetsenbord navigeren weten welk element de focus heeft door een duidelijke focusrand toe te voegen.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 42: Op de homepagina https://weetvanwater.nl/ staan onder "Aan de slag" vier knoppen. De knop "in je bedrijf" heeft de toegankelijke naam "Bedrijf". Deze bevat niet de volledige naam die visueel zichtbaar is. Zorg ervoor dat de visuele naam in de toegankelijke naam aanwezig is, liefst vooraan. Hetzelfde geldt voor de drie andere knoppen.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 43: De 404 pagina https://weetvanwater.nl/fout is een Engelstalige pagina, maar is gecodeerd als Nederlandstalig waardoor voorleessoftware de tekst verkeerd uitspreekt. Maak de tekst Nederlandstalig zoals de rest van de website.

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 44: In de header van elke pagina van de website "weetvanwater" staat de knop "Donkere modus aan/uit". Voor bijvoorbeeld blinde bezoekers is het niet duidelijk of de knop aan of uit staat. Geef de staat van de knop door aan hulpsoftware, door de naam of de status van de knop te veranderen. hetzelfde komt vaker voor in de website, bijvoorbeeld bij de "Menu tonen/verbergen" knop in de header van elke pagina.

Bevinding 45: 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 46: Op de homepagina https://weetvanwater.nl/ staat onder "Nieuws en media" een element met een aria-label= "Carrousel Navigation". Dit is geen interactief element, daarom mag aria-label hier niet gebruikt worden. Laat de aria-label code weg.

Bevinding 47: Op pagina https://weetvanwater.nl/gemeente/duiven/ staat een carrousel "Nieuws uit de Liemers". Nieuwsitems daarin die nog niet in beeld staan hebben een aria-hidden="true" en een tabindex="-1" attribuut met daarbinnen een link. Binnen elementen die verborgen zijn voor hulpsoftware met aria-hidden mogen geen elementen liggen die focus krijgen. Geef de link een tabindex="-1" of bijvoorbeeld een aria-hidden="true". Hetzelfde komt vaker voor in de website, bijvoorbeeld bij de carrousel "Nieuws en media" op de homepagina https://weetvanwater.nl/ en op pagina https://weetvanwater.nl/tips/?c=buurt .

Bevinding 48: 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 49:
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 50: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staan in de header de knoppen "Delen" en "Meer acties". Deze knoppen zijn 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.

Bevinding 51: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 in de header heeft de knop " Collectie-overzicht openen" de rol "navigation" gekregen via het role-attribuut. Dit is niet de geschikte rol voor dit element, want role=navigation geeft aan dat ergens een navigatiemenu staat. Omdat het element werkt als een knop is het beter om dit ook de rol 'button' te geven. Los dit probleem op door het attribuut role=navigation te verwijderen.

Bevinding 52: Op pagina https://storymaps.arcgis.com/collections/6715794b5d1f4122aa0858c8943b04ea?item=7 staat video in een iframe zonder toegankelijke naam. Hierdoor weten gebruikers van hulpsoftware niet wat er in het iframe staat. Zorg ervoor dat de iframe een goede toegankelijke naam krijgt door het title-attribuut te gebruiken.

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-01-29 21:06:57 v2.4-011