Audit digitale toegankelijkheid van het Omgevingsbeleid van provincie Zuid-Holland

#1 - Het dialoogvenster heeft geen rol dialoog en geen naam

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. Dit venster heeft geen rol en geen toegankelijke naam. Een schermlezer meldt daardoor niet dat er een dialoogvenster is geopend en waar het over gaat.

Hetzelfde geldt in de kopregel voor de dialoogvensters achter de knoppen met het mapicoon, het printicoon, het deelicoon en het "?"-icoon.

User story

Ik lees de website met een schermlezer. Als er een dialoogvenster opent, hoor ik dat niet. Ik verwacht dat mijn schermlezer meldt dat er een dialoogvenster is geopend en waar het voor is.

Hoe te testen

Loop elk interactief onderdeel langs: link, knop, invoerveld en eigen component. Gebruik daarbij het toegankelijkheidspaneel in DevTools en een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam), in welke stand het staat (uitgeklapt, geselecteerd, aangevinkt) en welke waarde het heeft. Gebruik liever standaard-HTML dan eigen ARIA.

Oplossing

Geef het dialoogvenster role="dialog" en een aria-label met een korte omschrijving van de inhoud.

#2 - Selectievakjes met een ander doel hebben dezelfde toegankelijke naam

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. In dat venster staan selectievakjes die allemaal de toegankelijke naam "Selecteer document" hebben, terwijl ze verschillende documenten aanzetten.

Wie de pagina met een schermlezer leest, hoort dus steeds dezelfde naam en kan de selectievakjes niet uit elkaar houden.

Hetzelfde gebeurt in het dialoogvenster achter de knop met het "i"-icoon.

User story

Ik lees de website met een schermlezer. Alle selectievakjes heten hetzelfde, dus ik weet niet wat ik aanzet. Ik verwacht dat elk selectievakje een eigen naam heeft die zegt waar het over gaat.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk selectievakje de toegankelijke naam. Controleer of selectievakjes die iets anders doen, ook een andere naam hebben.

Oplossing

Geef elk selectievakje een naam die zegt welk document erbij hoort, bijvoorbeeld de titel van het document.

#3 - De zichtbare tekst staat niet in de toegankelijke naam van de selectievakjes

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. De selectievakjes in dat venster hebben de toegankelijke naam "Selecteer document", terwijl er iets anders naast staat, bijvoorbeeld "Beleid: Omgevingsvisie Zuid-Holland (geconsolideerde versie vanaf 1-9-2026)".

Wie de website met spraakbediening gebruikt, spreekt de zichtbare tekst uit. Die tekst zit niet in de naam, dus het commando werkt niet.

Hetzelfde gebeurt in het dialoogvenster achter de knop met het "i"-icoon.

User story

Ik bedien de website met mijn stem. Als ik uitspreek wat ik op het scherm lees, gebeurt er niets. Ik verwacht dat ik een selectievakje kan aanzetten door de tekst te zeggen die ernaast staat.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk element de toegankelijke naam naast de zichtbare tekst. De zichtbare tekst hoort in de toegankelijke naam te staan, het liefst aan het begin. Controleer het met spraakbediening door "klik [zichtbare tekst]" te zeggen.

Oplossing

Zet de zichtbare tekst in de toegankelijke naam, het liefst aan het begin. Het beste is een naam die gelijk is aan de zichtbare tekst.

#4 - Interactieve lijstonderdelen hebben geen passende rol

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. Onder de kop "Beschikbare groepen" staat een lijst waarvan je de onderdelen kunt aanklikken. Die onderdelen hebben geen rol die daarbij past, zoals button.

Wie de pagina met een schermlezer leest, hoort daardoor niet dat deze onderdelen te bedienen zijn.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik niet dat een element een knop is. Ik verwacht dat mijn schermlezer meldt dat ik het kan activeren.

Hoe te testen

Bekijk het element en controleer of het de rol "button" doorgeeft: een schermlezer hoort "knop" te melden. Test daarna met het toetsenbord of het element reageert op Enter en op de spatiebalk.

Oplossing

Geef elk aanklikbaar lijstonderdeel een rol die bij de functie past. Werkt het onderdeel als een knop, gebruik dan een button-element. Kan dat niet, voeg dan role="button" toe aan het element dat er nu staat.

#5 - Interactieve lijstonderdelen werken niet met het toetsenbord

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. De lijstonderdelen onder de kop "Beschikbare groepen" reageren op een muisklik, maar je kunt er met het toetsenbord niet bij.

Wie de website met het toetsenbord bedient, kan deze keuzes dus niet maken.

User story

Ik bedien de website met het toetsenbord. De onderdelen in de lijst "Beschikbare groepen" kan ik niet bereiken. Ik verwacht dat ik het dialoogvenster kan gebruiken zonder muis.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken. Een ontwikkelaar kan in de code van het project zoeken op onclick-events.

Oplossing

Zorg dat elk onderdeel in de lijst met het toetsenbord bereikbaar is en met Enter of de spatiebalk reageert. Gebruik daarvoor het liefst een button-element, want dat gedrag zit er dan al in.

#6 - De toetsenbordfocus komt buiten het dialoogvenster

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. De toetsenbordfocus kan dat venster verlaten en op de pagina eronder terechtkomen. Bij een modaal dialoogvenster hoort de focus binnen het venster te blijven zolang het openstaat.

Hetzelfde gebeurt in de kopregel bij de dialoogvensters achter de knoppen met het mapicoon, het printicoon, het deelicoon en het "?"-icoon, en bij de andere dialoogvensters.

Hetzelfde staat op de pagina's https://ruimtelijkeplannen.zuid-holland.nl/omgevingsbeleid-historie/ en https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik gebruik de website met een toetsenbord en een schermlezer. Als een dialoogvenster openstaat en ik alle elementen erin heb gehad, kom ik met de volgende Tab op de pagina erachter. Ik verwacht dat de focus in het venster blijft tot ik het sluit.

Hoe te testen

Loop met Tab van element naar element en controleer of de focusvolgorde logisch is. De focusvolgorde mag afwijken van de volgorde op het scherm, zolang die logisch blijft.

Oplossing

Houd de focus met JavaScript binnen het dialoogvenster tot het wordt gesloten, met de sluitknop of met Esc. Een andere mogelijkheid is het venster sluiten zodra de focus het verlaat.

#7 - Het logo van de website heeft een onvolledig tekstalternatief

Boven aan de website staat het logo met de tekst "provincie Zuid-Holland". Het logo staat in een link met aria-label="Ga naar de startpagina". Dat aria-label overschrijft de naam die anders uit de alt-tekst van de afbeelding zou komen, dus de tekst uit het logo komt niet in de naam van de link terecht en een schermlezer leest hem niet voor.

Wie de website met spraakbediening gebruikt, spreekt de zichtbare tekst uit. Die tekst zit niet in de naam van de link, dus het commando werkt niet. Alleen de alt-tekst aanpassen verandert hier niets aan: de oorzaak zit in het aria-label.

User story

Ik bedien de website met mijn stem. Als ik de tekst uitspreek die ik in het logo lees, herkent de website mijn commando niet. Ik verwacht dat de link opent als ik zeg wat ik zie.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Vergelijk de toegankelijke naam van het logo met de tekst die je in het logo leest: die tekst hoort in de naam te staan, het liefst aan het begin.

Oplossing

Kies een van deze twee oplossingen.

• Haal het aria-label van de link weg en geef de afbeelding alt="provincie Zuid-Holland - naar de startpagina".
• Laat het aria-label staan, maar laat het beginnen met de zichtbare tekst, en geef de afbeelding alt="".

#8 - Een decoratieve afbeelding heeft geen alt-attribuut

Naast de kaart staat een decoratieve afbeelding zonder alt-attribuut. Een schermlezer leest dan de bestandsnaam voor.

User story

Ik lees de website met een schermlezer. Bij een afbeelding hoor ik een bestandsnaam in plaats van een beschrijving. Ik verwacht dat elke afbeelding een duidelijke beschrijving heeft of als decoratief is gemarkeerd.

Hoe te testen

Bekijk elke afbeelding met de WCAG Radar of met axe DevTools. Een img-element hoort altijd een alt-attribuut te hebben. Alleen een decoratieve afbeelding die geen informatie overbrengt, houdt dat attribuut leeg.

Oplossing

Geef deze afbeelding een leeg alt-attribuut: alt="". Schermlezers slaan de afbeelding dan over.

#9 - Het element om het zijmenu te verslepen heeft geen passende rol

In het zijmenu staat een element met een icoon van twee streepjes. Daarmee maak je het zijmenu breder of smaller. Het element is te bedienen, maar het heeft geen rol die daarbij past, zoals separator.

Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit element bestaat en hoe het werkt.

Hetzelfde element staat onder de kaart.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik niet dat ik de breedte van het zijmenu kan aanpassen. Ik verwacht dat mijn schermlezer meldt wat dit element is en hoe ik het bedien.

Hoe te testen

Bekijk het element en controleer of het de rol "separator" doorgeeft. Test daarna met het toetsenbord of de pijltoetsen de verdeler verplaatsen.

Oplossing

Bouw dit element als verdeler volgens het patroon Window Splitter van de ARIA Authoring Practices Guide. Daarin staat welke rol, welke eigenschappen en welke toetsen erbij horen: de pijltoetsen verplaatsen de verdeler.

#10 - Knoppen met een pijlicoon hebben niet de juiste rol

In het zijmenu staan knoppen met een pijlicoon waarmee je extra inhoud uit- en inklapt. Deze knoppen geven de rol button niet door. Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit knoppen zijn en dat er iets gebeurt als je ze activeert.

Hetzelfde staat op de pagina https://ruimtelijkeplannen.zuid-holland.nl/omgevingsbeleid-historie/, bij de knoppen met het "+"- en het "-"-icoon.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik niet dat een element een knop is. Ik verwacht dat mijn schermlezer meldt dat ik het kan activeren.

Hoe te testen

Bekijk het element en controleer of het de rol "button" doorgeeft: een schermlezer hoort "knop" te melden. Test daarna met het toetsenbord of het element reageert op Enter en op de spatiebalk.

Oplossing

Gebruik een button-element, want dat geeft de rol vanzelf door. Kan dat niet, voeg dan role="button" toe aan het element dat er nu staat.

#11 - De selectievakjes in het zijmenu hebben niet de rol van selectievakje

In het zijmenu staan selectievakjes die de rol checkbox niet doorgeven. Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit selectievakjes zijn en of ze aan- of uitstaan.

User story

Ik lees de website met een schermlezer. Bij deze elementen hoor ik niet dat het selectievakjes zijn en of ze aanstaan. Ik verwacht dat mijn schermlezer meldt wat het element is en in welke stand het staat.

Hoe te testen

Loop de selectievakjes in het zijmenu langs met een schermlezer en controleer of ze als selectievakje worden gemeld.

Oplossing

Gebruik een input type="checkbox". Bouw je een eigen selectievakje, geef het dan role="checkbox" en geef de stand door met aria-checked.

#12 - De selectievakjes in het zijmenu werken niet met het toetsenbord

De selectievakjes in het zijmenu reageren op een muisklik, maar je kunt ze met het toetsenbord niet bereiken en niet aan- of uitzetten.

User story

Ik bedien de website met het toetsenbord. De selectievakjes in het zijmenu kan ik niet aanzetten. Ik verwacht dat ik alle keuzes kan maken zonder muis.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken. Een ontwikkelaar kan in de code van het project zoeken op onclick-events.

Oplossing

Zorg dat je elk selectievakje met Tab bereikt en met de spatiebalk aan- en uitzet. Gebruik het liefst een input type="checkbox", want die bediening zit er dan al in.

#13 - Vetgedrukte tekst in plaats van een kop

Als je in het zijmenu een selectievakje aanzet, verschijnt er tekst onder de kaart. In die tekst staan koppen zonder kopelement. Ze zijn met een strong-element vetgedrukt zodat ze eruitzien als een kop, bijvoorbeeld "Leeswijzer".

Het strong-element geeft nadruk aan tekst en maakt geen kop. Wie de pagina met een schermlezer leest, krijgt deze koppen niet in de koppenlijst te zien en mist daarmee de opbouw van de tekst.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, mis ik de koppen die niet als kop in de code staan. Ik verwacht dat elke kop een echte kop is, zodat ik de opbouw van de pagina kan volgen.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna elke kop op de pagina langs. Krijgt een kop geen label h1 tot en met h6, dan staat die tekst niet als kop in de code.

Oplossing

Haal het strong-element weg en zet deze teksten in het kopelement dat bij hun niveau hoort.

#14 - Een afbeelding heeft geen alt-attribuut

Als je in het zijmenu het selectievakje "1. Inleiding" aanzet, verschijnt er extra informatie onder de kaart. Daar staat een afbeelding zonder alt-attribuut. Een schermlezer leest dan de bestandsnaam voor.

De informatie uit de afbeelding staat al in de tekst en in het onderschrift eronder. De afbeelding is dus decoratief.

Hetzelfde gebeurt bij de afbeeldingen die verschijnen als je andere selectievakjes aanzet.

User story

Ik lees de website met een schermlezer. Ik hoor dezelfde informatie twee keer, en daarbij ook nog een bestandsnaam. Ik verwacht dat een afbeelding die niets toevoegt, wordt overgeslagen.

Hoe te testen

Bekijk elke afbeelding met de WCAG Radar of met axe DevTools. Een img-element hoort altijd een alt-attribuut te hebben. Alleen een decoratieve afbeelding die geen informatie overbrengt, houdt dat attribuut leeg.

Oplossing

Geef deze afbeeldingen een leeg alt-attribuut: alt="". Schermlezers slaan ze dan over en de informatie wordt niet twee keer voorgelezen.

#15 - Het em-element wordt gebruikt om tekst op te laten vallen

Als je in het zijmenu een selectievakje aanzet, verschijnt er tekst onder de kaart. In die tekst staan hele alinea's in een em-element, alleen om ze te laten opvallen. Het gaat bijvoorbeeld om "het bereiken en in stand houden ... intrinsieke waarde van de natuur".

Het em-element betekent nadruk in de spraak. Schermlezers veranderen daarvoor vaak van toon. Staat er een hele alinea in, dan klinkt die alinea anders dan de rest van de tekst, terwijl de schrijver dat niet bedoeld heeft.

User story

Ik lees de website met een schermlezer. Ik hoor hele alinea's met nadruk voorgelezen. Ik verwacht dat alleen woorden die er echt toe doen extra nadruk krijgen.

Hoe te testen

Bekijk de pagina als redacteur en loop elk vetgedrukt of cursief stuk tekst langs.

1. Vraag je per stuk af: is dit echt belangrijk, of zou je het in spraak benadrukken? Zo niet, dan hoort het niet in een strong of een em.
2. Klik met de rechtermuisknop op de tekst en kies "Inspecteren". Staat de tekst in een strong of een em zonder dat daar een reden voor is, dan hoort de opmaak in de CSS, bijvoorbeeld met een class met font-weight: bold of font-style: italic.

Goede toepassingen zijn een waarschuwing, een vakterm op de plek waar je hem uitlegt, of een woord dat de betekenis van de zin verandert.

Oplossing

Gebruik strong en em alleen als een woord of een zin echt belangrijk is. Wil je tekst alleen visueel laten opvallen, doe dat dan met CSS.

#16 - Een em-element in plaats van een kop

Als je in het zijmenu een selectievakje aanzet, verschijnt er tekst onder de kaart. In die tekst staan koppen zonder kopelement. Ze staan in een em-element zodat ze eruitzien als een kop, bijvoorbeeld "Informeren".

Het em-element geeft nadruk aan tekst en maakt geen kop. Wie de pagina met een schermlezer leest, krijgt deze koppen niet in de koppenlijst te zien en mist daarmee de opbouw van de tekst.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, mis ik de koppen die niet als kop in de code staan. Ik verwacht dat elke kop een echte kop is, zodat ik de opbouw van de pagina kan volgen.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna elke kop op de pagina langs. Krijgt een kop geen label h1 tot en met h6, dan staat die tekst niet als kop in de code.

Oplossing

Haal het em-element weg en zet deze teksten in het kopelement dat bij hun niveau hoort.

#17 - Alleen kleur onderscheidt de informatie in de legenda

Als je in het zijmenu het selectievakje "4. Dit is Zuid-Holland" aanzet, verschijnt er een legenda. In de legenda en op de kaart is kleur het enige verschil tussen de categorieën, bijvoorbeeld bij paars.

Alleen wie de kleuren ziet en uit elkaar houdt, weet welke kleur bij welke categorie hoort. Hetzelfde geldt voor de andere legenda's.

Hetzelfde staat op de pagina's https://ruimtelijkeplannen.zuid-holland.nl/omgevingsbeleid-historie/ en https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie het verschil tussen kleuren niet. Als een kaart alleen met kleur laat zien welk gebied bij welke categorie hoort, snap ik de kaart niet. De legenda helpt mij dan niet.

Hoe te testen

Bekijk de pagina in grijstinten: open de WCAG Radar en zet de optie "Grijstinten" aan. Controleer of de vlakken op de kaart en de regels in de legenda dan nog uit elkaar te houden zijn. Er hoort een tweede kenmerk bij: tekst, een icoon, een lijn of een patroon.

Oplossing

Gebruik naast kleur ook een patroon of een vorm, of zet labels op de kaart. Een tekst of een tabel met dezelfde informatie kan ook.

#18 - Informatieve elementen in de legenda hebben te weinig contrast

Als je in het zijmenu het selectievakje "4. Dit is Zuid-Holland" aanzet, verschijnt er een legenda. Een deel van de kleuren heeft te weinig contrast met de achtergrond. Lichtgrijs (#D7E6F0) op wit heeft een contrast van 1,3:1.

Hetzelfde staat op de pagina's https://ruimtelijkeplannen.zuid-holland.nl/omgevingsbeleid-historie/ en https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als de kleuren in de legenda nauwelijks verschillen van de achtergrond, kan ik ze niet uit elkaar houden. Ik verwacht genoeg contrast om te zien wat er staat.

Hoe te testen

Meet alle informatieve lijnen, vlakken en balken op de kaart met de Colour Contrast Analyser. Meet ze tegen de achtergrond waarop ze staan en tegen elkaar.

Oplossing

Zorg dat informatieve elementen op de kaart en in de legenda een contrast van minimaal 3,0:1 hebben met de vlakken ernaast. Loop alle kleuren van deze kaart na.

#19 - De knoppen in de legenda hebben geen naam en melden hun stand niet

Als je in het zijmenu het selectievakje "4. Dit is Zuid-Holland" aanzet, verschijnt er een legenda. Daarin staan knoppen met een icoon. Deze knoppen hebben geen toegankelijke naam. Een klik erop opent onder de regel een schuifregelaar voor de transparantie, maar de knop geeft niet door of die extra inhoud open of dicht is.

Wie de pagina met een schermlezer leest, hoort dus niet waar de knop voor is en of er inhoud onder staat.

Hetzelfde geldt voor de andere legenda's.

User story

Ik lees de website met een schermlezer. Bij deze knoppen hoor ik alleen "knop", en ik hoor niet of er inhoud is opengeklapt. Ik verwacht een duidelijke naam en een melding of de inhoud open of dicht is.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en in welke stand het staat. Bedien de knop daarna en controleer of de stand meeverandert.

Oplossing

Geef elke knop een toegankelijke naam, met zichtbare tekst naast de knop of met een aria-label.

Geef daarnaast door of de extra inhoud open of dicht is. Zet aria-expanded="true" als de schuifregelaar zichtbaar is en aria-expanded="false" als die dicht is, en werk dat bij zodra de bezoeker de knop gebruikt.

#20 - De knop "Legenda" heeft niet de juiste rol

Als je in het zijmenu het selectievakje "4. Dit is Zuid-Holland" aanzet, verschijnt er een legenda. Boven de legenda staat de knop "Legenda" waarmee je het blok uit- en inklapt. Deze knop geeft de rol button niet door. Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit een knop is.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik niet dat een element een knop is. Ik verwacht dat mijn schermlezer meldt dat ik het kan activeren.

Hoe te testen

Bekijk het element en controleer of het de rol "button" doorgeeft: een schermlezer hoort "knop" te melden. Test daarna met het toetsenbord of het element reageert op Enter en op de spatiebalk.

Oplossing

Gebruik een button-element, want dat geeft de rol vanzelf door. Kan dat niet, voeg dan role="button" toe aan het element dat er nu staat.

#21 - De knop "Legenda" werkt niet met de spatiebalk en de Enter-toets

De knop "Legenda" boven de legenda klapt het blok uit en in. De knop reageert niet op Enter en niet op de spatiebalk. Een knop hoort op allebei te reageren, want dat is de bediening die toetsenbordgebruikers kennen.

User story

Ik bedien de website met het toetsenbord. Als ik een knop met Enter of de spatiebalk activeer, gebeurt er niets. Ik verwacht dat elke knop op allebei de toetsen reageert.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken. Een ontwikkelaar kan in de code van het project zoeken op onclick-events.

Oplossing

Zorg dat de knop reageert op Enter en op de spatiebalk.

#22 - Het dialoogvenster achter de knop met het "i"-icoon heeft geen rol dialoog en geen naam

In het zijmenu staat een knop met een "i"-icoon die een dialoogvenster opent. Dit venster heeft geen rol en geen toegankelijke naam. Een schermlezer meldt daardoor niet dat er een dialoogvenster is geopend en waar het over gaat.

User story

Ik lees de website met een schermlezer. Als er een dialoogvenster opent, hoor ik dat niet. Ik verwacht dat mijn schermlezer meldt dat er een dialoogvenster is geopend en waar het voor is.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en in welke stand het staat.

Oplossing

Geef het dialoogvenster role="dialog" en een aria-label met een korte omschrijving van de inhoud.

#23 - De focus gaat niet naar het dialoogvenster achter de knop met het "i"-icoon

In het zijmenu staat een knop met een "i"-icoon die een dialoogvenster opent. Als het venster opent, gaat de toetsenbordfocus er niet naartoe. Daarna kan de focus het venster ook verlaten en op de pagina eronder terechtkomen.

Toetsenbordgebruikers vinden het venster daardoor niet terug en bedienen per ongeluk elementen op de pagina erachter.

User story

Ik bedien de website met het toetsenbord. Als een dialoogvenster opent, blijft mijn focus op de pagina erachter staan. Ik verwacht dat mijn focus in het venster terechtkomt en daar blijft tot ik het sluit.

Hoe te testen

Open het dialoogvenster met het toetsenbord en controleer waar de focus terechtkomt. De focus hoort op het venster zelf te staan of op het eerste element erin, en niet op de pagina eronder.

Oplossing

Zet de focus bij het openen op een element in het dialoogvenster. Houd de focus binnen het venster zolang het openstaat, en zet hem bij het sluiten terug op de knop die het venster opende.

#24 - De selectievakjes in het dialoogvenster hebben geen toegankelijke naam

In het zijmenu staat een knop met een "i"-icoon die een dialoogvenster opent. In de kolom "Besluit" staan selectievakjes zonder toegankelijke naam, bijvoorbeeld bij "Wijziging van de Omgevingsvisie Zuid-Holland, in het kader van de Herziening Omgevingsbeleid module Wonen, Werken en Werelderfgoed (bekendgemaakt op 30-4-2024)".

Wie de pagina met een schermlezer leest, hoort dus niet waar het selectievakje over gaat. En omdat de zichtbare tekst niet in de naam staat, werkt spraakbediening er ook niet op.

User story

Ik lees de website met een schermlezer en ik bedien hem met mijn stem. Bij dit selectievakje hoor ik geen naam, en als ik de zichtbare tekst uitspreek, gebeurt er niets. Ik verwacht dat het vakje heet zoals de tekst ernaast.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk invoerveld de toegankelijke naam. Controleer of elk veld een naam heeft en of die naam overeenkomt met de zichtbare tekst ernaast.

Oplossing

Geef elk selectievakje een naam die de zichtbare tekst bevat. Koppel die tekst het liefst met een label-element aan het selectievakje, of gebruik aria-labelledby.

#25 - De tabel onder "Brede welvaart" heeft geen koppencellen

Als je in het zijmenu het selectievakje "5. Koers van Zuid-Holland" aanzet, verschijnt er extra informatie onder de kaart. Onder de tekst "Brede welvaart" staat een tabel waarvan de koppen niet als koppencel in de code staan.

Wie de tabel met een schermlezer leest, hoort daardoor alleen de inhoud van de cellen, zonder de kop die erbij hoort.

User story

Ik lees de website met een schermlezer. Als mijn schermlezer een tabel voorleest, hoor ik alleen de inhoud van de cellen zonder context. Ik verwacht dat mijn schermlezer bij elke cel de kop noemt.

Hoe te testen

Open de WCAG Radar en zet de optie "Tabellen" aan, of bekijk de eerste rij en de eerste kolom van de tabel in DevTools. Koppencellen horen in een th te staan en niet in een td met vetgedrukte tekst. Controleer met een schermlezer of de koppen samen met de gegevenscellen worden voorgelezen.

Oplossing

Zet de koppen in th-elementen en de gegevens in td-elementen. Een eenvoudige toegankelijke tabel ziet er zo uit:

<table>
  <tr>
    <th scope="col">Thema</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <td>Wonen</td>
    <td>7</td>
  </tr>
</table>

#26 - De stand van de knoppen in het printvenster staat niet in de code

In de kopregel staat een knop met een printicoon die een dialoogvenster opent. In dat venster staan knoppen met twee standen, ingedrukt en niet ingedrukt. Op het scherm zie je aan de knop in welke stand hij staat, maar die stand staat niet in de code.

Wie de pagina met een schermlezer leest, hoort dus niet wat er aanstaat.

Bij twee knoppen gaat dit wel goed: de naam verandert mee, van "Beschrijving toevoegen" naar "Beschrijving verwijderen" en van "Toelichting weergeven" naar "Toelichting verbergen". Die twee hoef je niet aan te passen.

User story

Ik lees de website met een schermlezer. Als ik een knop indruk die aan of uit kan staan, hoor ik niet welke stand actief is. Ik verwacht dat mijn schermlezer de stand van de knop meldt.

Hoe te testen

Bedien de knop en controleer met een schermlezer of in DevTools of aria-pressed de stand doorgeeft en of die waarde meeverandert bij elke klik.

Oplossing

Geef de stand van deze knoppen door met aria-pressed="true" en aria-pressed="false", en werk die waarde bij zodra de bezoeker de knop gebruikt.

#27 - Het logo in het printvenster heeft een onvolledig tekstalternatief

In de kopregel staat een knop met een printicoon die een dialoogvenster opent. In dat venster staat een logo met de tekst "provincie Zuid-Holland". Het tekstalternatief is "logo". Een tekstalternatief hoort alle zichtbare tekst uit het logo te bevatten, zodat bezoekers die de afbeelding niet zien dezelfde informatie krijgen.

User story

Ik lees de website met een schermlezer. Bij het logo hoor ik niet de volledige naam van de organisatie. Ik verwacht te horen wat er in het logo staat.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Vergelijk de toegankelijke naam van het logo met de tekst die je in het logo leest: het tekstalternatief hoort alle zichtbare tekst te bevatten.

Oplossing

Vul het tekstalternatief aan tot "logo provincie Zuid-Holland".

#28 - Het tekstvak in het printvenster heeft geen toegankelijke naam

In de kopregel staat een knop met een printicoon die een dialoogvenster opent. In dat venster staat de knop "Beschrijving", die een tekstvak opent. Dat tekstvak heeft geen toegankelijke naam. Wie de pagina met een schermlezer leest, hoort alleen "tekstveld" en weet niet wat er ingevuld moet worden.

User story

Ik lees de website met een schermlezer. Als ik een formulier invul, hoor ik alleen "tekstveld" zonder uitleg. Ik verwacht dat elk veld een duidelijke naam heeft, zodat ik weet wat ik moet invullen.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk invoerveld de toegankelijke naam. Controleer of elk veld een naam heeft en of die naam overeenkomt met de zichtbare tekst ernaast.

Oplossing

Koppel het tekstvak met een label-element aan de zichtbare tekst die erbij hoort.

#29 - Het tekstvak in het printvenster heeft geen zichtbaar label

In de kopregel staat een knop met een printicoon die een dialoogvenster opent. In dat venster staat de knop "Beschrijving", die een tekstvak opent. Bij dat tekstvak staat geen label. Bezoekers weten daardoor niet wat ze moeten invullen.

User story

Ik gebruik de website met een toetsenbord en een schermlezer. Bij dit tekstvak weet ik niet wat ik moet invullen. Ik verwacht bij elk tekstvak een zichtbaar label dat uitlegt wat er wordt gevraagd.

Hoe te testen

Loop elk invoerveld, elke groep selectievakjes en elke groep keuzerondjes langs. Elk daarvan hoort een zichtbaar label of een duidelijke instructie te hebben die uitlegt wat er wordt gevraagd. Een placeholder telt niet mee. Verplichte velden en velden met een vast formaat, zoals een datum of een postcode, hebben extra uitleg nodig.

Oplossing

Geef dit tekstvak een zichtbaar label dat zegt waar het voor is.

#30 - Een lijst met schermonderdelen staat in een opmaaktabel

In de kopregel staat een knop met een "?"-icoon die een dialoogvenster opent. In dat venster staat een tabel die de onderdelen van het scherm uitlegt. De tabel wordt gebruikt om de tekst op te maken en niet om gegevens in rijen en kolommen te tonen.

Twee dingen gaan daardoor mis. De koppen boven de blokken, bijvoorbeeld "Overzicht scherm", staan in een strong-element en niet in een kopelement. En de tabel heeft lege th-elementen, die een schermlezer wel meldt maar die niets betekenen.

Wie de pagina met een schermlezer leest, hoort dus een tabelstructuur die niets toevoegt en mist de koppen in de koppenlijst.

User story

Ik lees de website met een schermlezer. Ik hoor een tabel met lege koppen, terwijl er gewoon uitleg in blokken staat. Ik verwacht koppen en een lijst, zodat ik snel bij het onderdeel kom dat ik zoek.

Hoe te testen

Bekijk de tabel in DevTools of met de WCAG Radar, optie "Tabellen". Controleer of de inhoud rijen en kolommen nodig heeft. Zo niet, dan is het een opmaaktabel. Controleer daarna of de koppen boven de blokken in een kopelement staan.

Oplossing

Haal de tabel weg en zet de uitleg in koppen met tekst eronder, of in een lijst. Zet de koppen in het kopelement dat bij hun niveau hoort. Blijft de tabel toch staan, haal dan in elk geval de lege th-elementen weg.

#31 - Bij 200% en 400% zoom verdwijnt een deel van de bediening

Als je deze pagina bekijkt op een scherm van 1280 bij 1024 pixels en inzoomt tot 200% of 400%, is een deel van de inhoud niet meer te zien en niet meer te bedienen. Dat geldt bijvoorbeeld voor een deel van de selectievakjes in het zijmenu.

User story

Ik vergroot de tekst tot twee keer de normale grootte om te kunnen lezen. Als ik inzoom, verdwijnen er knoppen en links of kan ik ze niet meer gebruiken. Ik verwacht dat alles blijft werken als ik inzoom.

Hoe te testen

Zet de browser op 1280 px breed en zoom in tot 200% en 400%: met Cmd + + op een Mac en met Ctrl + + op Windows. Alle tekst hoort leesbaar te blijven en er mag geen inhoud of functie verdwijnen. Test ook het menu, de vastgezette kopregel en de formulieren.

Oplossing

Zorg dat alles blijft werken als een bezoeker op een scherm van 1280 bij 1024 pixels inzoomt tot 200% en 400%.

#32 - De volgorde in de legenda verander je alleen door te slepen

Als je in het zijmenu het selectievakje "4. Dit is Zuid-Holland" aanzet, verschijnt er een legenda. De volgorde van de regels in die legenda verander je door ze te slepen, en er is geen andere manier.

Bezoekers die een trackball, een hoofdmuis, oogbesturing of spraakbediening gebruiken, kunnen niet slepen. Zij kunnen de volgorde dus niet veranderen. Met het toetsenbord lukt het ook niet.

User story

Ik kan de volgorde van de kaartlagen in de legenda niet veranderen. Ik verwacht knoppen waarmee ik een laag omhoog of omlaag zet.

Hoe te testen

Zoek elk onderdeel op waarvan je de volgorde kunt veranderen of dat je naar een andere kolom kunt verplaatsen. Probeer het te verplaatsen met losse klikken, via knoppen of een menu. Kan het alleen door te slepen, dan voldoet het niet. Controleer ook of de nieuwe plek wordt gemeld na het verplaatsen.

Oplossing

Geef elke regel knoppen om hem omhoog en omlaag te zetten, of een menu met "Verplaats naar". Meld de nieuwe plek na het verplaatsen, zodat schermlezergebruikers weten dat het gelukt is. Zorg daarbij dat deze knoppen met het toetsenbord werken.

#33 - De tekst van een aangevinkt selectievakje heeft te weinig contrast

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. Zet je daar een selectievakje aan, dan wordt de tekst wit op een lichtgrijze achtergrond (#CCCCCC). Het gaat bijvoorbeeld om "Omgevingsvisie Zuid-Holland (in werking tot 1 mei 2024 vanaf 1 april 2023)". Het contrast is 1,6:1 en dat is te weinig om de tekst te lezen.

User story

Ik zie slecht. Als tekst weinig verschilt van de achtergrond waarop die staat, kan ik hem niet lezen. Ik verwacht genoeg contrast om makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een egale achtergrond met te weinig contrast wordt automatisch gemeld. Meet tekst op een foto of een kleurverloop met de twee pipetten: een voor de tekst en een voor de achtergrond. Het minimum is 4,5:1 voor gewone tekst en 3,0:1 voor grote tekst, dat wil zeggen 24 px of groter, of 18,7 px vetgedrukt. Vergeet de placeholders, tekst in afbeeldingen en elementen die uitgeschakeld lijken niet.

Oplossing

Deze tekst is kleiner dan 19 px, dus het contrast hoort minimaal 4,5:1 te zijn.

#34 - Het icoon op de sluitknop heeft te weinig contrast

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster. De sluitknop met het "x"-icoon is lichtgrijs (#CCCCCC) op een witte achtergrond. Het contrast is 1,6:1. Bezoekers die slecht zien of kleuren moeilijk onderscheiden, zien de knop niet of nauwelijks.

Hetzelfde geldt voor de "x"-knop in het dialoogvenster achter de knop "Lees meer", voor het venster achter de knop "Selecteer een kaart" en voor de andere dialoogvensters op de pagina.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Ik verwacht dat iconen op knoppen duidelijk afsteken tegen de achtergrond.

Hoe te testen

Meet het contrast tussen het icoon en de achtergrond ernaast met de Colour Contrast Analyser. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken met de optie "Contrast".

Oplossing

Geef het icoon een contrast van minimaal 3,0:1 met de achtergrond.

#35 - Het dialoogvenster achter "Lees meer" heeft geen toegankelijke naam

Als een bezoeker de pagina opent, verschijnt er een dialoogvenster met selectievakjes. Zet je een vakje aan, dan verschijnen er een kaart en een venster met uitleg. In dat venster staat de knop "Lees meer", die een volgend dialoogvenster opent. Dat venster heeft geen toegankelijke naam, want het aria-labelledby verwijst naar een id dat niet bestaat.

Wie de pagina met een schermlezer leest, hoort daardoor niet waar het venster over gaat.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik een dialoogvenster open, hoor ik niet wat het is. Ik verwacht dat mijn schermlezer meteen meldt waar het venster over gaat.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en in welke stand het staat.

Oplossing

Laat het aria-labelledby verwijzen naar het id van de zichtbare kop van het venster. Een aria-label met een korte omschrijving van de inhoud kan ook.

#36 - Vetgedrukte en cursieve tekst in plaats van een kop

In het dialoogvenster achter de knop "Lees meer" staan koppen zonder kopelement. Ze staan in een strong- of een em-element zodat ze eruitzien als een kop, bijvoorbeeld "zoeken via de kaart".

Deze elementen geven nadruk aan tekst en maken geen kop. Wie de pagina met een schermlezer leest, krijgt deze koppen niet in de koppenlijst te zien en mist daarmee de opbouw van de tekst.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, mis ik de koppen die niet als kop in de code staan. Ik verwacht dat elke kop een echte kop is, zodat ik de opbouw van de pagina kan volgen.

Hoe te testen

Open de WCAG Radar en zet de optie "Koppen en structuur" aan. Loop daarna elke kop op de pagina langs. Krijgt een kop geen label h1 tot en met h6, dan staat die tekst niet als kop in de code.

Oplossing

Haal de strong- en em-elementen weg en zet deze teksten in het kopelement dat bij hun niveau hoort.

#37 - Inzoomen is geblokkeerd met user-scalable=no en maximum-scale

Op alle pagina's staan in het element <meta name="viewport"> de waarden user-scalable=no en maximum-scale=1. Daarmee is inzoomen op een klein scherm geblokkeerd. Bezoekers die slecht zien en de tekst willen vergroten, kunnen dat niet.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als ik op mijn telefoon inzoom om de tekst groter te maken, blokkeert deze website dat. Ik verwacht dat ik altijd kan inzoomen.

Hoe te testen

Zet de browser op 1280 px breed en zoom in tot 200%: met Cmd + + op een Mac en met Ctrl + + op Windows. Alle tekst hoort leesbaar te blijven en er mag geen inhoud of functie verdwijnen. Bekijk ook de code van het element <meta name="viewport">.

Oplossing

Haal user-scalable=no en maximum-scale=1 uit het element <meta name="viewport">.

#38 - Het zoekveld heeft geen toegankelijke naam

In de kopregel staat een zoekveld zonder toegankelijke naam. Wie de pagina met een schermlezer leest, hoort alleen "tekstveld" en weet niet wat er ingevuld moet worden.

In het veld staat de zichtbare tekst "Zoek op woord of adres". Die tekst staat niet in de naam van het veld, dus wie de website met spraakbediening gebruikt, kan het veld niet met die woorden aanwijzen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij het zoekveld hoor ik alleen "tekstveld" zonder uitleg. Ik verwacht dat mijn schermlezer meldt dat dit de zoekfunctie is.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan, of de optie "Formulieren" om alle velden tegelijk te zien. Controleer of het zoekveld een naam heeft en of die naam zegt dat het om zoeken gaat.

Oplossing

Geef het zoekveld een toegankelijke naam met de zichtbare tekst erin:

<input type="search" aria-label="Zoek op woord of adres">

#39 - De zoeksuggesties hebben niet de juiste rol

Het zoekveld in de kopregel toont suggesties in een uitklaplijst zodra je typt. Het veld werkt daarmee als een combobox, maar die rol staat niet in de code.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik in het zoekveld typ, hoor ik niet dat er suggesties verschijnen. Ik verwacht dat mijn schermlezer meldt dat de lijst met suggesties opengaat.

Hoe te testen

Controleer met axe DevTools of met de toegankelijkheidsboom in DevTools of de rol compleet is. Sommige rollen hebben een verplichte bovenliggende rol, een verplichte onderliggende rol of een verplicht attribuut. Ontbreekt daar iets van, dan kan hulpsoftware het onderdeel niet uitleggen.

Oplossing

Maak van het zoekveld een combobox. Voeg minimaal dit toe:

• role="combobox" op het invoerveld;
• aria-expanded="true" als de lijst met suggesties zichtbaar is en aria-expanded="false" als die dicht is.

Meer staat in het patroon Combobox van de ARIA Authoring Practices Guide.

#40 - De knoppen op de kaart hebben geen toegankelijke naam

Op de kaart staan knoppen met een icoon. Deze knoppen hebben geen toegankelijke naam. Er is een naam geprobeerd met het title-attribuut, maar dat levert geen bruikbare naam op.

Hetzelfde geldt voor de links met alleen een icoon onder de kaart.

Wie de pagina met een schermlezer leest, hoort daardoor niet waar de knoppen en links voor zijn.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij deze knoppen hoor ik alleen "knop" en verder niets. Ik verwacht dat mijn schermlezer de naam of het doel van de knop meldt.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en in welke stand het staat.

Oplossing

Geef elke knop en elke link een aria-label met een naam die zegt wat hij doet, bijvoorbeeld "Inzoomen" of "Kaart delen". Het icoon zelf is een svg met aria-hidden="true" en hoeft niet te veranderen.

#41 - De schuifregelaar voor transparantie heeft geen rol en geen naam

Boven de kaart staat een schuifregelaar met het label "Transparantie". De regelaar geeft geen rol en geen toegankelijke naam door.

Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit een schuifregelaar is en wat die instelt.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij dit element hoor ik niet dat het een schuifregelaar is en waar die voor is. Ik verwacht de naam, de rol en de huidige waarde te horen.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en welke waarde het heeft.

Oplossing

Gebruik het liefst een input type="range", want die geeft rol, waarde en bediening vanzelf door. Bouw je een eigen schuifregelaar, geef die dan role="slider", een naam als "Transparantie" en de bijbehorende ARIA-eigenschappen voor de huidige, de laagste en de hoogste waarde.

#42 - De schuifregelaar voor transparantie werkt niet met het toetsenbord

De schuifregelaar "Transparantie" boven de kaart werkt met de muis, maar je kunt hem met het toetsenbord niet bereiken en niet verzetten. Toetsenbordgebruikers kunnen de transparantie dus niet veranderen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. De schuifregelaar voor transparantie kan ik niet verzetten. Ik verwacht dat ik dat zonder muis kan doen.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken.

Oplossing

Zorg dat je de schuifregelaar met Tab bereikt en met de pijltoetsen verzet. Gebruik het liefst een input type="range", want die bediening zit er dan al in.

#43 - De schermlezer meldt niet of het blok met de legenda open of dicht is

Boven de kaart staat de link "Legenda", die het blok met de legenda uit- en inklapt. De stand van dat blok staat niet in de code.

Wie de pagina met een schermlezer leest, hoort daardoor niet of de legenda openstaat.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Ik hoor niet of de legenda open of dicht is. Ik verwacht dat mijn schermlezer dat meldt.

Hoe te testen

Bedien het element en luister mee met een schermlezer, of bekijk de toegankelijkheidsboom in DevTools terwijl je het gebruikt. De stand hoort mee te veranderen met het element.

Oplossing

Kies een van deze twee oplossingen.

• Voeg aria-expanded toe aan het element dat het blok opent en sluit. Zet de waarde op true als het blok open is en op false als het dicht is, en werk die waarde bij zodra de stand verandert.
• Voeg tekst toe die alleen voor schermlezers zichtbaar is, bijvoorbeeld "(open)" of "(dicht)", en werk die tekst bij zodra de stand verandert.

#44 - De keuzelijst "Achtergrond" heeft de rol van link

Boven de kaart staat "Achtergrond". Daarmee kies je een achtergrondkaart, dus het werkt als een keuzelijst. In de code staat het als een link.

Wie de pagina met een schermlezer leest, verwacht daardoor dat er een nieuwe pagina opent in plaats van dat er een keuze verschijnt.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Ik hoor "link", maar er opent een keuzelijst. Ik verwacht dat de rol klopt met wat het element doet.

Hoe te testen

Ga met een schermlezer naar "Achtergrond" en luister wat er wordt gemeld. Controleer of dat klopt met wat er gebeurt als je het element activeert.

Oplossing

Gebruik het liefst een select-element. Bouw je een eigen keuzelijst, geef die dan de bijbehorende rol en zorg dat de naam, de stand en de gekozen waarde in de code staan.

#45 - De gekozen achtergrondkaart heeft te weinig contrast

Boven de kaart staat "Achtergrond", waarmee je een achtergrondkaart kiest. De gekozen optie, bijvoorbeeld "Achtergrondkaart", staat in witte tekst op een lichtgrijze achtergrond (#CCCCCC). Het contrast is 1,6:1, terwijl 4,5:1 het minimum is voor gewone tekst.

Hetzelfde geldt voor de tekst van aangevinkte selectievakjes in het zijmenu en voor andere teksten op de pagina.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als tekst weinig verschilt van de achtergrond waarop die staat, kan ik hem niet lezen. Ik verwacht genoeg contrast om makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een egale achtergrond met te weinig contrast wordt automatisch gemeld. Meet tekst op een foto of een kleurverloop met de twee pipetten. Het minimum is 4,5:1 voor gewone tekst en 3,0:1 voor grote tekst.

Oplossing

Deze tekst is kleiner dan 19 px, dus het contrast hoort minimaal 4,5:1 te zijn.

#46 - De voortgangsbalk heeft geen toegankelijke naam

Bij sommige handelingen verschijnt er een voortgangsbalk op de kaart, bijvoorbeeld als je de legenda opent. Die balk heeft geen toegankelijke naam die zegt wat er wordt geladen.

Wie de pagina met een schermlezer leest, komt de balk tegen zonder te horen waar die bij hoort.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Ik hoor dat er iets laadt, maar niet wat. Ik verwacht een naam die zegt welk proces er loopt.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol), hoe het heet (de naam) en welke waarde het heeft.

Oplossing

Geef de voortgangsbalk een aria-label of een aria-labelledby met een naam die zegt wat er wordt geladen, bijvoorbeeld "Legenda laden".

#47 - De schermlezer leest de voortgang niet voor

Bij sommige handelingen verschijnt er een voortgangsbalk op de kaart, bijvoorbeeld als je de legenda opent. Dat is een statusbericht, maar de code mist wat er nodig is om het voor te laten lezen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik op een lang proces wacht, hoor ik niet hoever het is. Ik verwacht dat mijn schermlezer de voortgang meldt, zodat ik weet dat het proces nog loopt.

Hoe te testen

Loop met een schermlezer alle handelingen langs die een statusbericht opleveren zonder dat er een nieuwe pagina laadt: een formulier versturen, een zoekopdracht starten, wachten op een laadindicator. Elk bericht hoort voorgelezen te worden zonder dat de focus ernaartoe gaat.

Oplossing

Zet het statusbericht in een live region, bijvoorbeeld met role="status" of met aria-live="polite", en zet er tekst in die de voortgang beschrijft.

#48 - De toetsenbordfocus is niet zichtbaar op de selectievakjes

De selectievakjes in het zijmenu hebben geen zichtbare focusmarkering. Toetsenbordgebruikers zien daardoor niet op welk vakje de focus staat.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. Bij de selectievakjes zie ik niet waar ik ben. Ik verwacht dat ik altijd zie welk element de focus heeft.

Hoe te testen

Loop met Tab door de hele pagina en controleer of je steeds ziet waar de focus staat. Let in de CSS op outline: none zonder vervanging. Je kunt ook de WCAG Radar openen en de optie "Focus zichtbaar maken" aanzetten.

Oplossing

Geef de selectievakjes een zichtbare focusmarkering. Gebruik de standaardmarkering van de browser, of een eigen markering met genoeg contrast en een duidelijk verschil met de gewone stand.

#49 - Een opsomming is niet als lijst opgemaakt

Als je het selectievakje "Beleven en benutten van erfgoed" aanzet, verschijnt er tekst onder de kaart. Onder de kop "Beleven en benutten van erfgoed" staat een opsomming met nummers, maar die staat niet in lijstelementen: <ul>, <ol> en <li> ontbreken.

Een schermlezer meldt daardoor niet dat het een lijst is en hoeveel onderdelen erin staan. Bezoekers die de pagina zien, halen die structuur wel uit de nummers.

Hetzelfde geldt voor de andere opsommingen verderop in de tekst.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als informatie als lijst op het scherm staat, wil ik die structuur ook horen. Ik verwacht dat mijn schermlezer meldt dat het een lijst is en hoeveel onderdelen die heeft.

Hoe te testen

Bekijk de HTML van de opsomming, of loop hem na met een schermlezer. Een opsomming die met streepjes of nummers is getypt, staat niet in <ul>- en <li>-elementen. De schermlezer meldt dan geen lijst en geen aantal onderdelen.

Oplossing

Zet de opsomming in lijstelementen: <ul> voor een lijst zonder volgorde en <ol> voor een genummerde lijst, met elk onderdeel in een <li>.

#50 - De kaarttegels hebben geen alt-attribuut

De kaart bestaat uit losse afbeeldingen zonder alt-attribuut. Schermlezers lezen daardoor de bestandsnaam van elke tegel voor.

Dat levert veel tekst op die niets betekent en maakt het moeilijker om door de kaart te navigeren.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij de kaart hoor ik de ene bestandsnaam na de andere. Ik verwacht dat deze afbeeldingen worden overgeslagen.

Hoe te testen

Bekijk elke afbeelding met de WCAG Radar of met axe DevTools. Een img-element hoort altijd een alt-attribuut te hebben. Alleen een decoratieve afbeelding die geen informatie overbrengt, houdt dat attribuut leeg.

Oplossing

Geef de kaarttegels een leeg alt-attribuut: alt="". Zorg daarnaast dat de informatie van de kaart op een andere manier beschikbaar is, bijvoorbeeld als tekst of als tabel.

#51 - De tekst in de legenda heeft te weinig contrast

De knop "Legenda" op de kaart opent een blok met lichtgrijze tekst (#999999) op een witte achtergrond, bijvoorbeeld "Omgevingsvisie Zuid-Holland (in werking tot 1 mei 2024 vanaf 1 april 2023)". Het contrast is 2,8:1 en dat is te weinig om de tekst te lezen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als tekst weinig verschilt van de achtergrond waarop die staat, kan ik hem niet lezen. Ik verwacht genoeg contrast om makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een egale achtergrond met te weinig contrast wordt automatisch gemeld. Het minimum is 4,5:1 voor gewone tekst en 3,0:1 voor grote tekst.

Oplossing

Deze tekst is kleiner dan 19 px, dus het contrast hoort minimaal 4,5:1 te zijn.

#52 - De knoppen met een pijlicoon op de kaart hebben niet de juiste rol

Op de kaart staan knoppen met een pijl omhoog en een pijl omlaag. Deze knoppen geven de rol button niet door. Wie de pagina met een schermlezer leest, hoort daardoor niet dat dit knoppen zijn.

User story

Ik lees de website met een schermlezer. Als ik door de pagina navigeer, hoor ik niet dat een element een knop is. Ik verwacht dat mijn schermlezer meldt dat ik het kan activeren.

Hoe te testen

Bekijk het element en controleer of het de rol "button" doorgeeft: een schermlezer hoort "knop" te melden. Test daarna met het toetsenbord of het element reageert op Enter en op de spatiebalk.

Oplossing

Gebruik een button-element, want dat geeft de rol vanzelf door. Kan dat niet, voeg dan role="button" toe aan het element dat er nu staat.

#53 - De regels in de legenda hebben geen passende rol

De link "Legenda" op de kaart opent een blok met legendaregels. Die regels openen een dialoogvenster als je ze aanklikt, maar ze hebben geen rol die daarbij past.

Wie de pagina met een schermlezer leest, hoort daardoor niet dat deze regels te bedienen zijn.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij de regels in de legenda hoor ik niet dat ik ze kan activeren. Ik verwacht dat mijn schermlezer meldt dat het knoppen zijn.

Hoe te testen

Bekijk het element en controleer of het de rol "button" doorgeeft: een schermlezer hoort "knop" te melden. Test daarna met het toetsenbord of het element reageert op Enter en op de spatiebalk.

Oplossing

Gebruik voor elke regel een button-element, want die opent het dialoogvenster en geeft de rol vanzelf door. Kan dat niet, voeg dan role="button" toe aan het element dat er nu staat.

#54 - De regels in de legenda werken niet met het toetsenbord

De regels in de legenda openen met een muisklik een dialoogvenster, maar je kunt ze met het toetsenbord niet bereiken en niet activeren. Toetsenbordgebruikers komen dus niet bij de informatie in die vensters.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. De regels in de legenda kan ik niet openen. Ik verwacht dat ik bij die informatie kan zonder muis.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Met Shift + Tab ga je terug. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken.

Oplossing

Zorg dat je elke regel in de legenda met Tab bereikt en met Enter of de spatiebalk opent. Gebruik daarvoor het liefst een button-element.

#55 - De menuknop meldt niet of het menu open of dicht is

Op een klein scherm verschijnt er een knop waarmee je het menu opent. Die knop geeft niet door of het menu open of dicht is. Bezoekers die de knop niet zien, bijvoorbeeld omdat ze een schermlezer gebruiken, horen dat dus niet.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik de menuknop indruk, hoor ik niet of het menu open of dicht is. Ik verwacht dat mijn schermlezer de stand van het menu meldt.

Hoe te testen

Bedien de knop en luister mee met een schermlezer, of bekijk de toegankelijkheidsboom in DevTools terwijl je hem gebruikt. De stand hoort mee te veranderen bij elke klik.

Oplossing

Kies een van deze twee oplossingen.

• Voeg aria-expanded toe aan de menuknop. Zet de waarde op true als het menu open is en op false als het dicht is, en werk die waarde bij zodra de stand verandert.
• Voeg tekst toe die alleen voor schermlezers zichtbaar is, bijvoorbeeld "Menu open" of "Menu dicht", en werk die tekst bij zodra de stand verandert.

#56 - De huidige link is alleen aan de vormgeving te herkennen

Op een klein scherm staan boven aan de pagina navigatielinks. De link van de pagina waar je bent, ziet er anders uit dan de rest, maar dat verschil staat niet in de code. Wie de pagina met een schermlezer leest, hoort dus niet welke link de huidige pagina is.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. In het menu hoor ik niet welke link bij de pagina hoort waar ik ben. Ik verwacht dat mijn schermlezer dat meldt.

Hoe te testen

Bekijk de HTML van het menu en controleer of de huidige link in de code is gemarkeerd, bijvoorbeeld met aria-current. Luister daarna met een schermlezer: bij de link naar de huidige pagina hoor je dat het de huidige pagina is.

Oplossing

Geef de link naar de huidige pagina het attribuut aria-current="page".

#57 - Bij 400% zoom valt tekst weg

Als je deze pagina bekijkt op een scherm van 1280 bij 1024 pixels en inzoomt tot 400%, valt in het menu een deel van de tekst op de knop "Geavanceerd zoeken" weg. Bij 400% zoom hoort alle tekst leesbaar te blijven.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als ik ver inzoom, verdwijnt een deel van de tekst buiten beeld. Ik verwacht dat alle tekst zichtbaar en leesbaar blijft, ook bij veel zoom.

Hoe te testen

Zet de browser op 320 CSS-pixels breed, of op 1280 px met 400% zoom, en scroll naar beneden. Je hoort niet horizontaal te hoeven scrollen om tekst te lezen. Dat mag alleen bij inhoud die twee richtingen nodig heeft, zoals een tabel, een kaart of code.

Oplossing

Zorg dat alles leesbaar blijft en blijft werken als een bezoeker op een scherm van 1280 bij 1024 pixels inzoomt tot 400%.

#58 - De toetsenbordfocus komt op elementen die niet zichtbaar zijn

Op een klein scherm komt de toetsenbordfocus aan het begin van de pagina op elementen die niet zichtbaar zijn. Toetsenbordgebruikers zien de focus dan niet staan en kunnen per ongeluk iets activeren.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. Als ik met Tab door de pagina ga, komt de focus soms op elementen die ik niet zie. Ik verwacht dat de focus alleen op zichtbare elementen komt.

Hoe te testen

Loop met Tab door de pagina. De focusmarkering hoort nooit te verdwijnen. Zie je hem niet meer terwijl je verder tabt, dan staat de focus op een element dat wel in de code staat maar niet op het scherm. Zoek in de DOM naar verborgen elementen die focus kunnen krijgen.

Oplossing

Zorg dat alleen zichtbare elementen focus krijgen, en dat de focusvolgorde logisch blijft.

#59 - Het invoerveld in het deelvenster heeft geen toegankelijke naam

In de kopregel staat de link "Delen", die een dialoogvenster opent. In dat venster staat een invoerveld zonder toegankelijke naam. Wie de pagina met een schermlezer leest, hoort alleen "tekstveld" en weet niet wat er ingevuld moet worden.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Als ik een formulier invul, hoor ik alleen "tekstveld" zonder uitleg. Ik verwacht dat elk veld een duidelijke naam heeft, zodat ik weet wat ik moet invullen.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk invoerveld de toegankelijke naam. Controleer of elk veld een naam heeft en of die naam overeenkomt met de zichtbare tekst ernaast.

Oplossing

Koppel het invoerveld het liefst met een label-element aan de zichtbare tekst die erbij hoort. Een aria-label of een aria-labelledby kan ook.

#60 - De links naar sociale media hebben geen toegankelijke naam

In de kopregel staat de link "Delen", die een dialoogvenster opent. In dat venster staan links naar sociale media zonder toegankelijke naam. Er is een naam geprobeerd met het title-attribuut, maar dat levert geen bruikbare naam op.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij deze links hoor ik alleen "link" en verder niets. Ik verwacht bij elke link een duidelijke naam, zodat ik weet waar die heen gaat.

Hoe te testen

Loop elk interactief onderdeel langs met het toegankelijkheidspaneel in DevTools en met een schermlezer. Elk onderdeel hoort door te geven wat het is (de rol) en hoe het heet (de naam).

Oplossing

Geef elke link een aria-label met een naam die zegt wat hij doet, bijvoorbeeld "Delen via Facebook" of "Delen via LinkedIn".

#61 - De keuzelijsten in het venster "Geavanceerd zoeken" hebben geen toegankelijke naam

In de kopregel staat de knop "Geavanceerd zoeken", die een dialoogvenster opent. De keuzelijsten in dat venster hebben geen toegankelijke naam. Wie de pagina met een schermlezer leest, hoort dus niet wat er te kiezen valt.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij een keuzelijst hoor ik geen naam die zegt waar die voor is. Ik verwacht een duidelijke naam, zodat ik weet wat ik kies.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elke keuzelijst de toegankelijke naam. Controleer of elke lijst een naam heeft en of die naam zegt wat de bezoeker kiest.

Oplossing

Geef elke keuzelijst een naam. Dat kan op drie manieren.

• Koppel een label aan de keuzelijst met het for-attribuut. Dit heeft de voorkeur, want dan zien alle bezoekers de naam.

<label for="plantype">Type plan</label>
<select id="plantype">…</select>

• Geef de keuzelijst een aria-label als er geen zichtbaar label is.

<select aria-label="Type plan">…</select>

• Gebruik aria-labelledby om te verwijzen naar tekst die al op de pagina staat.

<span id="plantype-label">Type plan</span>
<select aria-labelledby="plantype-label">…</select>

#62 - De eigen focusmarkering heeft te weinig contrast

In het venster achter de knop "Geavanceerd zoeken" staan keuzelijsten. Krijgt zo'n lijst de toetsenbordfocus, dan verschijnt er een lichtblauwe rand op een witte achtergrond. Het contrast is 2,4:1, terwijl 3,0:1 het minimum is.

Een eigen focusmarkering moet aan de contrasteis voldoen, anders dan de standaardmarkering van de browser. Bezoekers kunnen een eigen markering niet aanpassen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik gebruik de website met een toetsenbord en ik zie slecht. Als ik door de pagina navigeer, zie ik niet goed waar de focus staat. Ik verwacht een markering die duidelijk afsteekt tegen de achtergrond.

Hoe te testen

Ga met Tab naar het element, zodat de focusmarkering verschijnt. Meet het contrast van de markering met de achtergrond ernaast met de Colour Contrast Analyser of met de WCAG Radar, optie "Contrast". Het minimum is 3,0:1.

Oplossing

Geef de focusmarkering een contrast van minimaal 3,0:1 met de kleuren eromheen. Gebruik daarvoor een rand, een outline of een andere duidelijke markering.

#63 - Het selectievakje met het zoekresultaat heeft geen toegankelijke naam

In het venster achter de knop "Geavanceerd zoeken" kies je opties en activeer je "OK". Daarna verschijnt er op de pagina een nieuw selectievakje. Dat vakje heeft geen toegankelijke naam.

Wie de pagina met een schermlezer leest, hoort dus niet waar het vakje over gaat. En omdat de zichtbare tekst "Resultaten gevonden voor provinciaal belang." niet in de naam staat, werkt spraakbediening er ook niet op.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Bij dit selectievakje hoor ik geen naam. Ik verwacht dat het vakje heet zoals de tekst ernaast.

Hoe te testen

Open de WCAG Radar en zet de optie "Toegankelijke naam" aan. Je ziet dan van elk invoerveld de toegankelijke naam. Controleer of elk veld een naam heeft en of die naam overeenkomt met de zichtbare tekst ernaast.

Oplossing

Geef dit selectievakje een naam met de volledige zichtbare tekst "Resultaten gevonden voor provinciaal belang". Koppel die tekst het liefst met een label-element aan het vakje, of gebruik aria-label of aria-labelledby.

#64 - De toetsenbordfocus is niet zichtbaar op het selectievakje met het zoekresultaat

Het selectievakje dat na "Geavanceerd zoeken" op de pagina verschijnt, heeft geen zichtbare focusmarkering. Toetsenbordgebruikers zien daardoor niet dat de focus erop staat.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. Bij dit selectievakje zie ik niet dat de focus erop staat. Ik verwacht dat ik altijd zie welk element de focus heeft.

Hoe te testen

Loop met Tab door de hele pagina en controleer of je steeds ziet waar de focus staat. Let in de CSS op outline: none zonder vervanging. Je kunt ook de WCAG Radar openen en de optie "Focus zichtbaar maken" aanzetten.

Oplossing

Geef het selectievakje een zichtbare focusmarkering. Gebruik de standaardmarkering van de browser, of een eigen markering met genoeg contrast en een duidelijk verschil met de gewone stand.

#65 - Het selectievakje met het zoekresultaat werkt niet met het toetsenbord

Het selectievakje dat na "Geavanceerd zoeken" op de pagina verschijnt, krijgt wel de toetsenbordfocus, maar je kunt het niet aan- of uitzetten met Enter of de spatiebalk.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik bedien de website met het toetsenbord. Ik kan bij dit selectievakje komen, maar ik kan het niet aanzetten. Ik verwacht dat ik alle keuzes kan maken zonder muis.

Hoe te testen

Zet de cursor in de adresbalk van de browser en loop met Tab door de pagina. Bedien elementen met Enter, de spatiebalk en de pijltoetsen. Elk element dat met de muis werkt, hoort ook met het toetsenbord te werken.

Oplossing

Zorg dat je het selectievakje met de spatiebalk aan- en uitzet. Gebruik het liefst een input type="checkbox", want die bediening zit er dan al in.

#66 - De gele markering van een selectievakje staat niet in de code

Kies je opties in het venster achter "Geavanceerd zoeken" en activeer je "OK", dan krijgt een van de selectievakjes in het zijmenu een gele achtergrond. Die markering zegt iets over dat vakje, maar dat staat alleen op het scherm en niet in de code.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik lees de website met een schermlezer. Ik hoor niet dat een selectievakje is gemarkeerd. Ik verwacht dat informatie die je met een kleur laat zien, ook in de code staat.

Hoe te testen

Kies met "Geavanceerd zoeken" een optie en activeer "OK". Ga met een schermlezer naar het geel gemarkeerde selectievakje in het zijmenu en controleer of je hoort wat de markering betekent.

Oplossing

Zet de betekenis van de gele markering in de code, met een passende stand of met tekst die uitlegt wat de markering betekent.

#67 - De melding over de zoekresultaten heeft te weinig contrast

Kies je opties in het venster achter "Geavanceerd zoeken" en activeer je "OK", dan verschijnt op de pagina de tekst "Resultaten gevonden voor provinciaal belang." Die tekst staat in het wit op een gele achtergrond (#E8C635). Het contrast is 1,7:1 en dat is te weinig om de tekst te lezen.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als tekst weinig verschilt van de achtergrond waarop die staat, kan ik hem niet lezen. Ik verwacht genoeg contrast om makkelijk te lezen.

Hoe te testen

Open de WCAG Radar en zet de optie "Contrast" aan. Tekst op een egale achtergrond met te weinig contrast wordt automatisch gemeld. Het minimum is 4,5:1 voor gewone tekst en 3,0:1 voor grote tekst.

Oplossing

Deze tekst is kleiner dan 19 px, dus het contrast hoort minimaal 4,5:1 te zijn.

#68 - Het selectievakje met het zoekresultaat heeft te weinig contrast

Het selectievakje dat na "Geavanceerd zoeken" op de pagina verschijnt, is wit op een gele achtergrond (#D3B73F). Het contrast is ongeveer 2,0:1, terwijl 3,0:1 het minimum is voor onderdelen waarmee je iets bedient.

Hetzelfde staat op de pagina https://www.ruimtelijkeplannenzuidholland.nl/ZHOV-geconsolideerd/.

User story

Ik zie slecht. Als een selectievakje nauwelijks afsteekt tegen de achtergrond, zie ik niet dat het er staat. Ik verwacht genoeg contrast om het te vinden.

Hoe te testen

Meet het contrast tussen het selectievakje en de achtergrond ernaast met de Colour Contrast Analyser. Het minimum is 3,0:1. Je kunt ook de WCAG Radar gebruiken met de optie "Contrast".

Oplossing

Geef de rand of de andere zichtbare kenmerken van het selectievakje een contrast van minimaal 3,0:1 met de kleuren eromheen.

#69 - Eén lijst staat in de code als twee lijsten

Als je het selectievakje "HOOFDSTUK 1 ALGEMENE BEPALINGEN" aanzet, verschijnt er tekst onder de kaart. Onder de kop "regels" staat op het scherm één lijst, maar in de code staan twee <ul>-elementen.

Wie de pagina met een schermlezer leest, hoort daardoor twee lijsten met elk een eigen aantal onderdelen, terwijl het er één is.

User story

Ik lees de website met een schermlezer. Ik hoor twee lijsten, terwijl er op het scherm één lijst staat. Ik verwacht dat de code laat zien wat ik zie.

Hoe te testen

Bekijk de HTML van de lijst, of loop hem na met een schermlezer. Controleer of de onderdelen die bij elkaar horen in één <ul> staan.

Oplossing

Zet alle onderdelen in één <ul>-element, met elk onderdeel in een <li>.

#70 - Koppen die alleen uit een nummer bestaan

Als je het selectievakje "HOOFDSTUK 1 ALGEMENE BEPALINGEN" aanzet, verschijnt er tekst onder de kaart. Onder de kop "Afdeling 1.1 Algemeen" staan koppen die alleen uit een nummer bestaan, zoals "1." en "2.".

Zo'n kop zegt niets over de tekst eronder. Wie door de koppen navigeert, weet daardoor niet wat er in dat deel staat.

User story

Ik lees de website met een schermlezer. Als ik door de koppen navigeer, hoor ik alleen nummers. Ik verwacht dat een kop zegt waar het stuk eronder over gaat.

Hoe te testen

Loop de pagina met een schermlezer langs de koppen en controleer of elke kop beschrijft wat er in dat deel staat. Een kop als "1." of "Klik hier" voldoet niet.

Oplossing

Geef elke kop tekst die zegt waar het stuk over gaat. Wil je het nummer laten staan, zet er dan de titel van het artikel of de paragraaf achter.

Een deel van de bevindingen op deze pagina staat hierboven al beschreven.