Proper Access

Willemserf 20, 3755XK Eemnes | Tel: 085 5055 890 | E-mail: contact@properaccess.nl | OB-nummer: NL867096755B01

Audit digitale toegankelijkheid website monitorleefomgeving.zuid-holland.nl

Over deze evaluatie

Rapport auteur
Proper Access
Evaluatie opdrachtgever
provincie Zuid-Holland
Evaluatiedatum
27 oktober 2025

Managementsamenvatting

Wij hebben de website monitorleefomgeving.zuid-holland.nl onderzocht tussen 20 en 27 oktober 2025. Op dit moment zijn 43 van de 55 succescriteria als voldoende beoordeeld. In dit rapport lees je wat er bij de overige 12 nog fout gaat, en hoe je dat kunt verbeteren.

De meest opvallende bevindingen:

  • Bij het logo ontbreekt een tekstueel alternatief, wat de toegankelijkheid voor gebruikers van schermlezers beperkt.
  • Ontbrekende relatie tussen foutmeldingen en invoervelden: Foutmeldingen in formulieren zijn niet programmatisch gekoppeld aan de betreffende invoervelden, waardoor hulpsoftware de fout niet correct kan doorgeven.
  • Onvoldoende kleurcontrast in legenda-items: Informatie wordt uitsluitend via kleur overgebracht, en de contrastverhouding van sommige kleuren in legenda's is te laag ten opzichte van de achtergrond, wat de leesbaarheid voor gebruikers met visuele beperkingen bemoeilijkt.

Scope van de evaluatie

Website naam
monitorleefomgeving.zuid-holland.nl
Scope van de website
Binnen de scope van het onderzoek valt:
  • Alle pagina's op monitorleefomgeving.zuid-holland.nl.
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.
WCAG Versie
2.2
Conformiteitsdoel
AA
Basisniveau van toegankelijkheid-ondersteuning
Gangbare browsers en hulpapparatuur.
Verdere onderzoeksvereisten
Niet ingevuld

Uitgebreide toetsresultaten

Samenvatting

Gerapporteerd over 55 van 55 WCAG 2.2 AA Success Criteria.

Alle resultaten

1 Waarneembaar

1.1 Tekstalternatieven
Success Criterium Uitkomst Bevindingen
1.1.1: Niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen:

Logo heeft geen tekstalternatief

Impact: groot | Type: Content

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34 nadat in het bovenste filter “Monitor Leefomgeving 2024” is geselecteerd, wordt onder de kop “Indicator op de kaart” een kaart getoond. Het logo bovenaan de kaart heeft geen alt-tekst. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Een lege alt-tekst betekent: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moeten informatieve afbeeldingen altijd een alt-tekst krijgen.

Oplossing: Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

1.2 Op tijd gebaseerde media
Success Criterium Uitkomst Bevindingen
1.2.1: Louter-geluid en louter-videobeeld (vooraf opgenomen)

Uitkomst: Niet van toepassing

1.2.2: Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Niet van toepassing

1.2.3: Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Niet van toepassing

1.2.4: Ondertitels voor doven en slechthorenden (live)

Uitkomst: Niet van toepassing

1.2.5: Audiodescriptie (vooraf opgenomen)

Uitkomst: Niet van toepassing

1.3 Aanpasbaar
Success Criterium Uitkomst Bevindingen
1.3.1: Info en relaties

Uitkomst: Onvoldoende

Bevindingen:

Relatie tussen foutmelding en het veld ontbreekt in HTML

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/login worden foutmeldingen “Dit veld is verplicht” in het formulier getoond. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker.

Oplossing: Dit kan opgelost worden door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

Koppen van hetzelfde niveau direct onder elkaar

Impact: medium | Type: Content

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1 staan zes kaarten met links. In elke link staat een kop, zoals “Milieukwaliteit & Gezondheid”, “Veiligheidsrisico's”, “Klimaat” en andere. Hierdoor verschijnen meerdere koppen van niveau 3 direct achter elkaar zonder echte inhoud, wat de logische documentstructuur doorbreekt en bezoekers die een schermlezer gebruiken kan verwarren. Koppen horen niet voor visuele opmaak of als label van individuele links te worden gebruikt.

Oplossing: De koppen kunnen worden vervangen door gewone tekstelementen, bijvoorbeeld een p- of span-element, of de beschrijvende tekst kan direct in de link worden gezet. Koppen moeten alleen worden gebruikt wanneer zij betekenisvolle secties met inhoud inleiden. Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Lijst is niet correct gemarkeerd

Impact: medium | Type: Content

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1 staat onder de kop "Milieukwaliteit & Gezondheid" een lijst met twee items zonder juiste markering. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd.
Hetzelfde probleem is op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1/35 bij de lijsten onder de teksten “De kernindicator op nationaal niveau bestaat uit vier deelindicatoren:”, “Voor de indicator Beweegvriendelijke Omgeving binnen de monitor leefomgeving Zuid-Holland wordt alleen gebruik gemaakt van de deelindicatoren” en “Een buurt of gemeente scoort daarbij op een schaal van 0 tot 80 met een indeling naar:”, op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25 met vergelijkbare lijsten en op andere pagina’s.

Oplossing: Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. 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. Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd. Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

Meerdere alinea’s in een p-element

Impact: medium | Type: Content

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1/35 is onder de kop "Beweegvriendelijke omgeving" een tekstblok met meerdere alinea’s onjuist gemarkeerd als één enkel p-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Hetzelfde probleem is op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25 onder de kop “Waterveiligheid”, op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/11 onder de kop “Omgevingsveiligheid: aandachtsgebieden en zeer kwetsbare gebouwen” en op andere vergelijkbare pagina’s.

Oplossing: Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Kop is niet als koptekst gemarkeerd

Impact: groot | Type: Content

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25 lijken de teksten "Openbaar beschikbaar?" en "Link naar databron" visueel op koppen, maar ze zijn niet gemarkeerd als h-elementen. 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. Hetzelfde probleem is op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21 met identieke koppen. Een vergelijkbaar probleem is op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/11 met teksten zoals “Wat is omgevingsveiligheid?”, “De indicatoren voor omgevingsveiligheid in de Monitor Leefomgeving” en andere, en op andere pagina’s.

Oplossing: 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.

1.3.2: Betekenisvolle volgorde

Uitkomst: Voldoende

1.3.3: Zintuiglijke eigenschappen

Uitkomst: Voldoende

1.3.4: Weergavestand

Uitkomst: Voldoende

1.3.5: Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevindingen:

Autocomplete-attribuut ontbreekt

Impact: groot | Type: Content/Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/login ontbreekt bij het formulier met invoervelden voor persoonlijke gegevens (e-mailadres en wachtwoord) het attribuut autocomplete. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres, wachtwoord of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing: Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

1.4 Onderscheidbaar
Success Criterium Uitkomst Bevindingen
1.4.1: Gebruik van kleur

Uitkomst: Onvoldoende

Bevindingen:

Kleur wordt gebruikt om informatie te geven

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/ opent de knop “Hoe werkt de monitor?” een dialoogvenster met de legenda-informatie. In deze legenda wordt alleen kleur gebruikt om informatie over te brengen. Dit is te zien bij de kleurblokken onder de koppen “Wat is het nu?” en “Waar komen we op uit?”. Alleen mensen die kleuren kunnen zien en onderscheiden, kunnen bepalen welk segment bij welke categorie in de legenda hoort.

Oplossing: Dit probleem kan worden opgelost door naast kleur bijvoorbeeld ook verschillende soorten arceringen of datalabels te gebruiken.

1.4.2: Geluidsbediening

Uitkomst: Niet van toepassing

1.4.3: Contrast (minimum)

Uitkomst: Voldoende

1.4.4: Herschalen van tekst

Uitkomst: Onvoldoende

Bevindingen:

Informatie verloren na inzoomen

Impact: groot | Type: Techniek

Wanneer de pagina https://monitorleefomgeving.zuid-holland.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 200%, en de weergave “Lijst” is geselecteerd, raakt de eerste kolom in de tabel gedeeltelijk uit beeld.

Oplossing: Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

1.4.5: Afbeeldingen van tekst

Uitkomst: Voldoende

1.4.10: Reflow

Uitkomst: Onvoldoende

Bevindingen:

Informatie verloren na inzoomen

Impact: groot | Type: Techniek

Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de in de header de geselecteerde optie in de filter, bijvoorbeeld “Monitor Leefomgeving 2025”, gedeeltelijk uit beeld.

Oplossing: Zorg dat alles nog werkt en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Informatie verloren na inzoomen

Impact: groot | Type: Techniek

Als de pagina https://monitorleefomgeving.zuid-holland.nl/ wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, en de weergave “Lijst” is geselecteerd, verdwijnt de eerste kolom “Thema” volledig en raakt de tweede kolom “Titel” gedeeltelijk uit beeld. Hetzelfde probleem doet zich voor bij de kolom “Thema” in de tabel op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1.

Oplossing: Zorg dat inhoud niet verdwijnt wanneer op de pagina wordt ingezoomd.

Informatie verloren na inzoomen

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25 staat onder de tekst “Link naar databron” een lange link. Wanneer de pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, loopt deze link buiten de rechterrand van de viewport, waardoor horizontaal moet worden gescrold om de volledige link te zien. Hetzelfde probleem is op pagina’s https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/9/7 en https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/37 bij soortgelijke links onder de tekst “Link naar databron”.

Oplossing: De link moet worden voorzien van een tekst die op de pagina past, ook bij een breedte van 320 pixels, zodat onnodig horizontaal scrollen wordt vermeden.

Advies

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34, met “Monitor Leefomgeving 2024” geselecteerd in het bovenste filter, is bij een schermresolutie van 1280 bij 1024 pixels en 400% zoom de ruimte tussen de header en de schermrand te klein, waardoor de inhoud slecht leesbaar is. Bezoekers moeten voortdurend scrollen om tekstregels volledig te kunnen bekijken, wat leidt tot verwarring en een slechte gebruikservaring. Zorg dat de sticky header bij vergroting kleiner wordt weergegeven of dynamisch wordt aangepast, zodat voldoende ruimte overblijft voor de inhoud. Hierdoor blijft de informatie leesbaar en bruikbaar voor bezoekers die afhankelijk zijn van hoge zoomniveaus.

1.4.11: Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevindingen:

Onvoldoende kleurcontrast van legenda items

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/ opent de knop “Hoe werkt de monitor?” een dialoogvenster met de legenda-informatie. Sommige kleuren hebben een te lage contrastratio ten opzichte van de achtergrond. Zo heeft het gele (#EFCC36) kleur onder de kop “Wat is het nu?” een contrastratio van 1,6:1 op een witte achtergrond, en het lichtgroene (#7FBFA6) kleur onder de kop “Waar komen we op uit?” een contrastratio van 2,1:0. Een vergelijkbaar probleem is aanwezig bij de gele cirkels in de tabel wanneer de weergave “Lijst” is geselecteerd voor “Indicatoren”.

Oplossing: Controleer ook de andere kleuren en pas hun contrastratio aan tot minimaal 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Onvoldoende kleurcontrast op hover

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/, wanneer de visualisatie “Lijst” naast de kop “Indicatoren” is geselecteerd, wordt een tabel getoond. Wanneer met de muis over de knoppen in de tabelheader wordt bewogen, verschijnen iconen van pijlen om inhoud te soorteren. Deze iconen zijn lichtgroen (#99CCB8) en hebben onvoldoende contrastratio tegen de witte achtergrond; de gemeten waarde van 1,8:1 is te laag. Het icoon is dus niet voor iedereen zichtbaar.

Oplossing: Zorg voor een minimaal contrast van 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Onvoldoende kleurcontrast van informatieve iconen

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34, wanneer in het bovenste filter “Monitor Leefomgeving 2024” is geselecteerd, wordt onder de kop “Indicator op de kaart” een kaart getoond. De knop “Afdrukken” boven de kaart opent een dialoogvenster. In dit dialoogvenster heeft het toetsenbordfocus op de knoppen met pijlen omhoog (“Inklappen”) en het “x”-icoon (“Sluiten”) een donkerblauwe (#1B1549) kleur op een blauwe (#281F6B) achtergrond. De contrastratio van 1,2:1 is lager dan de vereiste minimale waarde van 3,0:1 voor informatieve elementen. Hetzelfde probleem doet zich voor met de link "Zuid-Holland" in de voettekst van de kaart.

Oplossing: Zorg voor een minimaal contrast van 3,0:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

1.4.12: Tekstafstand

Uitkomst: Onvoldoende

Bevindingen:

Onvoldoende kleurcontrast van informatieve iconen

Impact: groot | Type: Techniek

Wanneer bezoekers tekstspatiëring toepassen zoals beschreven in dit succescriterium, gaat de geselecteerde optie in de filter in de header, bijvoorbeeld "Monitor Leefomgeving 2025", gedeeltelijk verloren. Sommige bezoekers passen de weergave van de tekst aan, zodat zij deze beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in het succescriterium is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.

Oplossing: Dit kan opgelost worden door de hoogte en breedte van de containers van de tekst responsief te maken.

1.4.13: Content bij hover of focus

Uitkomst: Voldoende

2 Bedienbaar

2.1 Toetsenbordtoegankelijk
Success Criterium Uitkomst Bevindingen
2.1.1: Toetsenbord

Uitkomst: Voldoende

2.1.2: Geen toetsenbordval

Uitkomst: Voldoende

2.1.4: Enkel teken sneltoetsen

Uitkomst: Niet van toepassing

2.2 Genoeg tijd
Success Criterium Uitkomst Bevindingen
2.2.1: Timing aanpasbaar

Uitkomst: Voldoende

2.2.2: Pauzeren, stoppen, verbergen

Uitkomst: Niet van toepassing

2.3 Toevallen en fysieke reacties
Success Criterium Uitkomst Bevindingen
2.3.1: Drie flitsen of beneden drempelwaarde

Uitkomst: Voldoende

2.4 Navigeerbaar
Success Criterium Uitkomst Bevindingen
2.4.1: Blokken omzeilen

Uitkomst: Voldoende

2.4.2: Paginatitel

Uitkomst: Voldoende

2.4.3: Focus volgorde

Uitkomst: Onvoldoende

Bevindingen:

Focusvolgorde klopt niet

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34, wordt wanneer in het bovenste filter “Monitor Leefomgeving 2024” is geselecteerd onder de kop “Indicator op de kaart” een kaart getoond. In deze kaart komt het toetsenbordfocus terecht op een onzichtbaar interactief element direct na het logo “Provincie Zuid-Holland”. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing: Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Focus komt op een onzichtbaar element terecht

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/4/41, onder de kop “Indicator op de kaart”, staat een kaart. In de rechterbovenhoek van de kaart komt het toetsenbordfocus terecht op een onzichtbaar element dat onder de “Legenda” verborgen is en daardoor niet waarneembaar en niet bedienbaar is. Hetzelfde probleem doet zich voor op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21 met de kaart onder de kop "Indicator op de kaart".

Oplossing: Zorg dat interactieve elementen niet worden bedekt door andere elementen op de pagina.

2.4.4: Linkdoel (in context)

Uitkomst: Voldoende

2.4.5: Meerdere manieren

Uitkomst: Voldoende

2.4.6: Koppen en labels

Uitkomst: Voldoende

2.4.7: Focus zichtbaar

Uitkomst: Voldoende

2.4.11: Focus Not Obscured (Minimum)

Uitkomst: Onvoldoende

Bevindingen:

Focus komt op een onzichtbaar element terecht

Impact: groot | Type: Techniek

Op sommige pagina’s van de website staat bovenaan een kruimelpad. Zie de pagina’s https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1, https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1, https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1/35 en andere. Wanneer een bezoeker op de skiplink bovenaan de pagina klikt, verplaatst het toetsenbordfocus naar het kruimelpad, maar die is verborgen achter de sticky header. Hierdoor kunnen toetsenbordgebruikers niet zien waar de focus zich bevindt.

Oplossing: Zorg dat de sticky header interactieve elementen of hun focusindicatoren niet bedekt. Dit kan worden opgelost door het z-index aan te passen of elementen te herpositioneren.

2.5 Input Modaliteiten
Success Criterium Uitkomst Bevindingen
2.5.1: Aanwijzergebaren

Uitkomst: Niet van toepassing

2.5.2: Aanwijzerannulering

Uitkomst: Voldoende

2.5.3: Label in naam

Uitkomst: Voldoende

2.5.4: Bewegingsactivering

Uitkomst: Niet van toepassing

2.5.7: Dragging Movements

Uitkomst: Niet van toepassing

2.5.8: Target Size (Minimum)

Uitkomst: Voldoende

3 Begrijpelijk

3.1 Leesbaar
Success Criterium Uitkomst Bevindingen
3.1.1: Taal van de pagina

Uitkomst: Voldoende

3.1.2: Taal van onderdelen

Uitkomst: Voldoende

3.2 Voorspelbaar
Success Criterium Uitkomst Bevindingen
3.2.1: Bij focus

Uitkomst: Voldoende

3.2.2: Bij input

Uitkomst: Voldoende

3.2.3: Consistente navigatie

Uitkomst: Voldoende

3.2.4: Consistente identificatie

Uitkomst: Voldoende

3.2.6: Consistent Help

Uitkomst: Voldoende

3.3 Assistentie bij invoer
Success Criterium Uitkomst Bevindingen
3.3.1: Foutidentificatie

Uitkomst: Onvoldoende

Bevindingen:

Foutmeldingen beschrijven niet wat er fout is gegaan

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/login, tonen de foutmeldingen in het formulier de boodschap "Dit veld is verplicht". Dit is een instructie, geen foutmelding.

Oplossing: Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld". Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

3.3.2: Labels of instructies

Uitkomst: Voldoende

3.3.3: Foutsuggestie

Uitkomst: Voldoende

3.3.4: Foutpreventie (wettelijk, financieel, gegevens

Uitkomst: Niet van toepassing

3.3.7: Redundant Entry

Uitkomst: Voldoende

3.3.8: Accessible Authentication (Minimum)

Uitkomst: Voldoende

4 Robuust

4.1 Compatibel
Success Criterium Uitkomst Bevindingen
4.1.2: Naam, rol, waarde

Uitkomst: Onvoldoende

Bevindingen:

Toestand van de knop is niet duidelijk voor een blinde bezoeker

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/ hebben de knoppen met de tekst "Visueel" en "Lijst" twee toestanden (ingedrukt, niet ingedrukt) maar missen een programmatische indicatie van hun huidige toestand. Hierdoor kan hulpsoftware deze informatie niet doorgeven. Blinde bezoekers weten daardoor niet wat de toestand is van de knoppen.

Oplossing: Dit kan worden opgelost door verborgen tekst toe te voegen die alleen zichtbaar is voor de schermlezer.

Interactief element heeft geen interactieve rol in HTML

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/ wordt wanneer de visualisatie “Lijst” naast de kop “Indicatoren” is geselecteerd, een tabel getoond. Elke rij in de tabel is een link, maar deze heeft geen correct toegankelijke rol. Elk HTML-element heeft standaard een bepaalde rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de gebruiker te geven of om informatie van de gebruiker 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 gebruiker uitleggen wat het element doet.

Oplossing: Zorg dat de link de rol van link krijgt door het HTML-element <a> te gebruiken, of voeg `role=”link” toe. Nadat een correcte rol is toegevoegd, zorg ervoor dat elke link een unieke en beschrijvende toegankelijke naam heeft.

Role=application heeft geen toegankelijke naam

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/4/41 staat onder de kop “Indicator op de kaart” een kaart met het attribuut role="application", maar zonder toegankelijke naam. Hetzelfde probleem doet zich voor op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21 met de kaart onder de kop "Indicator op de kaart".

Oplossing: Voorzie dit element van een beschrijvende toegankelijke naam zodat bezoekers die hulpsoftware gebruiken begrijpen wat de functie van de kaart is. Gebruik deze instructie om dit component een naam te geven: https://properaccess.nl/hoe-geef-ik-een-applicatie-accessible-name/.

Dialoogvenster geen toegankelijke naam

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/4/41 staat onder de kop “Indicator op de kaart” een kaart. Een knop in de rechterbovenhoek opent een dialoogvenster “Lagen”. Dit dialoogvenster heeft geen toegankelijke naam. Een blinde bezoeker heeft deze naam nodig om de inhoud en het doel van het dialoogvenster te begrijpen. Schermlezers kunnen hierdoor niet doorgeven wat hier staat. Hetzelfde probleem doet zich voor op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21 met de kaart onder de kop "Indicator op de kaart".

Oplossing: Dit kan opgelost worden door een aria-label aan het dialoogvenster toe te voegen met een duidelijke beschrijving van de inhoud.

Dialoogvenster geen toegankelijke naam en geen rol

Impact: groot | Type: Techniek

Op pagina https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34 wordt, wanneer in het bovenste filter “Monitor Leefomgeving 2024” is geselecteerd, onder de kop “Indicator op de kaart” een kaart getoond. De knop met het “i”-icoon boven de kaart opent een dialoogvenster “Over deze app”. Dit dialoogvenster heeft geen toegankelijke rol en geen toegankelijke naam. Een schermlezer herkent dit venster daardoor niet als een dialoogvenster. Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing: Dit kan opgelost worden door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") of een aria-describedby en role="dialog".

4.1.3: Statusberichten

Uitkomst: Voldoende

Sample met getoetste webpagina&#39;s

  1. Homepagina - https://monitorleefomgeving.zuid-holland.nl/
  2. Inloggen - https://monitorleefomgeving.zuid-holland.nl/login
  3. Sitemap - https://monitorleefomgeving.zuid-holland.nl/sitemap
  4. Toegankelijkheids­verklaring - https://monitorleefomgeving.zuid-holland.nl/digi-toegankelijkheid
  5. Beschermen van de fysieke leefomgeving - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1
  6. Milieukwaliteit & Gezondheid - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1
  7. Beweegvriendelijke omgeving - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1/35
  8. Waterveiligheid - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25
  9. Omgevingsveiligheid: aandachtsgebieden en zeer kwetsbare gebouwen - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/11
  10. CO2(-equivalenten) uitstoot veenoxidatie - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/3/2
  11. Licht - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/4/41
  12. Stikstofoverschrijding gebieden - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21
  13. Capaciteit elektriciteitsnetwerk Zuid-Holland - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/9/7
  14. Samenstelling woningvoorraad - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/37
  15. Leefbaarheid (Monitor Leefomgeving 2024) - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/34

Webtechnologie

HTML,CSS,WAI-ARIA,JavaScript,SVG

Onderbouwing van de evaluatie