Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website VNG Klaar voor de start

(Alleen de bevindingen)

Scope van de evaluatie

Naam website VNG Klaar voor de start
Datum 23 maart 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op omgevingswet.vng.nl.
  • Alle pdf's op omgevingswet.vng.nl.
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 32

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: In de header van iedere pagina staat het logo van VNG. De alternatieve tekst van de afbeelding is 'Logo'. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie bevat. Pas de alternatieve tekst daarom aan. Zie ook succescriterium 2.4.4.

Bevinding 2: Op de homepage staat bij ieder thema een icoon. Deze hebben allemaal als alternatieve tekst 'theme icon'. Dit zijn decoratieve iconen. Decoratieve afbeeldingen hoeven geen alternatieve tekst te hebben, het alt-attribuut mag hier leeggelaten worden. Decoratieve afbeeldingen mógen wel een alternatieve tekst hebben, maar dan moet de alternatieve tekst de afbeelding dan ook daadwerkelijk beschrijven. Dat is hier niet het geval. Daarnaast wordt nu bij iedere link ook 'theme icon *naam thema*' voorgelezen. Dit is storend voor bezoekers die gebruik maken van voorleessoftware.

Bevinding 3: Op de homepage wordt met witte of gekleurde keuzerondjes aangegeven of een onderwerp al is ingevuld of niet. Deze informatie is enkel visueel aanwezig, er is geen alternatief voor bezoekers die gebruik maken van hulpsoftware en het scherm niet kunnen zien. Zorg ervoor dat deze informatie ook in tekst, zoals een alternatieve tekst of screenreader-only tekst, aanwezig is. Dit geldt ook voor de visuele keuzerondjes op de invulpagina's, zoals https://omgevingswet.vng.nl/themes/dienstverlening/lokale-toepasbare-regels/.

Bevinding 4: Advies: In de tabellen zijn de visuele checkboxes in de code svg-bestanden. Deze worden door sommige hulpsoftware en browser combinaties herkend en uitgesproken als afbeeldingen zonder alternatieve tekst. Geef ofwel de svg's een alternatieve tekst of verberg ze voor hulpsoftware met bijvoorbeeld aria-hidden. Zie verder succescriterium 4.1.2 voor een betere oplossing.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: In de footer van iedere pagina is in de code een ongeordende lijst aanwezig. De tekst 'VNG © 2023' is genest binnen het ul-element, maar niet binnen een eigen li-element. Dit is niet toegestaan. Zorg ervoor dat een ul-element enkel li-elementen als directe descendants heeft.

Bevinding 6: Op onder andere pagina https://omgevingswet.vng.nl/themes/dienstverlening/frontoffice/ komt content visueel in tabelvorm voor. Voor bezoekers die gebruik maken van hulpsoftware is de content echter niet gestructureerd, omdat de tabelstructuur ontbreekt. Dit komt omdat de rol 'region' op het table-element is geplaatst. Hierdoor is er geen tabelstructuur meer beschikbaar voor hulpsoftware. Voor deze bezoekers is er geen relatie tussen de (visuele) kopjes en de onderliggende tekst en keuzevakjes in de kolommen. Verwijder de region rol om dit probleem op te lossen. Dit probleem doet zich op iedere themapagina voor. Let op dat de teksten in de linkerkolom dan ook opgemaakt moeten worden met het th-element, zodat er een relatie is tussen de mijlpalen en selectievakjes.

Bevinding 7: De geëxporteerde PDF is niet gecodeerd en daardoor is er voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat codes ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF-codelaag zoals semantische koppen en alt-teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan.

Bevinding 8: Advies: Op de homepage staat een legenda. De tekst in de legende is opgemaakt als labels, maar deze labels zijn nergens aan gekoppeld. De tekst wordt wel voorgelezen, maar er is geen relatie tussen de visuele keuzerondjes en de tekst ernaast.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 9: Op de homepage wordt verwezen naar 'de bolletjes'. Bezoekers die het scherm niet kunnen zien, weten niet waar dit naar verwijst. Alle instructies om content te kunnen begrijpen of te bedienen, moeten ook tekstueel en/of semantisch aanwezig zijn zodat de instructies ook te begrijpen zijn voor mensen die het beeld niet zien. Denk hierbij aan vorm, omvang, locatie, geluid en oriëntatie van de content, die ook tekstueel beschreven moet zijn op dezelfde pagina.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: Op de homepage staat witte tekst op een lichtblauwe (HEX #03A9F4) achtergrond, bijvoorbeeld 'Dashboard' en de namen van de thema's. De contrastratio is hier 2,6;1 waar dat minimaal 3:1 moet zijn.

Bevinding 11: Op onder andere pagina https://omgevingswet.vng.nl/themes/dienstverlening/frontoffice/ staan onder 'Acties' invoervelden met daarin placeholdertekst. De contrastratio tussen de grijze tekst (HEX #9CA0AA) en de witte achtergrond is 2,6:1 waar dat minimaal 4,5;1 moet zijn.

Bevinding 12: In de geëxporteerde PDF komt lichtblauwe tekst (HEX #04A5EF) op een witte achtergrond voor. De contrastratio is hier 2,7:1 waar dat minimaal 4,5:1 moet zijn voor normale tekst en 3:1 voor grote, dikgedrukte tekst. Dit geldt ook voor de witte tekst op de blauwe achtergrond, in de tabellen.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 13: Wanneer bezoekers met viewport 1280 bij 1024 inzoomen naar 400% op pagina https://omgevingswet.vng.nl/, zijn niet alle teksten meer goed leesbaar omdat ze buiten beeld vallen. Bijvoorbeeld 'Ketensamenwerking.' Zorg ervoor dat inzoomen niet leidt tot verlies van informatie of functionaliteit.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 14: Op de website wordt gebruik gemaakt van een lichtblauw (HEX #04A5EE) gestippelde focusrand. De contrastratio op de witte achtergrond is 2,7:1 waar dat minimaal 3:1 moet zijn.

2. Bedienbaar

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 15: De website heeft geen manier om blokken herhalende content over te slaan. Bezoekers die gebruik maken van het toetsenbord moeten op iedere pagina langs de twee links in de header van de pagina navigeren voor zij bij de eerste niet herhalende content uitkomen. Voeg daarom een skiplink toe om dit probleem op te lossen.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 16: De geëxporteerde PDF heeft geen titel, alleen een bestandsnaam. Zorg voor een beschrijvende titel (bijvoorbeeld de titel die de bezoeker zelf geeft) en zorg ervoor dat niet de bestandsnaam maar de titel wordt getoond bij openen.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 17: Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. Wanneer bezoekers met het toetsenbord het menu openen, krijgen eerst twee links op de achterliggende pagina, en dan pas de sluitknop in het menu focus. Zorg ervoor dat wanneer bezoekers verder navigeren met het toetsenbord, de toetsenbordfocus direct in het menu komt.

Bevinding 18: Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. Wanneer bezoekers met het toetsenbord het menu openen en er doorheen navigeren, gaat de toetsenbordfocus daarna verder op de achterliggende pagina terwijl het menu geopend blijft. Zorg ervoor dat bezoekers het menu ofwel zelf moeten afsluiten, of dat het menu automatisch sluit wanneer de bezoeker vanaf het laatste item verder navigeert.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 19: In de header van iedere pagina staat het logo van VNG. De alternatieve tekst van de afbeelding is 'Logo'. Hierdoor is er ook geen duidelijk linkdoel aanwezig. Pas de alternatieve tekst aan naar tenminste de naam van de organisatie (zie 1.1.1) om dit probleem op te lossen.

2.4.5 Meerdere manieren (Niveau AA)

Informatie over succescriterium 2.4.5 Meerdere manieren

Uitkomst: Onvoldoende

Bevinding 20: De pagina's die via de themapagina's bereikbaar zijn (via het linker navigatiemenu) zijn niet op een andere manier te bereiken. Voeg minimaal één andere manier toe, bijvoorbeeld door een zoekfunctie of een sitemap toe te voegen.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 21: Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. De knop om het menu te openen heeft als toegankelijke naam 'Logo'. Dit omschrijft de functie van de knop niet. Zorg ervoor dat bezoekers die gebruik maken van voorleessoftware weten waar de knop voor dient door een beschrijvende naam toe te voegen, bijvoorbeeld 'Menu'. Dit geldt ook voor de knop om het menu weer te sluiten.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 22: Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. Niet alle items in het menu zijn zichtbaar, maar deze items krijgen wel toetsenbordfocus. Dit is verwarrend voor bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren, maar het scherm wél kunnen zien. Idealiter zijn alle menu items zichtbaar, voor zowel bezoekers die met het toetsenbord als met de muis navigeren. Dat is nu beiden niet het geval.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 23: Op de homepage staat de tekst 'Start bij het eerste thema : Dienstverlening'. Dit is een link, maar de toegankelijke naam van de link is 'button'. Bezoekers die gebruik maken van voorleessoftware weten daardoor niet waar de link naar verwijst, omdat zij de visuele tekst niet kunnen lezen. Daarnaast kunnen bezoekers die gebruik maken van spraakgestuurde software de links en knoppen niet activeren, omdat deze niet overeenkomt met de visuele naam die zij uitspreken. Zorg ervoor dat de toegankelijke naam en de visuele naam overeenkomen, of dat de visuele naam tenminste voorkomt in de toegankelijke naam.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 24: De hoofdtaal van de pagina is ingesteld op Engels, terwijl de content op de pagina's Nederlandstalig is. Hierdoor kan het zijn dat bezoekers die gebruik maken van voorleessoftware de schermlezer niet kunnen verstaan, omdat deze overschakelt op Engels, maar Nederlandstalige tekst voorleest. Zorg ervoor dat de taalinstellingen overeenkomen met de geschreven taal op de pagina. Zorg er ook voor dat de toegankelijke namen van interactieve elementen in het Nederlands worden aangeboden.

Bevinding 25: Pagina https://omgevingswet.vng.nl/bestaatniet heeft geen taalaanduiding. Hierdoor weet voorleessoftware niet in welke de pagina moet worden voorgelezen. Zorg ervoor dat de pagina een taalaanduiding krijgt door gebruik te maken van het lang-attribuut op het html-element. De content van deze pagina is nu in het Engels, het is beter om een Nederlandse 404-pagina te hebben omdat de rest van de website ook in het Nederlands is.

Bevinding 26: De geëxporteerde PDF heeft geen ingestelde taal. Hierdoor wordt de PDF mogelijk in de verkeerde taal voorgelezen (wanneer er tags aanwezig zouden zijn). Zorg ervoor dat de hoofdtaal van de PDF (in dit geval Nederlands), ook in de taalinstellingen van de PDF zijn vastgelegd.

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Voldoende

Bevinding 27: Advies: Wanneer bezoekers de huidige voortgang exporteren door op de knop 'Exporteren' te drukken, wordt de bezoeker direct naar de homepage geleid. Dit is onverwacht en verwarrend. Aangezien dit succescriterium alleen over invoervelden gaat en niet over knoppen, is dit niet afkeurbaar, maar het advies is geen contextwijzigingen zonder aankondiging uit te voeren.

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 28: Op onder andere pagina https://omgevingswet.vng.nl/themes/dienstverlening/frontoffice/ staan onder 'Acties' invoervelden met daarin placeholdertekst met aanvullende instructies op de labeltekst, zoals 'datum of maand' en 'naam'. Deze instructies verdwijnen zodra een bezoeker begint met typen. Zorg ervoor dat labels en instructies permanent zichtbaar blijven zolang de bezoeker het invoerveld kan invullen en aanpassen.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 29: Wanneer bezoekers inzoomen op de pagina verandert het navigatiemenu bovenaan de pagina in een hamburgermenu. Het is voor ziende bezoekers duidelijk of de knop geopend of gesloten is, maar deze informatie is niet beschikbaar voor hulpsoftware. Gebruik aria-expanded op de menuknop, of een vergelijkbare techniek, om dit probleem op te lossen.

Bevinding 30: Op onder andere pagina https://omgevingswet.vng.nl/themes/dienstverlening/frontoffice/ komen knoppen voor zonder toegankelijke naam. Bezoekers die gebruik maken van voorleessoftware weten niet waar deze knoppen voor dienen. Er wordt ook niet aan hulpsoftware gecommuniceerd of de knop is ingedrukt of niet, terwijl dat visueel wel zichtbaar is. Visueel zijn er hier selectievakjes aanwezig. Qua gedrag (bezoekers kunnen per rij in de tabel één keuze kiezen), gáát het hier echter om keuzerondjes. Maak daarom bij voorkeur gebruik van radio buttons, die worden gegroepeerd met een fieldset en legend combinatie (met de tekst uit de linker kolom), met de toegankelijke namen Niet gestart, Mee bezig, of Afgerond, zodat de relatie tussen de kolommen en de radio buttons ook voor hulpsoftware duidelijk is. Zorg er in ieder geval dat er zowel een toegankelijke naam, een staat (aangevinkt of niet) en een relatie tussen de vraag en de invoerelementen aanwezig is, ook wanneer niet voor de voorgedragen oplossing gekozen wordt.

Bevinding 31: Het is voor ziende bezoekers duidelijk welke link uit het navigatiemenu, bijvoorbeeld op pagina https://omgevingswet.vng.nl/themes/dienstverlening/lokale-toepasbare-regels/, momenteel geopend is, doordat de achtergrond van het icoon blauw kleurt en het icoon zelf wit kleurt. Voor hulpsoftware is deze informatie niet beschikbaar. Gebruik bijvoorbeeld aria-current of een vergelijkbare techniek om dit probleem op te lossen.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 32: Wanneer bezoekers een rapportage exporteren verschijnt de melding 'Rapportage exporteren'. Deze melding wordt niet voorgelezen aan hulpsoftware. Zorg ervoor dat bezoekers weten wat er gaande is na het drukken op de knop 'Exporteren'.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2025-05-12 07:09:56 v2.4-011