Rapport:
Audit digitale toegankelijkheid website VNG

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina vng.nl/ staat bij het hoofdnavigatiemenu het logo van VNG. Dit logo heeft de alternatieve tekst 'Home' wat de afbeelding niet omschrijft. Hierdoor weten bijvoorbeeld screenreadergebruikers niet dat een VNG logo op de pagina staat. Zorg ervoor dat wanneer een logo op een pagina staat altijd de tekst in het logo en de organisatienaam in de alternatieve tekst worden geplaatst.

Op de pagina vng.nl/ staat een icoon van een vergrootglas dat is opgemaakt met een svg-element. Dit element heeft het attribuut role=img maar geen alt-attribuut. Zorg ervoor dat deze afbeelding een leeg alt-attribuut krijgt zodat hulpsoftware weet dat hier om een decoratieve afbeelding gaat. Dit probleem komt ook voor bij de social media-knoppen waarmee bezoekers de pagina kunnen delen.
Afbeeldingen zonder alternatieve tekst of zonder een leeg alt-attribuut om aan te geven dat de afbeelding decoratief is, komen op meerdere pagina's voor. Bijvoorbeeld op pagina vng.nl/artikelen/about-the-vng en op vng.nl/projecten/ensia.

Op de pagina vng.nl/ staat achter de link 'Meld u aan' een icoon dat aangeeft dat de link naar een externe pagina verwijst. Dit icoon heeft geen alternatieve tekst, waardoor bezoekers die het scherm niet (goed) kunnen zien niet dezelfde informatie krijgen als ziende bezoekers. Geef het icoon daarom een alternatieve tekst dat aangeeft dat de link naar een externe pagina verwijst. Dit kan door, bijvoorbeeld, gebruik te maken van een visueel verborgen tekst.
Dit icoon komt op meerdere pagina's voor, bijvoorbeeld op pagina vng.nl/contact en op vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland en op vng.nl/projecten/ensia.

Op pagina vng.nl/contact staan in de uitvouwbare knoppen (accordeons) onder de kop 'VOOR U CONTACT OPNEEMT, KIJK OF UW VRAAG HIER TUSSEN STAAT' visueel verborgen svg-afbeeldingen met de attributen role=img en title=Toggle.
Naast dat het title-attribuut niet geschikt is om een afbeelding een toegankelijke naam te geven, kan deze toegankelijke naam verwarrend zijn voor screenreadergebruikers. Niet elke bezoeker spreekt Engels en een Nederlandse screenreader zal dit woord niet goed uitspreken.
Echter, omdat hier ook een button-element met aria-expanded staat, is het voor screenreadergebruikers al duidelijk dat het hier om een uitvouwbare knop gaat en is het title-attribuut dus overbodig.
Nog beter is om de svg-afbeelding helemaal te verbergen met aria-hidden=true, omdat het nu voor (screenreader)gebruikers die het scherm wel kunnen zien verwarrend kan zijn dat hier een onzichtbare afbeelding staat.

Wanneer bezoekers bij een schermbreedte van 1280px inzoomen tot 200% verdwijnt de tekst van de link 'Mijn VNG' en wordt de link alleen gelabeld door een icoon. Dit icoon is op de website geplaatst met een svg-element en dat het attribuut role=img heeft. Echter, het icoon krijgt de alternatieve tekst 'Mijn VNG' via het title-attribuut. Dit attribuut is niet geschikt om afbeeldingen en iconen een alternatieve tekst te geven omdat de toegankelijkheid hiervan niet breed wordt ondersteund door browsers en hulpsoftware. Gebruik aria-label of bijvoorbeeld het title element (niet attribuut) om de afbeelding een alternatieve afbeelding te geven.

Op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan staan afbeeldingen van teksten. Deze afbeeldingen hebben alternatieve teksten die niet overeenkomen met de teksten in de afbeeldingen. Ook zijn de afbeeldingen van teksten niet toegankelijk voor bezoekers die vanwege de leesbaarheid teksten moeten vergroten om teksten als afbeeldingen op een pagina te plaatsen (zie SC 1.4.5). Verwijder daarom de afbeeldingen en plaats de tekst met HTML op de pagina.

De infographic op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan heeft de alternatieve tekst '20211209-infographic-wp-op'. Deze alternatieve tekst omschrijft de afbeelding niet. Omdat de afbeelding wordt uitgelegd in de tabel daaronder heeft de afbeelding geen uitgebreide alternatieve tekst nodig. Zorg ervoor dat in de afbeeldingen een korte omschrijving staat, bijvoorbeeld 'Infographic Stappenplan Omgevingsplan, zie onderstaande uitleg'.
Afbeeldingen met een niet goed omschrijvende alternatieve tekst komen op meerdere pagina's voor, bijvoorbeeld bij een afbeelding op pagina vng.nl/nieuws.

De volgende bevindingen gaan over afbeeldingen in de PDF 'Verzoek bestuurlijke reactie voorstel wetswijziging kostendelersnorm':

• Op de eerste pagina staat het VNG logo. Dit logo is aangemerkt als artefact (decoratief) en wordt daardoor niet opgemerkt door hulpsoftware. Zorg ervoor dat het logo met een goede alternatieve tekst in een Figure-tag komt te staan.
• Op de eerste pagina staat een visueel verborgen tekstvak. De rand van dit tekstvak is in een Figure-tag geplaats waardoor dit wordt bijvoorbeeld wordt voorgelezen door screenreaders. Zorg ervoor dat de rand van het tekstvak wordt aangemerkt als artefact en verwijder de Figure-tag uit de codelaag.
• Op de derde pagina staat een afbeelding van een handtekening. Deze afbeelding is in een Figure-tag geplaatst maar heeft geen alternatieve tekst. Zorg ervoor dat deze afbeelding een goede alternatieve tekst krijgt.

De volgende bevindingen gaan over afbeeldingen in de PDF 'Handreiking uitvoering ENSIA 2022':

• Op pagina 1 staan decoratieve figuren die in een Figure-tag zijn geplaatst. Zorg ervoor dat deze figuren worden aangemerkt als artefact en dat de lege Figure-tag wordt verwijderd.
• Het logo van VNG realisatie op pagina 1 is aangemerkt als artefact. Zorg ervoor dat deze afbeelding in een Figure-tag wordt geplaatst en een goede alternatieve tekst krijgt.
• Op pagina 7 staat een afbeelding van een tijdlijn die geen alternatieve tekst heeft. Zorg ervoor dat de afbeelding een alternatieve tekst krijgt waarin dezelfde informatie staat als op de afbeelding is te zien. Zo is deze informatie ook beschikbaar voor screenreadergebruikers.
• Op pagina 3 is in de inhoudsopgave gebruikgemaakt van meerdere punten voor decoratie, deze punten zijn in tags geplaatst. De punten worden door screenreaders voorgelezen, wat verwarrend kan zijn voor gebruikers. Los dit op door de decoratieve punten aan te merken als artefact.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/projecten/ensia staan twee video's die een automatische gegenereerde ondertiteling hebben. Op sommige punten in de video's komt de ondertiteling niet overeen met de audio, bijvoorbeeld in de video 'Zo werkt ENSIA - procesoverzicht' rond 2:03 waar 'op de datakwaliteit' wordt gezegd maar 'op de datacard' staat in de ondertiteling. Daarnaast heeft een automatisch gegenereerde ondertiteling geen hoofdletter en interpuncties, waardoor het lastig te lezen is. Maak daarom een eigen ondertiteling aan en plaatst deze in de video's.

Uitkomst: Onvoldoende

Bevindingen: Aan het begin en eind van de video op pagina vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland staan teksten en een logo in beeld. Deze teksten en het logo zijn niet meegenomen in het audiospoor van de video. Mensen die het scherm niet kunnen zien en afhankelijke zijn van de audio om de video te begrijpen krijgen niet alle informatie in beeld mee. Zorg er daarom voor dat een media-alternatief beschikbaar is waar onder andere de teksten in beeld in staan uitgeschreven. Of maak gebruik van een audiodescriptie om ook te voldoen aan SC 1.2.5.
Dezelfde soort problemen komen ook voor bij de video's op pagina vng.nl/projecten/ensia waar het audiospoor ook niet alle informatieve teksten in beeld uitspreekt.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland staat een video waar in het begin teksten in beeld worden getoond en op het eind van de video een logo. Deze teksten en het logo zijn niet opgenomen in het audiospoor. Wanneer een bezoeker die het scherm niet kan zien de video afspeelt mist deze bezoeker de informatie in de teksten en het logo. Zorg er daarom voor dat de teksten en het logo worden uitgesproken door bijvoorbeeld de verteller in de video of maak gebruik van een audiodescriptie die de teksten en het logo voorlezen.
Dezelfde soort problemen komen ook voor bij de video's op pagina vng.nl/projecten/ensia waar het audiospoor ook niet alle informatieve teksten in beeld uitspreekt.

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/ staan verschillende lijsten die maar één lijstitem bevatten. Een lijst met één item is technisch gezien geen lijst en kan verwarrend zijn voor gebruikers van hulpsoftware zoals screenreaders. Wanneer content in een lijst is geplaatst geeft dat bijna altijd aan dat content gegroepeerd is. Als een lijst maar één item bevat kan het voor screenreadergebruiken lijken of de andere lijstitems niet worden voorgelezen. Maak daar geen gebruik van lijsten met maar één item, visueel mag de huidige opmaak wel worden aangehouden.
Lijsten met maar één item komen op meerdere pagina's voor, bijvoorbeeld op pagina vng.nl/contact en op vng.nl/toegankelijkheid.

Op pagina vng.nl/toegankelijkheid staan de teksten 'Uitzonderingen digitale toegankelijkheid' en 'Meer informatie'. Visueel is duidelijk dat deze teksten koppen zijn voor de onderstaande content maar in de code is dit niet aangegeven. Deze koppen zijn alleen opgemaakt met het strong-element, wat niet dezelfde semantische waarde heeft als een kop-element. Het strong-element is bedoeld om aan te geven dat tekst belangrijk is. Verwijder daarom het strong-element en maak de koppen op met kop-elementen.
Dit probleem komt op meerdere pagina's voor, bijvoorbeeld op pagina vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland.

Op pagina vng.nl/a-z zijn de letters, zoals 'A' en 'T', visueel koppen voor de onderstaande lijsten. Echter, in de code zijn de letters niet aangemerkt als koppen. Zorg ervoor dat deze letters in een kop-element worden geplaatst. Houd hierbij rekening met een logische koppenstructuur.
Op meerdere pagina's staan koppen die in de code niet zijn opgemaakt met een kop-element, bijvoorbeeld op pagina vng.nl/brieven/verzoek-bestuurlijke-reactie-voorstel-wetswijziging-kostendelersnorm.

Op pagina vng.nl/user/login staat het invoerveld 'Rekenvraag'. Dit invoerveld is wel gekoppeld aan het label 'Rekenvraag' maar niet aan de som die bezoekers moeten beantwoorden. Hierdoor kan het voor bezoekers die gebruikmaken van een screenreader lastig zijn om dit veld in te vullen. Zorg ervoor dat het invoerveld wordt gekoppeld aan de som die bezoekers moeten oplossen.
Dit veld komt ook voor op pagina vng.nl/user/register.

Op pagina vng.nl/user/register staan twee keuzelijsten met de labels 'Gemeente' en 'Functie'. Wanneer bezoekers op de keuzelijsten klikken verschijnt een venster met verschillende opties en een zoekveld. De keuzelijsten zelf zijn niet opgemaakt met een input-element maar met een a-element zonder href-attribuut, waardoor aan gebruikers van hulpsoftware niet wordt doorgegeven dat hier keuzelijsten staan. Het visueel verborgen zoekveld wordt wel door bijvoorbeeld screenreaders voorgelezen, ook als deze bezoekers het venster waar dit veld in staat niet zichtbaar hebben gemaakt. Dit bij elkaar maakt het voor verschillende bezoekers lastig deze velden te bedienen en in te vullen (zie ook SC 2.1.1 en SC 4.1.2). Het is beter om semantische HTML te gebruiken bij het creëren van een element. Gebruik hier bijvoorbeeld het select-element om de keuzelijsten mee op te maken en koppel het veld aan het visuele label met de for- en id-attributen. Er is een select-element aanwezig, maar dat heeft een tabindex van -1 waardoor het niet toegankelijk is voor bezoekers die gebruik maken van het toetsenbord.
Deze keuzelijst staat op meerdere pagina's, bijvoorbeeld op vng.nl/rubrieken/onderwerpen/klimaatakkoord.

De tabel op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan is niet correct opgemaakt. In de code is gebruik gemaakt van td-elementen voor de kopcellen, bijvoorbeeld de cel 'Rollen'. Hierdoor kan hulpsoftware niet aangeven dat het hier om een kopcel gaat en de connectie leggen tussen kopcellen en datacellen. Ook zijn de teksten in de kopcellen dikgedrukt gemaakt met het strong-element, waar het element niet geschikt is. Zorg ervoor dat de kopcellen in de tabel worden opgemaakt met het th-element.

Op pagina vng.nl/rubrieken is er een visuele indicatie in het hoofdnavigatiemenu wat aangeeft dat de bezoeker zich op de pagina 'Onderwerpen' bevindt. Bezoekers die het scherm niet kunnen zien krijgen deze indicatie niet mee. Zorg er daarom voor dat deze informatie ook in de code aanwezig is, bijvoorbeeld door gebruik te maken van aria-current=page.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op vng.nl/nieuws/.

Op pagina vng.nl/nieuws heeft de keuzelijst 'Onderwerpen' een tabindex van -1. Hierdoor is het voor toetsenbordgebruikers niet mogelijk om de focus te plaatsen op het select-element, in plaats daarvan wordt de focus geplaats op een visueel verborgen input-element die geen toegankelijke naam heeft (zie ok SC 4.2.1). Zorg ervoor dat het select-element te bedienen is door alle bezoekers en verwijder het visueel verborgen input-element.

Op pagina vng.nl/rubrieken/onderwerpen/klimaatakkoord staat een tijdlijn die niet te bedienen is door bezoekers die gebruikmaken van een screenreader. Zo zijn de blokken met informatie in de tijdlijn verbogen met aria-hidden=true. Ook zijn de links in deze blokken niet te bedienen met het toetsenbord doordat deze uit de focusvolgorde zijn gehaald met het attribuut tabindex=-1. Zorg ervoor dat de tijdlijn goed te bedienen is voor mensen die afhankelijk zijn van hulpsoftware. Het moet mogelijk zijn om alle interactieve elementen te bedienen met het toetsenbord, informatie in de tijdlijn mag niet verborgen zijn voor hulpsoftware en alle knoppen en links moeten een goede toegankelijke naam hebben (zie ook SC 2.1.1 en SC 4.1.2).

Wanneer de knop 'Wat verandert er met het nieuwe woonplaatsbeginsel (vanaf 1 januari 2022)?' op pagina vng.nl/artikelen/woonplaatsbeginsel-jeugdhulp is uitgeklapt is een lijst te zien. De tekst in deze lijst is cursief doordat hier het em-element op is geplaatst. Het em-element is niet geschikt om op hele zinnen of alinea's te plaatsen, het geeft namelijk aan hulpsoftware door dat hier belangrijke informatie staat. Het element mag alleen worden gebruikt op enkele woorden. Los dit probleem op door het em-element te verwijderen en de tekst op een andere manier cursief te maken, bijvoorbeeld met een CSS-stijl.

De volgende bevindingen gaan over de PDF 'Verzoek bestuurlijke reactie voorstel wetswijziging kostendelersnorm':

• Teksten op de eerste pagina zijn geplaatst in een Table-tag, bijvoorbeeld de tekst 'Datum 23 mei 2022'. Een tabelstructuur is niet noodzakelijk om deze teksten te begrijpen, het kan er juist voor zorgen dat screenreadergebruikers de teksten niet begrijpen. Daarnaast staan in deze tabel meerdere lege TH-tag wat niet mag. Verwijder daarom de Table-tag uit de codelaag en plaats de teksten in de meest geschikte tags, bijvoorbeeld P- en koptags.
• Op de eerste pagina staat een verwijzing naar een voetnoot, aangegeven met de letter i. Deze verwijzing is niet in het daarvoor bestemde tag geplaatst. Zorg ervoor dat de verwijzing in een Reference-tag komt te staan.
• In het document staan koppen, bijvoorbeeld 'Voorstander voor afschaffen kostendelersnorm'. Deze koppen zijn niet geplaatst in koptags. Zorg ervoor dat alle teksten die visueel koppen zijn ook in een koptag worden geplaatst. Houd hierbij rekening met een logisch oplopende koppenstructuur.

De volgende bevindingen gaan over de PDF 'Handreiking uitvoering ENSIA 2022':

- Op pagina 3 staat de inhoudsopgave. In de codelaag is te zien dat de kop 'Inhoud' is geplaatst in een TOCI-tag, die bestemd is voor een inhoudsopgave item. Zorg ervoor dat de kop in een koptag wordt geplaatst.

• Op pagina 8 staat in de lopende tekst een verwijzing naar de voetnoot, aangegeven met het cijfer 1. Deze verwijzing is niet in een Refrence-tag geplaatst, waardoor het voor screenreadergebruikers niet duidelijk is dat dit een verwijzing is. Los dit problemen op door de verwijzing in een Reference-tag te plaatsen.

Advies:
Op de homepage (vng.nl/) zijn meerdere koppen opgemaakt met een H1-element, bijvoorbeeld visueel verborgen koppen zoals 'Topnavigatie' maar ook de kop 'Gemeentesecretaris Frank Halsema (Stichtse Vecht) vrijgesteld van werk'. Een H1-kop is bedoeld om het hoofdonderwerp van de pagina aan te geven, geen van deze koppen doet dat. Daarnaast kan het voor bezoekers die navigeren met een koppenlijst verwarrend zijn wanneer er meerdere H1-koppen op één pagina staan. Wij raden aan om maar één H1-kop die het hoofdonderwerp omschrijft op een pagina te gebruiken. Op de homepage mag deze kop visueel verborgen zijn.
Dit probleem komt op meerdere pagina’s voor.

Advies:
Op de pagina vng.nl/ staan koppen die aflopen van de H1-kop 'Topnavigatie' (visueel verborgen) naar verschillende H2-koppen en daarna weer oplopen naar H1-koppen zoals 'Woningbouwimpuls: sigaar uit eigen doos met cofinanciering'. Een logische aflopende koppenstructuur, beginnende met een H1 voor de titel van de pagina, h2 voor koppen en h3 voor tussenkoppen (etcetera) is beter voor de toegankelijkheid van de website én voor vindbaarheid van de website in zoekmachines zoals Google. Dit komt op meerdere pagina's voor.

Uitkomst: Onvoldoende

Bevindingen: Op de pagina vng.nl/ staan verschillende blokken content bestaande uit een kop en afbeelding, bijvoorbeeld onder de kop 'Laatste nieuws'. In de code is de afbeelding boven de kop geplaatst. Wanneer een bezoeker de pagina laat voorlezen door een screenreader is het lastig te bepalen welke afbeelding bij welke kop hoort als deze achterelkaar worden voorgelezen. Zorg er daarom voor dat in de code de kop boven de bijbehorende afbeelding is geplaatst. Visueel mag de content in huidige volgorde blijven staan.
Een soortgelijk probleem komt ook voor bij de blokken content onder de kop 'Agenda'. In deze blokken staat de datum voor de bijbehorende kop in de code. Zorg ervoor dat in de code de datum onder de bijbehorende kop wordt geplaatst.
Problemen in de volgorde waarop content op de pagina is geplaatst komen ook voor op andere pagina's, bijvoorbeeld op vng.nl/nieuws en vng.nl/gemeentelijke-uitvoering

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/user/login staat een formulier waar de bezoeker onder andere het eigen e-mailadres en een wachtwoord kan invullen. Het doel van deze en een aantal andere velden moet programmatisch kunnen worden bepaald, zodat velden automatisch kunnen worden ingevuld of extra hulp kan worden geboden bij het invullen. Dit kan door het autocomplete-attribuut aan de input-elementen toe te voegen. Bijvoorbeeld voor e-mailadres autocomplete="email".
Een overzicht van de velden waarvoor het autocomplete-attribuut van toepassing is en de waarde die nodig is in dit attribuut, staat op de pagina: www.w3.org/tr/wcag21/.
Dit probleem komt ook voor bij andere formulieren waar bezoekers eigen gegevens kunnen invoeren, bijvoorbeeld op pagina vng.nl/user/register.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiemelding (zichtbaar wanneer de website voor het eerst wordt bezocht) staat de knop 'Sluiten'. Het contrast van de witte tekst in deze knop op de oranje achtergrond (HEX#ef6c00) is te laag. De contrastverhouding is hier 3:1, waar dat minimaal 4,5:1 moet zijn.
De link 'onze privacyverklaring' (HEX#1a1a1a) in deze melding heeft ook een te laag contrast doordat de tekst een contrastverhouding van 3,6:1 heeft op de blauwe achtergrond (HEX#0277bd) heeft.
Zorg ervoor dat deze teksten bij focus en hover ook voldoende contrast hebben.

Op pagina vng.nl/contact staan grijze teksten (HEX#75757C) op een lichtgrijze achtergrond (HEX#F8F9FA) die een te laag contrast hebben. De contrastverhouding is hier 4,3:1 waar dat minimaal 4,5:1 moet zijn.
Dit contrastprobleem komt op meerdere pagina's voor, bijvoorbeeld op pagina vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland en op vng.nl/brieven/verzoek-bestuurlijke-reactie-voorstel-wetswijziging-kostendelersnorm.

Op pagina vng.nl/zoeken staat bij elk zoekresultaat het resultaat type, bijvoorbeeld 'Onderwerpen'. Het contrast van deze tekst (HEX#75757C) op de achtergrond (HEX#F8F9FA) is te laag. De contrastverhouding is hier 4,3:1 waar dat minimaal 4,5:1 moet zijn.

In de infographic op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan staan teksten met een te laag contrast:

• De gele teksten (HEX#f1bc0a) op de donkerblauwe achtergrond (HEX#0287d0) hebben een contrastverhouding van 2,2:1.
• De witte teksten op de donkerblauwe achtergrond (HEX#0287d0) hebben een contrastverhouding van 3,8:1.
• De witte teksten op de lichtblauwe achtergrond (HEX#05bdfe) hebben een contrastverhouding van 2,1:1.
• De witte teksten op de blauwe achtergrond (HEX#32abf2) hebben een contrastverhouding van 2,5:1.

Zorg ervoor dat de teksten in de afbeeldingen een minimale contrastverhouding van 4,5:1 hebben.

Wanneer er een voldoende tekstueel alternatief aanwezig is, hoeven de infographics niet aan de contrastwaarden te voldoen, maar het geboden alternatief onder de infographics is momenteel niet toegankelijk.

Wanneer bezoekers de velden 'publicatiedatum van' en 'publicatiedatum tot' op pagina vng.nl/nieuws selecteren of hier de focus op plaatsen verschijnt een kalender. In deze kalender is de huidige datum aangegeven met een gele achtergrond (HEX#FFFA90). Het cijfer (HEX#777620) op deze achtergrond heeft een te laag contrast. De contrastverhouding is hier 4,4:1, waar dat minimaal 4,5:1 moet zijn.

Het contrast van de placeholdertekst 'Zoek een project' (HEX#cfcfcf) op pagina vng.nl/gemeentelijke-uitvoering heeft een te laag contrast op de witte achtergrond. De contrastverhouding is hier 1,5:1 waar dat minimaal 4,5:1 moet zijn.

Er zijn meerdere pagina en PDF's op vng.nl waar soortgelijke contrastproblemen in voorkomen. Zorg ervoor dat kleine tekst (tot 18pt) altijd een minimale contrastverhouding heeft van 4,5:1 en grote tekst (vanaf 18pt) een minimale contrastverhouding heeft van 3:1.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan zijn de verschillende stappen als afbeeldingen van tekst op de pagina geplaatst, bijvoorbeeld de tekst '1 Selecteer activiteit/thema/gebied voor omgevingsplan wijzigen'. Slechtzienden kunnen deze tekst niet aanpassen voor de leesbaarheid. De tekst op de afbeelding komt verder niet voor op de pagina als platte tekst. Plaats deze tekst daarom als HTML-tekst op de pagina.
Op andere pagina komen ook afbeeldingen van tekst voor, bijvoorbeeld op pagina vng.nl/projecten/ensia waar een afbeelding van een tabel staat en in de PDF 'Handreiking uitvoering ENSIA 2022'.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina vng.nl/ inzoomen tot 200% bij een schermbreedte van 1280px verdwijnt de knop waarmee bezoekers het automatisch afspelen van de carrousel kunnen stopzetten. Het is belangrijk dat deze functie ook in een ingezoomde weergave beschikbaar is, omdat bezoekers met bepaalde cognitieve beperkingen veel last kunnen hebben van bewegingen op het scherm. Zorg er daarom voor dat de knop op de pagina blijft staan als bezoekers inzoomen.

Uitkomst: Onvoldoende

Bevindingen: Wanneer toetsenbordgebruikers de focus plaatsen op het zoekveld dat staat op meerdere pagina's, zoals op vng.nl/, verschijnt een grijze focusrand (HEX #DEE2E6) om dit veld. Het contrast van deze rand op de witte achtergrond is te laag. De contrastverhouding is hier 1,3:1, waar dat minimaal 3:1 moet zijn.
Dit probleem komt voor bij alle invoervelden op de website, bijvoorbeeld die op pagina vng.nl/user/login en op vng.nl/rubrieken/onderwerpen/klimaatakkoord.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/user/register staan twee keuzelijsten met de labels 'Gemeente' en 'Functie'. Bezoekers die afhankelijk zijn van het toetsenbord om de website te bedienen kunnen deze velden niet invullen. Doordat één van deze velden verplicht is is het voor toetsenbordgebruikers niet mogelijk om een account op de website aan te maken. Zorg ervoor dat deze keuzelijsten te bedienen zijn met het toetsenbord (zie ook SC 1.3.1).

In de tijdlijn op pagina vng.nl/rubrieken/onderwerpen/klimaatakkoord staan verschillende links. Deze links zijn niet te bedienen met het toetsenbord doordat het niet mogelijk is om de focus hierop te plaatsen. Zorg ervoor dat bezoekers die de website bedienen met het toetsenbord deze links ook kunnen activeren (zie ook SC 1.3.1).

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op de pagina vng.nl/nieuws/video-over-levensloopbanner-een-goed-leven-in-nederland wordt gebruikgemaakt van de videospeler van YouTube. Deze videospeler maakt gebruik van bediening door enkele tekentoetsen, bijvoorbeeld f voor fullscreen. Deze functionaliteit is iets wat mensen die afhankelijk zijn van spraaksoftware in de weg kan staan. Deze mensen zijn juist afhankelijk van die korte commando's om met spraaksoftware hun computer te bedienen. Los dit op door de embedcode van de YouTube video aan te passen zodat de bediening met tekentoetsen uit staat. De eigenschap die toegevoegd moet worden aan de embedcode is 'disablekb=1'. Met deze aanpassing zorg je ervoor dat je voldoet aan dit succescriterium.
Dit probleem komt ook voor bij de YouTube videospelers op andere pagina's, bijvoorbeeld op pagina vng.nl/projecten/ensia.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/contact verwijst de skiplink bezoekers naar een punt na de de kop 'Contact' en de onderstaande tekst. Hierdoor kan het voorkomen dat screenreadergebruikers informatie op de pagina missen. Zorg ervoor dat een skiplink niet na een punt verwijst dat na informatie (zoals een kop) komt.
Dit probleem komt op elke pagina voor.

Uitkomst: Onvoldoende

Bevindingen: De PDF 'Verzoek bestuurlijke reactie voorstel wetswijziging kostendelersnorm' heeft als documenttitel 'VNG Brief'. Deze titel omschrijft het onderwerp van de brief onvoldoende. Zorg ervoor dat het onderwerp van deze brief aan de documenttitel wordt toegevoegd.

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers voor het eerst de website bezoeken zien zij een cookiemelding onderaan de pagina. Wanneer bezoekers naar beneden scrollen blijft deze melding over content staan, bijvoorbeeld over de links 'Privacyverklaring' en 'Kwetsbaarheid melden' in de footer. Ook bedekt de cookiemelding een groter deel van de pagina wanneer bezoekers de website in een ingezoomde weergave bekijken.
Toetsenbordgebruikers kunnen last hebben van het feit dat de cookiemelding content bedekt en pas als laatst op de pagina de toetsenbordfocus krijgt. Deze bezoekers moeten eerst over de hele pagina navigeren met het toetsenbord voordat zij de melding kunnen afsluiten. Ook zijn sommige elementen die de focus krijgen door de cookiemelding niet zichtbaar, waardoor toetsenbordgebruikers niet weten waar de focus op de pagina is. Zorg er daarom voor dat de cookiemelding als eerst de focus krijgt op de pagina, zo kunnen toetsenbordgebruikers de melding direct afsluiten.

In de footer op onder andere pagina vng.nl/ staan socialmedialinks met daarvoor het logo van het betreffende socialmediaplatform. In de focus volgorde krijgen niet alleen de linkteksten de focus, maar ook de socialmedialogo's. Dit is vervelend voor toetsenbordgebruikers, omdat dit extra fysieke handeling creëert terwijl beide element naar dezelfde pagina verwijzen. Ook kan dit verwarrend zijn voor screenreadergebruikers omdat de logo's geen linktekst hebben (Zie SC 2.4.4 Linkdoel). Los dit op door het logo en de linktekst samen in één a-element te plaatsen.
Een soortgelijk probleem komt ook voor op de pagina's vng.nl/gemeentelijke-uitvoering en vng.nl/nieuws, waar de focus geplaatst wordt op de afbeelding en de kop in een zoekresultaat.

Wanneer bezoekers voor het eerst op pagina vng.nl/user/login komen staat de toetsenbordfocus direct in het invoerveld 'E-mail of gebruikersnaam'. Voor screenreadergebruikers kan dit erg vervelend zijn omdat zij hierdoor niet de content dat boven het invoerveld staat krijgen voorgelezen. Zorg ervoor dat focus bovenaan begint wanneer bezoekers een nieuwe pagina bezoeken.
Dit probleem komt ook voor op pagina vng.nl/user/register wanneer fouten zijn gemaakt in het formulier en een foutmelding verschijnt na het versturen. De focus staat midden op de nieuwe pagina wanneer deze laadt. Hierdoor kunnen screenreadergebruikers de foutmelding missen.

Wanneer bezoekers iets invoeren in de invoervelden of keuzelijsten op pagina vng.nl/nieuws laadt nieuwe content op de pagina en verplaatst de focus volgorde zich naar boven de keuzelijst 'Onderwerpen'. Voor screenreadergebruikers kan het verwarrend zijn wanneer de focus verplaatst naar een ander punt op de pagina, zij zien namelijk niet dat er nieuwe content op de pagina is geladen en krijgen geen indicatie van de verandering mee (zie ook SC 4.1.3). Zorg er daarom voor dat de focus blijft staan op het veld waar de bezoeker iets in heeft geplaatst.

Op pagina vng.nl/projecten/ensia staan accordeons die wanneer uitgeklapt onder andere links tonen. Voor toetsenbordgebruikers is het mogelijk om focus te plaatsen op de links die verborgen zijn achter een ingeklapte accordeon. Het kan verwarrend zijn voor toetsenbordgebruikers wanneer de focus wordt geplaatst op visueel verborgen elementen. Zorg er daarom voor dat de toetsenbordfocus alleen op elementen kan worden geplaatst als deze zichtbaar zijn. Dit probleem komt voor bij alle accordeons met dezelfde opmaak, bijvoorbeeld op pagina vng.nl/artikelen/woonplaatsbeginsel-jeugdhulp.
Een soortgelijk probleem komt ook voor wanneer bezoekers zijn ingelogd op Mijn VNG, de focus kan dan worden geplaatst op de items in het uitklapmenu achter de knop 'Mijn VNG'.

Wanneer bezoekers inzoomen tot 175% op pagina vng.nl/ verdwijnt het hoofdnavigatiemenu achter een knop. Wanneer toetsenbordgebruikers deze knop activeren en naar de links in het verschenen menu willen navigeren, gaat de focus verder op de achterliggende pagina. Deze bezoekers moeten de toetsenbordfocus weer naar de bovenkant van de pagina navigeren voordat deze in het menu staat. Zorg ervoor dat de toetsenbordfocus direct na het activeren van de menuknop in het menu wordt geplaatst. Ook mag de focus niet verder gaan op de achterliggende pagina wanneer deze van het laatste items in het menu wordt gehaald. Zorg ervoor dat de toetsenbordfocus in het menu blijft tot de bezoeker deze afsluit, of dat het menu vanzelf sluit nadat de bezoeker ná het laatste item de tabtoets indrukt.

Wanneer bezoekers bij een schermbreedte van 1280px inzoomen op pagina vng.nl/contact tot 133% verandert de focus volgorde doordat content op de pagina verschuift. Het blok content met de kop 'Contact met de VNG' komt boven de inleidende tekst te staan. Hierdoor gaat de focus volgorde van de link 'Over de VNG' naar 'rijksoverheid' en weer naar boven naar de link 'Contact'. Het kan voor sommige toetsenbordgebruikers verwarrend zijn wanneer de toetsenbordfocus niet van boven naar beneden gaat op de pagina. Zorg er daarom voor dat de focus volgorde van boven naar beneden loopt en hierbij geen interactieve elementen overslaat.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan.

Uitkomst: Onvoldoende

Bevindingen: In de footer op onder andere pagina vng.nl/ staan social media-links met daarvoor het logo van het betreffende social media-platform. De social media-logo's zijn elk ook opgemaakt als aparte link en hebben geen linktekst. Hierdoor weten screenreadergebruikers niet waar deze links naar verwijzen. Los dit probleem op door een logo en de achterstaande tekst samen te voegen tot één link door deze elementen in één a-element te plaatsen.

Op de pagina vng.nl/ staat een carrousel met daarin drie knoppen waarmee bezoekers een andere slide kunnen tonen. Deze knoppen hebben via aria-label de toegankelijke namen '1 of 3', '2 of 3' en '3 of 3’. Voor screenreadergebruikers is het niet duidelijk dat de cijfers verwijzen naar de slides in de carrousel. Pas daarom de toegankelijke naam van deze knoppen aan, bijvoorbeeld naar 'Slide 1 van 3', ect.

Op pagina vng.nl/contact staan twee links met de linktekst 'routebeschrijving'. Beide links verwijzen naar een andere pagina. Mensen die gebruikmaken van een linklijst (bijvoorbeeld wanneer zij een screenreader gebruiken) kunnen deze twee links moeilijk van elkaar onderscheiden. Zorg ervoor links met dezelfde linktekst niet naar verschillende pagina's verwijzen. Los het probleem hier op door de linktekst van deze links aan te vullen zodat het duidelijker wordt waar naar wordt verwezen.
Op deze pagina wordt ook de linktekst 'hier' gebruikt voor meerdere links die naar verschillende pagina's verwijzen.
Op pagina vng.nl/projecten/ensia komt ook twee keer de linktekst ‘Bekijk de video op YouTube’ voor een ander doel voor.

Op pagina vng.nl/nieuws zijn de afbeeldingen bij de zoekresultaten opgemaakt als link. Naast dat dit problemen geeft met de focusvolgorde (zie SC 2.4.3) beschrijft de toegankelijke naam van deze links niet het linkdoel. Bij elke link is de toegankelijke naam de alternatieve tekst van de afbeelding. Deze omschrijft wel de afbeelding maar niet waar de link naar verwijst. Los dit probleem op door bij elke afbeelding het a-element te verwijderen.
Dit probleem komt ook voor op andere pagina's, bijvoorbeeld op vng.nl/gemeentelijke-uitvoering.

Advies:
Op de pagina vng.nl/ staan blokken content onder de kop 'Laatste nieuws'. Deze blokken zijn elk opgemaakt als link en bestaan uit een afbeelding en kop. Doordat in de code het a-element is geplaatst om de afbeelding en de kop, bestaat de toegankelijke naam van de link uit de alternatieve tekst van de afbeelding en daarna de kop. Dit kan verwarrend zijn voor screenreadergebruikers omdat het linkdoel hierdoor onduidelijk wordt. De toegankelijke naam van de link 'Nazending resolutie Zekerheid over de structurele financiën' is bijvoorbeeld 'Landschap Nazending resolutie Zekerheid over de structurele financiën'. Wij raden aan om in de code het a-element alleen op de kop te plaatsen en het klikgebied van de link te vergroten met Javascript.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/contact staan meerdere uitvouwbare knoppen (accordeons). Wanneer toetsenbordgebruikers de focus op deze knoppen plaatsen is dat niet zichtbaar. Hierdoor kan het voor ziende toetsenbordgebruikers lastig zijn om te weten waar zij zich op de pagina bevinden. Zorg er daarom voor dat de toetsenbordfocus met een visuele indicatie wordt aangeven, bijvoorbeeld door een focusrand te gebruiken.
Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op vng.nl/projecten/ensia en vng.nl/artikelen/woonplaatsbeginsel-jeugdhulp.

Op pagina vng.nl/gemeentelijke-uitvoering staan selectievakjes onder kop 'Filters'. Wanneer toetsenbordgebruikers focus plaatsen op de selectievakjes is dat niet zichtbaar. De reden hiervoor is dat de input-elementen van de selectievakjes visueel verbogen zijn en de vakjes die zichtbaar zijn op de pagina daarop zijn geplaatst met CSS. Zorg ervoor dat het zichtbaar is wanneer toetsenbordgebruikers de focus plaatsen op deze vakjes, bijvoorbeeld door het input-element niet visueel te verbergen.
Dit probleem komt ook voor bij de selectievakjes op pagina vng.nl/overzicht-praktijkvoorbeelden.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op onder andere pagina vng.nl/ staat het zoekveld met de placeholdertekst 'Waar bent u naar opzoek?'. De toegankelijke naam van dit zoekveld is 'Doorzoek VNG'. Doordat de visuele naam en de toegankelijke naam van dit veld niet overeenkomen kan het voor bezoekers die afhankelijke zijn van spraakbediening lastig zijn om dit veld in te vullen. Zorg ervoor dat het visuele label van een interactief element altijd in de toegankelijke naam staat. Los het probleem hier op door de placeholdertekst in de toegankelijke naam van het zoekveld te plaatsen, het liefst vooraan.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina vng.nl/user/register een account willen aanmaken en hierbij een e-mailadres invullen wat als is gebruikt voor een account verschijnt de foutmelding 'The email address xxx is already taken.'. Deze foutmelding is in het Engels terwijl de rest van de pagina in het Nederlands is. Ook is er geen taalwissel aangegeven op de tekst. Zorg ervoor dat hier een taalwissel wordt aangegeven in de code of vertaal deze tekst naar het Nederlands.

De hoofdcontent op pagina vng.nl/artikelen/about-the-vng is in het Engels maar de taalaanduiding van de pagina is Nederlands. Ook is geen taalwissel aangegeven op de Engelse teksten. Dit kan problemen geven wanneer bezoekers gebruikmaken van hulpsoftware. Zorg ervoor dat er op de Engelse teksten een taalwissel is aangegeven.

Wanneer bezoekers op pagina vng.nl/gemeentelijke-uitvoering met viewport 1280 bij 1024 inzoomen tot 175% verdwijnen de filters achter de knop 'Filters tonen'. Wanneer deze knop wordt geactiveerd verschijnt er een venster over het hele scherm met daarin een sluitknop met de toegankelijke naam 'Close'. Niet alle bezoekers spreken Engels, waardoor het voor gebruikers van screenreaders en spraakbediening lastig kan zijn deze knop te bedienen. Pas de toegankelijke naam van de knop daarom aan.
Dit probleem komt ook voor op pagina vng.nl/overzicht-praktijkvoorbeelden.

Advies:
Op pagina vng.nl/artikelen/about-the-vng staan afbeeldingen met een Nederlandse alternatieve tekst tussen Engelse teksten. De content op deze pagina is hoogstwaarschijnlijk bedoeld voor Engelssprekende bezoekers, zij zullen de Nederlandse alternatieve teksten op de afbeeldingen niet begrijpen. Wanneer een pagina in een andere taal is, is het belangrijk dat ook de toegankelijke namen en alternatieve teksten worden vertaald.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer bezoekers op pagina vng.nl/nieuws filteren op bijvoorbeeld datum, wordt de focus naar het invoerveld 'Onderwerpen' verplaatst. Er mogen geen contextwijzigingen plaatsvinden wanneer een bezoeker een invoerveld gebruikt. Contextwijzigingen zijn wijzigingen in focus, viewport, user agent en/of wijzigingen die de betekenis van een pagina aanpassen.

Wanneer bezoekers op pagina vng.nl/gemeentelijke-uitvoering een filter selecteren, verandert de volgorde van de filters. Dit is verwarrend voor meerdere groepen bezoekers, waaronder voor bezoekers met een cognitieve functiestoornis.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina vng.nl/user/login maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan de tekstgrootte niet aangepast worden, hierdoor kunnen sommige mensen de tekst mogelijk niet lezen. Voeg zelf foutmeldingen toe aan het formulier om dit probleem op te lossen.

Wanneer bezoekers op pagina vng.nl/user/register een verplicht veld niet vullen wanneer zij het formulier opsturen verschijnt de melding 'XX is een verplicht veld'. Dit is geen goede foutmelding omdat dit niet aangeeft welke fout de bezoeker heeft gemaakt. Zorg ervoor dat de foutmelding aangeeft dat de bezoeker het veld niet heeft ingevuld.
Meerdere foutmeldingen in dit formulier geven niet duidelijk genoeg aan welke fout is gemaakt en in welk veld. Bijvoorbeeld, wanneer het veld 'Rekenvraag' niet correct is ingevuld verschijnt de foutmelding 'Uw CAPTCHA-antwoord was niet juist.' wat het veld niet correct benoemd.

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/user/login staat bij de labels van invoervelden een ster (*). Nergens op deze pagina staat in tekst aangegeven wat de ster betekent, wat verwarrend kan zijn voor mensen met bepaalde cognitieve beperkingen. Zorg er daarom voor dat op deze pagina in tekst wordt aangegeven wat de betekenis is van de ster.
Dit probleem komt ook voor op pagina vng.nl/user/register.

Op pagina vng.nl/zoeken staat de keuzelijst met de kozen optie 'Relevantie'. Dit veld heeft geen visueel label aangezien 'Relevantie' een optie is en niet zegt wat bezoekers in het veld kunnen selecteren. Hierdoor kan het voor bijvoorbeeld bezoekers met bepaalde cognitieve beperkingen lastig zijn er achter te komen waar deze keuzelijst voor is. Zorg er daarom voor dat de keuzelijst een visueel label krijgt (wat niet verdwijnt bij invoer). Dit geldt ook voor de keuzelijst 'Resultaat type'.

Op pagina vng.nl/nieuws kunnen bezoekers filteren op onder andere publicatiedatum. De zichtbare labels van de invoervelden zijn placeholders en verdwijnen wanneer bezoekers beginnen met typen. Zorg ervoor dat labels en instructies altijd zichtbaar blijven, bijvoorbeeld door het label boven het invoerveld te plaatsen zodra de bezoeker begint met typen.

Uitkomst: Onvoldoende

Bevindingen: Het formulier op pagina vng.nl/user/login maakt alleen gebruik van HTML5-veldcontroles. Deze foutmeldingen en foutsuggesties worden niet door alle browsers en hulpsoftware even goed ondersteund. De melding is soms kortaf, onvolledig of blijft te kort staan. Ook kan de tekstgrootte niet aangepast worden, hierdoor kunnen sommige mensen de tekst mogelijk niet lezen. Voeg zelf foutsuggesties toe aan het formulier om dit probleem op te lossen.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/contact staat een dl-element waarin meerdere dt-elementen met het attribuut role=heading in staan. Door dit attribuut op een dt-element te plaatsen wordt het element door hulpsoftware en browsers beschouwd als een kop, wat problemen kan gegeven wanneer deze programma's de paginabron interpreteren. Alleen een dt-, dd- of div-element mag direct afstammen van een dl-element.

Op pagina vng.nl/artikelen/vng-stappenplan-omgevingsplan zijn op verschillende elementen meerdere lang-attributen geplaatsen. Dit kan problemen opleveren wanneer bezoekers gebruikmaken van hulpsoftware. Zorg ervoor dat de overbodige attributen worden verwijderd.

Advies: Op pagina vng.nl/rubrieken/onderwerpen/klimaatakkoord is een iframe in een iframe genest. Dit zorgt mogelijk voor toegankelijkheidsproblemen voor bezoekers die gebruik maken van het toetsenbord. Daarnaast hebben beide iframes dezelfde toegankelijke naam. Indien die beiden worden voorgelezen, is dat ook verwarrend.

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/contact staan meerdere uitvouwbare knoppen (accordeons). In de code staat het button-element van deze knoppen in een dt-element waarop het attribuut role=heading is geplaatst. Dit kan ervoor zorgen dat de knoppen niet met de juiste rol worden aangegeven door hulpsoftware en geeft parsenfouten (zie SC 4.1.1 Parsen). Ook is dit attribuut overbodig aangezien het tekstuele label van de knop binnen een h2-element is geplaatst. Los dit op door het attribuut role=heading te verwijderen.

Op pagina vng.nl/user/register staan twee keuzelijsten. Wanneer bezoekers op deze velden klikken verschijnt een venster met daarin onder andere een zoekveld. Deze zoekvelden hebben geen toegankelijke naam. Hierdoor is het voor gebruikers van spraakbediening en voorleessoftware lastig deze velden in te vullen. Zorg er daarom voor dat deze velden een (unieke) toegankelijke naam krijgen, bijvoorbeeld door gebruik te maken van aria-label.
Op andere pagina's staan ook keuzelijsten zonder toegankelijke naam, bijvoorbeeld op pagina vng.nl/nieuws en vng.nl/rubrieken/onderwerpen/klimaatakkoord.

Op pagina vng.nl/gemeentelijke-uitvoering staat het zoekveld 'Zoek een project' met daarin een knop dat wordt aangegeven met een vergrootglasicoon. Deze knop heeft geen toegankelijk naam. Hierdoor is het voor bezoekers die afhankelijk zijn van een screenreader of spraakbediening lastig om deze knop te bedienen. Geef deze knop een goede toegankelijke naam, bijvoorbeeld door gebruik te maken van aria-label.
Een zelfde soort zoekveld staat ook op pagina vng.nl/overzicht-praktijkvoorbeelden.

Op pagina vng.nl/projecten/ensia staan twee video's die met een iframe-element op de pagina zijn geplaatst. Deze elementen hebben geen toegankelijke naam. Zorg ervoor dat de iframe-elementen een toegankelijke naam krijgen door gebruik te maken van het title-attribuut.

Twee afbeeldingen op pagina vng.nl/projecten/ensia zijn opgemaakt als link maar hebben geen toegankelijke naam. Zorg ervoor dat deze links een goede toegankelijke naam krijgen, bijvoorbeeld door de afbeeldingen een alternatieve tekst te geven (zie ook SC 1.1.1).

In de tijdlijn op pagina vng.nl/rubrieken/onderwerpen/klimaatakkoord staan twee knoppen waarmee bezoekers door de tijdlijn kunnen scrollen. Deze knoppen hebben geen toegankelijke naam, waardoor het voor bezoekers die bijvoorbeeld afhankelijk zijn van spraakbediening lastig kan zijn deze knoppen te activeren (zie ook SC 1.3.1). Geef deze knoppen een toegankelijke naam door gebruik te maken van aria-label of een soort gelijke techniek.

Uitkomst: Onvoldoende

Bevindingen: Op pagina vng.nl/zoeken kunnen bezoekers via de links onder de resultaten navigeren naar de volgende pagina met zoekresultaten. Deze links laden geen nieuwe pagina maar zorgen ervoor dat nieuwe resultaten op de huidige pagina worden getoond, hierbij verandert de tekst 'Zoekresultaten (1 - 12 van de 13024)'. Bezoekers die het scherm niet kunnen zien en afhankelijk zijn van een screenreader weten niet dat deze verandering op het scherm plaatsvindt. De tekst wordt niet voorgelezen door een screenreader. Wel wordt de toetsenbordfocus geplaatst boven de zoekresultaten, maar met zowel de tabtoets als de pijltjestoetsen leest de screenreader de veranderde tekst niet voor. Zorg ervoor dat de screenreader de aangepast tekst voorleest door bijvoorbeeld gebruik te maken van aria-alert, of zorg ervoor dat de resultaten op een nieuwe pagina worden getoond.
Een soortgelijk probleem komt ook voor op pagina vng.nl/gemeentelijke-uitvoering, waar de kop ‘Gemeentelijke Uitvoering (71)’ verandert na het selecteren van een filter.

Wanneer bezoekers iets invoeren in de invoervelden of keuzelijsten op pagina vng.nl/nieuws verschijnt een laadicoon op de pagina. Dit icoon geeft aan bezoekers door dat nieuwe content op de pagina wordt geladen. Screenreaders merken die icoon niet op en blijven stil wanneer het verschijnt. Dit kan vervelend zijn voor screenreadergebruikers. Zij weten niet dat er nieuwe content op de pagina wordt geladen als het icoon niet wordt voorgelezen. Zorg er daarom voor dat het icoon wordt opgemerkt door screenreaders, bijvoorbeeld door gebruik te maken van aria-alert.
Dit laadt icoon verschijnt ook op andere pagina’s wanneer een filter wordt geselecteerd of een link naar meer resultaten wordt geactiveerd, kijk bijvoorbeeld naar de pagina vng.nl/overzicht-praktijkvoorbeelden.