Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid website Waterschap Hollandse Delta

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Waterschap Hollandse Delta (WSHD)
Datum 10 december 2024
Scope van de website Binnen de scope van het onderzoek valt:
Buiten de scope van het onderzoek valt:
en https://wshd.publicaties.app/pub/begroting2025-bijlageinvesteringen/1/p1-homepage.
Dit is onderzocht in de systeem-audit te vinden op pagina https://toegankelijkheidsrapport.swink.nl/inergy/.
  • 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: 20

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: Op https://wshd.publicaties.app/pub/begroting2025/1/p5-samenvattingbegroting2025 staat een infographic met een leeg alt-attribuut. Deze afbeelding is niet puur decoratief en heeft daarom een alternatieve tekst nodig. Voeg een alternatieve tekst toe en verwijs hierin naar de toelichting van de infographic.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 2: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p50-gehanteerdeuitgangspuntenennormen staat onder de koptekst H3 een tabel met een lege tabelkop. Zorg dat elke kopcel een naam heeft die de bijbehorende cellen beschrijft of, als dit de eerste kolom betreft zorg dat hier geen kop (<th> wordt gebruikt maar een cel (<td>).
Een soortgelijk probleem zien we terug op pagina https://wshd.publicaties.app/pub/begroting2025/1/p5-samenvattingbegroting2025 in de tabel die zichtbaar wordt wanneer je het tabblad "Inkomsten en Uitgaven" onder de infographic open klikt. Ook hier zien we een lege tabelkop.

Bevinding 3: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten staat een tabel "Tabel exploitatie Bestuur en Organisatie". Deze tabel heeft role="presentation", maar dit mag alleen gebruikt worden bij tabellen die niet als tabel werkt/tabellen die alleen voor grafische weergave zijn. Er zijn hier ook problemen met het navigeren door de tabel met het toetsenbord. Aangezien dit een content-audit is en dit een technische bevinding is, wordt dit niet onder dit succes criterium afgekeurd. Dit toetsenbordprobleem geldt ook voor de tabellen op pagina https://wshd.publicaties.app/pub/begroting2025-bijlageinvesteringen/1/p3-investeringsuitgaven2025-2029.

Bevinding 4: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/404 zijn koppen aanwezig die niet als koppen zijn opgemaakt, bijvoorbeeld "404" en "Deze pagina is niet beschikbaar". Gebruik de juiste HTML-code om deze koppen op te maken.

Bevinding 5: Advies: Op de homepage https://wshd.publicaties.app/pub/begroting2025/1/p1-homepage ontbreekt de eerste kop (H1). Het is gebruikelijk om de content van een pagina te laten beginnen met een H1; op een homepage hoeft deze niet in beeld te staan, en volstaat het om deze kop de naam te geven van de website. De afwezigheid van een H1 is een best practice en geen reden tot afkeur.

Bevinding 6: Advies: Er worden kopniveaus overgeslagen op meerdere pagina's, bijvoorbeeld pagina https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen, https://wshd.publicaties.app/pub/begroting2025/1/p6-exploitatie, https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen, https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten, https://wshd.publicaties.app/pub/begroting2025/1/p50-gehanteerdeuitgangspuntenennormen.
Bezoekers die gebruikmaken van hulpsoftware kunnen aan de hand van een sneltoets of een koppenlijst over een pagina navigeren om snel informatie te vinden. Daarom is het belangrijk om een goed lopende koppenstructuur te gebruiken. Een goede koppenstructuur begint bij een kopniveau 1 voor de titel van de pagina, kopniveau 2 voor de koppen, kopniveau 3 voor de tussenkoppen, enzovoorts.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 7: De link in de lopende tekst op pagina https://wshd.publicaties.app/pub/begroting2025/1/p6-exploitatie, linktekst "Programma’s" (in de alinea onder de eerste tabel), is alleen herkenbaar doordat deze een andere kleur heeft. Slechtzienden en kleurenblinden kunnen hierdoor mogelijk niet herkennen dat het om een link gaat. Zorg ervoor dat hyperlinks in lopende tekst ook herkenbaar zijn aan minimaal één andere eigenschap, bijvoorbeeld door ze te onderstrepen.
Een soortgelijk probleem zien we terug op pagina https://wshd.publicaties.app/pub/begroting2025/1/p41-weerstandvermogenenrisicobeheersing. Hier gaat het om de links "Risico's" (in de eerste alinea) en "Waterschapsbelasting - Grondslagen en Kwijtschelding - Kostentoerekening (doorbelasting indirecte kosten)" (na de eerste tabel).

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 8: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/search.html?query=toegankelijkheid staat onder de paginatitel van het zoekresultaat een URL naar de pagina. De grijze (HEX #848484) tekst op de witte achtergrond biedt te weinig contrast. De contrastverhouding is hier 3.7:1 waar dit minimaal 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 9: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p50-gehanteerdeuitgangspuntenennormen staat in het zijpaneel onder "Financiële overzichten" de huidige pagina. Bij een muishover krijgt de donkergrijze tekst (HEX #414141) een witte kleur. Op de grijze achtergrond (HEX #F4F4F8) biedt dit te weinig contrast. De contrastverhouding is hier 1.1:1 waar dit minimaal 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://wshd.publicaties.app/pub/begroting2025-bijlageinvesteringen/1/p1-homepage staat een afbeelding met tekst "Waterschap Hollandse Delta Programmabegroting 2025 Bijlage: Investeringen VERTROUWELIJK". Slechtzienden kunnen deze tekst niet aanpassen om de leesbaarheid te verhogen. De tekst op de afbeelding komt verder niet voor op de pagina, zodat blinden deze informatie helemaal moeten missen. Plaats deze tekst daarom als HTML-tekst op de pagina.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 11: Wanneer de button "Type" op pagina https://wshd.publicaties.app/pub/begroting2025/1/p6-exploitatie toetsenbordfocus heeft, is dat zichtbaar door een blauwe (HEX #35BAF6)focusrand. De contrastverhouding tussen de focusrand en de grijze (HEX #E0E0E0) knop is 1.6:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Maak gebruik van een kleurencombinatie met voldoende contrast.
Dit contrastprobleem zien we terug op nog een aantal pagina's waar dezelfde knopkleur en focusrand wordt gebruikt, namelijk https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen, https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten en https://wshd.publicaties.app/pub/begroting2025-bijlageinvesteringen/1/p16-verloopinvesteringsuitgaven.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 12: De paginatitel op pagina https://wshd.publicaties.app/pub/begroting2025/1/404 ontbreekt. Zorg dat er door middel van het title-element een beknopte titel aanwezig is die de inhoud van de pagina beschrijft.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 13: Op https://wshd.publicaties.app/pub/begroting2025/1/p1-homepage en elke pagina met de footer staat de link "Toegankelijkheid". Deze link heeft wel een linktekst maar die beschrijft het linkdoel niet. De link leidt je naar Homepage. Het title-attribuut wordt niet door alle browsers en hulpsoftware even goed ondersteund en is daarom geen vervanging van het alt-attribuut.

Bevinding 14: Advies: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/search.html?query=toegankelijkheid staat onder de URL een beschrijving van de link. Deze wordt midden in de zin afgebroken, hier lijkt een maximum aantal tekens op te zitten. Dit is niet afkeurbaar maar staat mooier als het aangepast wordt.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 15: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p1-homepage staat onderaan de pagina de knop "Inloggen". De knop heeft het aria-label "Login notitieservice", deze tekst wijkt af van de zichtbare tekst. Doordat het visuele label en de toegankelijke naam van deze knop niet overeenkomen, is de knop niet of moeilijk te bedienen door bezoekers die afhankelijk zijn van spraaksoftware. Zorg ervoor dat het visuele label van deze knop in de toegankelijke naam voorkomt, het liefst vooraan.

Bevinding 16: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten staan boven de tabel een knop "Type" (aria-label: Gegroepeerd op) en een knop "Baten/Lasten" (aria-label: Gegroepeerd op). Het aria-label is hier niet gelijk aan de naam in beeld en het overschrijft de toegankelijke naam.
Wijzig hier in beide gevallen het aria-label van de knoppen naar de visuele naam.

3. Begrijpelijk

3.1 Leesbaar

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 17: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen staan uitklapbare blokken.
Van de uitklapbare elementen onder ‘Toelichting’ wordt de staat van de elementen in het Engels voorgelezen. Dit komt doordat de tekst van het aria-roledescription attribuut Engelstalig is (‘Collapsed row’ of ‘Expanded row’). Vertaal deze teksten, omdat de taal van de pagina Nederlands is.
Een soortgelijk probleem zien we terug op dezelfde pagina (https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen) in de witte balk met de knop "Speerpuntkopje" en "Alles uitklappen". Het aria-label van deze 'balk' luidt "Data grid toolbar". Vertaal deze teksten naar het Nederlands zodat ze in het Nederlands worden voorgelezen.

Bevinding 18: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten staan boven de tabel de knoppen "Type" en "Baten/Lasten". Deze knoppen hebben een Engelstalige aria-roledescription=”Column sorted in descending order’. Vertaal deze teksten naar het Nederlands.

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 19: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p25-watwillenwebereikenwatgaanwedaarvoordoen staat boven de uitklapbare blokken een knop met de tekst "Speerpuntkopje". De staat van de knop (en functie) wordt niet goed doorgegeven, waardoor niet te horen is op welke manier de onderwerpen gesorteerd zijn. Visueel wordt deze info overgebracht door middel van het pijltje. De knop functioneert wel goed. Er lijkt nog een element met dezelfde functie te zijn, bij de knop ‘Toelichting’ wordt nadat deze eenmaal is aangeklikt (of op enter gedrukt) ook een pijltje zichtbaar en wordt dit voorgelezen als bijvoorbeeld ‘Oplopend gesorteerd’. Deze knop functioneert echter niet. Een mogelijke oplossing is dat één van beide sorteeropties wordt verwijderd en de andere goed functioneel wordt gemaakt. Waarbij de staat en functie van de knop correct door hulpsoftware geïnterpreteerd en voorgelezen kan worden.

Bevinding 20: Op pagina https://wshd.publicaties.app/pub/begroting2025/1/p26-watmaghetkosten staat onder de koptekst h4 "Investeringsuitgaven Bestuur en Organisatie" een taartdiagram. Zowel bij de weergave van de taartdiagram als de weergave van de tabel staat er het volgende op de div: aria-selected="true".
Dit attribuut is niet te gebruiken op dit element. Dit is alleen mogelijk op gridcell, option, row en tab en geeft dan de status weer.

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-02-05 10:51:16 v2.4-011