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.
- 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.
- 31 Voldoende
- 12 Onvoldoende
- 0 Onbekend
- 12 Niet van toepassing
- 0 Niet getoetst
Alle resultaten
1 Waarneembaar
1.1 Tekstalternatieven
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.1.1: Niet-tekstuele content |
Uitkomst: Onvoldoende |
Bevindingen: Logo heeft geen tekstalternatiefImpact: 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 ( 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 HTMLImpact: 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 elkaarImpact: 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 gemarkeerdImpact: 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. Oplossing: Je gebruikt voor lijsten en opsommingen de HTML-elementen Meerdere alinea’s in een p-elementImpact: 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 Kop is niet als koptekst gemarkeerdImpact: 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 ontbreektImpact: 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 Oplossing: Gebruik het |
1.4 Onderscheidbaar
| Success Criterium | Uitkomst | Bevindingen |
|---|---|---|
| 1.4.1: Gebruik van kleur |
Uitkomst: Onvoldoende |
Bevindingen: Kleur wordt gebruikt om informatie te gevenImpact: 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 inzoomenImpact: 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 inzoomenImpact: 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 inzoomenImpact: 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 inzoomenImpact: 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. AdviesOp 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 itemsImpact: 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 hoverImpact: 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 iconenImpact: 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 iconenImpact: 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 nietImpact: 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 terechtImpact: 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 terechtImpact: 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 gegaanImpact: 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 bezoekerImpact: 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 HTMLImpact: 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 Role=application heeft geen toegankelijke naamImpact: 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 naamImpact: 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 rolImpact: 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 ( |
| 4.1.3: Statusberichten |
Uitkomst: Voldoende |
Sample met getoetste webpagina's
- Homepagina - https://monitorleefomgeving.zuid-holland.nl/
- Inloggen - https://monitorleefomgeving.zuid-holland.nl/login
- Sitemap - https://monitorleefomgeving.zuid-holland.nl/sitemap
- Toegankelijkheidsverklaring - https://monitorleefomgeving.zuid-holland.nl/digi-toegankelijkheid
- Beschermen van de fysieke leefomgeving - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1
- Milieukwaliteit & Gezondheid - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1
- Beweegvriendelijke omgeving - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/1/35
- Waterveiligheid - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/25
- Omgevingsveiligheid: aandachtsgebieden en zeer kwetsbare gebouwen - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/2/11
- CO2(-equivalenten) uitstoot veenoxidatie - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/3/2
- Licht - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/4/41
- Stikstofoverschrijding gebieden - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/1/thema/5/21
- Capaciteit elektriciteitsnetwerk Zuid-Holland - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/9/7
- Samenstelling woningvoorraad - https://monitorleefomgeving.zuid-holland.nl/hoofdthema/2/thema/11/37
- 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
- Chrome, versie 140
- Firefox, versie 142
- Safari, versie 18 in combinatie met VoiceOver
- NVDA in combinatie met Firefox