Rapport:
Audit digitale toegankelijkheid website Veilig Verkeer Nederland

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner bovenaan staat in het logo van de website de volledige tekst “Veiligverkeer”, maar de alt-tekst is enkel “logo”. De alt-tekst bevat dus niet alle zichtbare tekst uit het logo. Dit moet worden aangepast, zodat ook bezoekers die de afbeelding niet kunnen zien precies weten wat er staat. Pas de alt-tekst aan naar: “Veiligverkeer”.

In de header verschijnt een menuknop als de website wordt bekeken op een klein scherm. Als het menu is geopend, verschijnt op deze knop een icoon van een kruisje om aan te geven dat dit een sluitknop is. Dit icoon heeft geen tekstalternatief. Dit geldt ook voor het icoon op de sluitknop van de zoekbalk. Verzorg een tekstalternatief.

In de footer voldoen de tekstalternatieven van sommige logo’s onder het kopje “Onze partners” niet. Het logo met de zichtbare tekst “Carprof Garage woor alle merken” heeft als tekstalternatief “Logo Carprof”. Ook hier ontbreekt de volledige zichtbare tekst in het alternatief. Dit moet aangepast worden naar: “Carprof Garage woor alle merken”, zodat de inhoud van het logo volledig beschikbaar is voor mensen die de afbeelding niet kunnen waarnemen. Het logo van Trafieq heeft als tekstalternatief “Trafieq-logo-met-ondertitel-en-kleurverloop.jpg”. In alt-teksten mogen geen symbolen zoals streepjes of underscores gebruikt worden, omdat die de leesbaarheid voor hulpsoftware verstoren. Deze alt-tekst moet herschreven worden in duidelijke, leesbare taal zonder technische aanduidingen of bestandsnamen. Het logo van ANBI heeft momenteel helemaal geen tekstalternatief en is bovendien verborgen voor hulpsoftware met aria-hidden="true". Hierdoor is het logo ontoegankelijk voor mensen die gebruikmaken van schermlezers. Dit moet worden aangepast door een beschrijvende alt-tekst toe te voegen en het aria-hidden-attribuut te verwijderen.

Boven de footer staat een tekening die toegevoegd is als een svg-afbeelding. Deze afbeelding is zichtbaar voor een schermlezer. Dit kan worden verborgen door aria-hidden toe te voegen aan de svg.

Op pagina https://vvn.nl/nieuws/amstel-zet-very-important-bob-in-de-schijnwerpers-tijdens-27e-editie-van-de-vrienden-van-amstel-live staat onder het kopje “Amstel zet 'Very Important Bob'...” een afbeelding met als tekstalternatief “VIP”. Als deze afbeelding bedoeld is als decoratie, dan moet het tekstalternatief leeg zijn. Is de afbeelding informatief, dan moet het alternatief beschrijven wat erop te zien is, zodat de boodschap ook zonder beeld begrijpelijk blijft.

Op pagina https://vvn.nl/zelf-iets-doen/help-anderen/buurt/maak-een-melding bevat een decoratieve afbeelding de volgende alt-tekst “Veilig Verkeer Nederland meedoen is makkelijk tips.jpg”. Dit is een bestandsnaam. Laat het alt-attribuut leeg om deze afbeelding voor hulpsoftware te verbergen of voeg een beschrijving toe waardoor duidelijk is wat erop te zien is.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test. Wanneer een foute antwoord is gegeven verschijnen iconen naast Ja en Nee. Deze iconen hebben geen tekstalternatief. Hulpsoftware krijgt geen informatie over het juiste antwoord. Verzorg een tekstalternatief.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets, onder de kop “Opfrisquiz fietsen”, staan informatieve afbeeldingen met als alternatieve tekst “null”. Deze aanduiding is onvoldoende om de inhoud van de afbeelding te beschrijven en biedt geen unieke of betekenisvolle informatie voor bezoekers die de afbeelding niet kunnen zien. Afbeeldingen die informatie overbrengen, moeten altijd voorzien zijn van een alternatieve tekst die de belangrijke visuele inhoud beschrijft. Daarbij is het belangrijk dat de tekst inhoudelijk is en recht doet aan wat op de afbeelding te zien is. Om herhaling te voorkomen, mag deze alternatieve tekst niet identiek zijn aan reeds aanwezige tekst op de pagina, zoals een onderschrift. Zo blijft de informatie voor alle bezoekers, ook die met een visuele beperking, volledig toegankelijk. Sommige vragen hebben een knop met de tekst “Antwoord nakijken” en een icoon van een vinkje. Dit icoon heeft een tekstalternatief “check”. Verwijder deze tekst uit het alt-attribuut.

Het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf bevat een logo op pagina 1 en 2 zonder een tekstalternatief (alt-tekst). Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alt-tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen. Voeg alt-teksten toe aan deze informatieve afbeeldingen.

In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf, zijn op alle pagina’s decoratieve afbeeldingen aanwezig, ten onrechte getagd als figure. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig. Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: De pagina https://vvn.nl/gemeenten/50-plussers bevat een video met een voice-over. Er zijn bijschriften aanwezig, maar deze worden automatisch gegenereerd en zijn daarom onnauwkeurig, zie bijvoorbeeld op 0:21. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner oп het tabblad "Toestemming" wordt het <strong> element misbruikt voor stylingdoeleinden. De labels "Noodzakelijk", "Voorkeuren", "Statistieken" en "Marketing" zijn opgenomen in een strong-element, waarschijnlijk om ze vet te maken. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst). Gebruik hiervoor CSS. Het gebruik van het strong-element voor opmaak komt ook op pagina https://vvn.nl/contact voor in de gegevenstabel onder “Adressen”. Verwijder het strong-element.

Op pagina https://vvn.nl/nieuws/amstel-zet-very-important-bob-in-de-schijnwerpers-tijdens-27e-editie-van-de-vrienden-van-amstel-live wordt onder het kopje "Mooi initiatief" het <em>-element misbruikt voor stylingdoeleinden. Ook op pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen wordt boven de kop "Meer lezen" het <em>-element verkeerd gebruikt voor stylingdoeleinden. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst). Gebruik hiervoor CSS. Hetzelfde probleem wordt waargenomen op pagina https://vvn.nl/help-mee/acties/opfrischallenge onder het kopje "Dit kun je doen". De combinatie van strong en em is ook niet toegestaan. Zie pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen boven de kop “Meer lezen”.

Op de pagina https://vvn.nl/ staat onder het kopje “Iedereen veilig” een combinatie van het heading-element en het strong-element. Het gebruik van het strong-element binnen een kop is overbodig en moet worden verwijderd. Hetzelfde probleem doet zich voor op de pagina https://vvn.nl/blijf-veilig-onderweg in de koppen “Blijf veilig onderweg” en “Test je kennis en fris het op!”. Ook hier is het strong-element onnodig binnen het heading-element. Op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode komt dit voor in de kop “VVN Verkeersmethode”, en op https://vvn.nl/leer-meer/op-school in de kop “Op school”. Het is aan te raden om ook andere pagina’s te controleren op het voorkomen van dit issue.

Op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode staan twee koppen van niveau 3 die geen kopteksten zijn, omdat er geen inhoud onder staat: “VVN Verkeersexamen” en “Verkeer in de praktijk”. Verwijder de h3-elementen. Zie ook pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen.
In het mobiele menu zijn links gegroepeerd onder teksten “Als leerkracht”, “Als ouder” en meer. Deze teksten fungeren als koppen en geven de hiërarchie van de inhoud aan. Deze relatie wordt echter niet weergegeven in de HTML-structuur. Daardoor interpreteren schermlezers de koppen en de links eronder als teksten op hetzelfde niveau. Gebruik heading-elementen in deze teksten.

Op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode onder "VVN Minecraft Verkeerseducatie" is een blok tekst met twee alinea's ten onrechte gemarkeerd als een enkel <p>-element. Visueel lijkt deze tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan. Zorg dat elke alinea in een eigen p-element is geplaatst. Het aantal alinea’s dat visueel te zien is, moet dus gelijk zijn aan het aantal p-elementen in de code.

Op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode/groep-1-3 staat onder het kopje "Structuur van de lessen" een gegevenstabel. De juiste opmaak ontbreekt. Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen. Zet hiervoor de koppen in th-elementen en de gegevens in td-elementen.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een groep selectievakjes, voorafgegaan door de tekst "Vraag 1". Hoewel de groep visueel is gegroepeerd, is deze relatie niet programmatisch gedefinieerd in de HTML. De relatie tussen de vraag en de antwoorden ontbreekt in de HTML. Dit kan worden opgelost door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kan het legend-element worden gebruikt. Plaats hierin de vraag.

In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf staan verschillende koppen die niet als koppen zijn gemarkeerd. Zie bijvoorbeeld "Trends & Ontwikkelingen", "Helmgebruik op de fiets", "Feiten & Cijfers over de fietshelm" en "Oplossingen & Tips". Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags. Vervang de P-tag door de H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf staat op pagina 2 onder het kopje "Voor jezelf" een gegevenstabel. De juiste opmaak ontbreekt. Zie ook een gegevenstabel onder het kopje "Voor je (klein)soort". Bij een datatabel moeten speciale tags toegevoegd worden voor de tabelkoppen. Dan begrijpen schermlezers de relatie tussen de kop en onderliggende datacellen. Markeer de cellen in de koprij van de tabel met `TH`-tags en de datacellen met `TD`-tags.

In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf bevat pagina 1 voetnoten die de benodigde referentie- en/of note-tags missen. Omdat deze tags ontbreken kan voorleessoftware niet goed herkennen welke voetnoot bij welke verwijzing in de tekst hoort. Dit kan verwarrend zijn voor iemand die afhankelijk is van schermlezers, omdat de voetnoten dan als losse tekst worden voorgelezen zonder duidelijke koppeling aan de juiste plek in de hoofdtekst.

Het PDF-document op https://vvn.nl/files/media/files/Jaarplanner%2024-25%20VVN%20Verkeersmethode_3.pdf bevat geen structuurcodes, waardoor de inhoud niet toegankelijk is voor schermlezers. Bovendien kunnen wij de PDF hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de PDF-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als dit wordt opgelost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een formulier. Als de bezoeker alle stappen van het formulier heeft doorlopen, zijn er resultaten waarbij in het invoerveld voor persoonlijke gegevens (bijvoorbeeld postcode) het attribuut voor automatisch aanvullen ontbreekt. Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen. Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres moet bijvoorbeeld autocomplete="email" worden gebruikt. Op deze pagina staat meer informatie over autocomplete en welke waardes verplicht gebruikt moeten worden: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/ heeft de linktekst “Bekijk ons aanbod” onvoldoende contrastratio wanneer de muisaanwijzer over de oranje achtergrond (HEX #F66905) wordt bewogen. De witte tekst heeft in die situatie een contrastratio van 3,1:1, wat lager is dan de vereiste 4,5:1 voor normale tekst. Omdat het contrast onder deze drempel ligt, kan de tekst ontoegankelijk zijn voor bezoekers met visuele beperkingen. Het is daarom belangrijk dat ook bij hover een contrastratio van minimaal 4,5:1 wordt gegarandeerd. Hetzelfde probleem komt voor op de pagina https://vvn.nl/blijf-veilig-onderweg bij de link “Bekijk alle manieren om je kennis op te frissen”, op de pagina https://vvn.nl/leer-meer/op-school/verkeersmethode bij de link “Bestel nu”, en op de pagina https://vvn.nl/leer-meer/op-school bij de link “Naar je verkeerslessen”. Zorg ervoor dat in al deze gevallen het kleurcontrast van de tekst ten opzichte van de achtergrond voldoet aan de minimale toegankelijkheidsnormen, ook bij interactieve toestanden zoals hover.

Op pagina https://vvn.nl/ hebben meerdere links onvoldoende kleurcontrast wanneer er met de muis overheen wordt bewogen. Het gaat om witte tekst tegen een blauwe achtergrond (HEX #00A1BF). De contrastratio in deze situatie bedraagt 3,1:1, wat lager is dan de vereiste minimumwaarde van 4,5:1 voor normale tekst. Hierdoor kunnen deze links lastig leesbaar zijn voor bezoekers met visuele beperkingen. Een voorbeeld is de link “Bekijk al het nieuws”. Hetzelfde probleem doet zich voor op de pagina https://vvn.nl/blijf-veilig-onderweg bij de link “Bekijk alle acties”, op de pagina https://vvn.nl/leer-meer/op-school bij de link “Oefenen voor het VVN Verkeersexamen”, op de pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen bij de links “Naar de quiz”, “Naar de cursus” en “Meer informatie”.

In de footer van https://vvn.nl/ staat een formulier met de knop "Versturen". De witte tekst staat op een oranje achtergrond. Wanneer de muisaanwijzer over de oranje (HEX #F66905) achtergrond wordt bewogen, wordt een contrastratio van 3,1:1. Dit is lager dan het vereiste minimum van 4,5:1 voor standaardtekst.

Op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode hebben de links onder de kop “Verkeerslessen bekijken” onvoldoende kleurcontrast wanneer de muisaanwijzer over de links wordt bewogen. De oranje tekst (HEX #D14800) op de blauwe achtergrond (HEX #E5F4F9) heeft in die situatie een contrastverhouding van 4,1:1. Dit is lager dan de vereiste minimumwaarde van 4,5:1 voor normale tekst, waardoor de leesbaarheid beperkt kan zijn voor mensen met een visuele beperking.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test. Wanneer een foute antwoord is gegeven wordt de tekst van de foute antwoord grijs (HEX#979797). Deze tekst staat op een lichtgrijze achtergrond en heeft een contrastratio van 2,7:1. Dit moet minimaal 4,5:1 zijn.
Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een witte tekst "Opfrisquiz fiets" op een oranje (HEX #FD6A27) achtergrond. De contrastratio is te laag: 2,9:1. Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een witte tekst "Ronde 1 van 3" op een oranje (HEX #FD6A27) achtergrond. De contrastratio is te laag: 2,9:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn. Hetzelfde probleem wordt waargenomen op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets in het formulier nadat alle stappen zijn voltooid, staat de tekst "Eindscore:".

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test met vragen. Als de bezoeker de vraag beantwoordt, verandert het juiste antwoord in groene (HEX #3E8A41) tekst op een lichtgrijze (HEX #F5F5F5) achtergrond. De contrastratio is te laag: 3,9:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test met vragen. Als de bezoeker de vraag fout beantwoordt, verandert het goede antwoord in grijze (HEX #979797) tekst op een lichtgrijze (HEX #F5F5F5) achtergrond. De contrastratio is te laag: 2,7:1. Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf staan oranje teksten (HEX #EF7D00) op een witte achtergrond op de pagina's 1 en 2. De contrastratio is te laag: 2,8:1. Zorg dat het contrast minimaal 3,0:1 is.
In het PDF-document op https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf staan oranje links (HEX #E67800) op een grijze (HEX #F1F1F1) achtergrond op pagina 2. De kleurcontrastverhouding is te laag: 2,6:1.Zorg dat het contrast minimaal 4,5:1 is.

In het PDF-document op https://vvn.nl/files/media/files/Jaarplanner%2024-25%20VVN%20Verkeersmethode_3.pdf staan teksten met een laag contrast in combinatie met de kleuren groen (HEX #038D36) en wit. Bijvoorbeeld witte teksten op een groene (HEX #038D36) achtergrond op pagina 1,2, en 4. De kleurcontrastverhouding is te laag: 4,3:1.vZorg dat het contrast minimaal 4,5:1 is. Groene (HEX #038D36) teksten staan op een lichtgroene (HEX #F0F5EE) achtergrond op pagina 5 en 7. De kleurcontrastverhouding is te laag: 3,9:1. Zorg dat het contrast minimaal 4,5:1 is. Er zijn veel meer voorbeelden van onvoldoende contrast die niet zijn beschreven.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Wanneer de pagina https://vvn.nl/gemeenten/50-plussers wordt bekeken op een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de tekst “Verkeerseducatieprojecten” gedeeltelijk buiten beeld. Bij deze mate van zoom moet alle inhoud nog steeds goed functioneren en volledig leesbaar blijven. Zorg ervoor dat de opmaak zich correct aanpast, zodat de tekst zichtbaar blijft bij een vergroting tot 400% op een scherm met deze resolutie. Hetzelfde probleem doet zich voor op de pagina https://vvn.nl/zelf-iets-doen/help-anderen/buurt/maak-een-melding, in het formulier onder de tekst “Waar gaat de melding over?”, bij de optie “Onduidelijke/onoverzichtelijke verkeerssituatie”. Ook hier raakt de tekst deels buiten beeld bij inzoomen. Dit belemmert de toegankelijkheid voor gebruikers die gebruikmaken van vergroting, en dient te worden opgelost.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test. Als de bezoeker alle stappen van de test heeft doorlopen, worden resultaten en een formulier met invoervelden onder de "Postcode en leeftijdsgroep" getoond. De contrastverhouding tussen de lichtgrijze (HEX #C3C3C3) rand en de witte achtergrond van de pagina is 1,8:1. De randen van interactieve elementen zoals invoervelden moeten minimaal een contrast van 3,0:1 hebben met de achtergrond.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/ lopen links in de hoofdnavigatie over elkaar heen en worden ze onleesbaar als de tekst volgens dit succescriterium wordt herschaald. Het gaat om een submenu onder “Blijf veilig onderweg”. De links “Scootmobielbestuurder” en “Vitaal blijven” zijn moeilijk leesbaar.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets, onder "Opfrisquiz fiets" staat een test met keuzevakjes waarmee het antwoord kan worden gegeven. Deze keuzevakjes zijn niet met het toetsenbord te selecteren. Dit gebeurt in alle vragen. Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test. In sommige vragen moet de bezoeker cijfers op de afbeeldingen typen. Deze functionaliteit is niet toetsenbord toegankelijk.

Op alle pagina’s van de steekproef staat een “Lees voor”-widget. Deze widget heeft diverse toegankelijkheidsproblemen, waaronder, maar niet beperkt tot, het volgende:
Wanneer de optie “Pagina maskeren” in het ReadSpeaker-menu wordt geselecteerd, verschijnt er een overlay met een leesmasker. Dit element kan echter niet met het toetsenbord worden bediend. Het is essentieel dat mensen die zonder muis navigeren en alleen op het toetsenbord vertrouwen, met alle elementen kunnen interageren. De functionaliteit van de overlay, inclusief de knoppen, moet volledig toegankelijk zijn via het toetsenbord. Zie: https://vvn.nl/contact.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Pagina https://vvn.nl/blijf-veilig-onderweg bevat een Youtube-videospeler die sneltoetsen met één letter gebruikt. De Youtube-speler gebruikt sneltoetsen, zoals de 'k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig. Dit kan opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee worden de sneltoetsen uitgeschakeld, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).
Hetzelfde probleem wordt waargenomen in video’s
op pagina https://vvn.nl/leer-meer/op-school/verkeersmethode,
op pagina https://vvn.nl/gemeenten/50-plussers.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/ wordt in het formulier onder de kop "Schrijf je in voor de nieuwsbrief" alleen HTML5-validatie gebruikt in het invoerveld "E-mail". Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding blijft te kort staan. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Het PDF-document https://vvn.nl/files/media/files/VVN%20Factsheet%20Fietshelm_0.pdf heeft geen titel ingesteld in de bestandseigenschappen. Zelfs als er een titel op de eerste pagina staat, moet ook in de PDF-instellingen een documenttitel ingesteld worden. Als een PDF geopend wordt in een PDF-lezer (zoals Adobe Acrobat of een browser), staat de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als een documenttitel in de PDF-metadata is ingesteld, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is. Dit kan aangepast worden in de bestandseigenschappen van het bronbestand of van het PDF-document. Hetzelfde probleem wordt waargenomen met het PDF-document https://vvn.nl/files/media/files/Jaarplanner%2024-25%20VVN%20Verkeersmethode_3.pdf.

Uitkomst: Onvoldoende

Bevindingen: De cookiebanner bevat de tabbladen "Toestemming", "Details" en "Over". Wanneer een bezoeker het tabblad "Details" activeert, gaat de toetsenbordfocus eerst door de tabbladen "Over" of "Toestemming" voordat de inhoud van "Details" wordt bereikt. Dit is niet hoe het zou moeten werken. De toetsenbordbediening voor tabbladen moet als volgt werken: met de Tab-toets kan de bezoeker de focus op de actieve tab plaatsen. Daarna kan hij met de pijltjestoetsen wisselen tussen de tabs. Als hij een andere tab activeert en daarna op de Tab-toets drukt, moet de toetsenbordfocus naar de inhoud van het bijbehorende tabblad gaan.

Op alle pagina’s van de steekproef is een widget “Lees voor” aanwezig. Deze widget vertoont een aantal toegankelijkheidsproblemen. Eén daarvan doet zich voor in het webReader-menu, waar de knop “Instellingen” een popupvenster opent. In dit venster bevindt zich een navigatiemenu aan de zijkant met vier tabbladen: “Markeren”, “Overige instellingen”, “Sneltoetsen” en “Standaardwaarden herstellen”. Wanneer een gebruiker een van deze tabbladen selecteert, zou de focus automatisch moeten verschuiven naar de inhoud van dat tabblad. Op dit moment gebeurt dat niet. In plaats daarvan beweegt de focus eerst langs de andere tabbladen voordat deze uiteindelijk op de inhoud van het geselecteerde tabblad terechtkomt. Dit zorgt voor verwarring en belemmert een soepele interactie voor gebruikers die met een toetsenbord of schermlezer navigeren.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen staat boven "Meer lezen" een link als een punt als enige inhoud van de link. Deze link heeft daarom geen duidelijk linkdoel. Corrigeer deze link.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s opent de zoekknop een dialoogvenster. In dit venster bevindt zich een knop met een pictogram in de vorm van een “x”, die bedoeld is om het dialoogvenster te sluiten. De toegankelijke naam van deze knop is echter “Zoekbalk”, wat niet juist weergeeft wat de knop daadwerkelijk doet. Voor blinde of slechtziende bezoekers is het hierdoor onduidelijk dat deze knop dient om het venster te sluiten. De naamgeving moet daarom worden aangepast, zodat deze duidelijk de functie van de knop beschrijft, bijvoorbeeld door de tekst “Sluit zoekvenster” toe te voegen.
Hetzelfde probleem doet zich voor op alle pagina’s wanneer de site wordt bekeken op een klein scherm. In dat geval opent een menuknop het mobiele navigatiemenu. Ook in dit menu verschijnt een pictogram in de vorm van een “x”, bedoeld om het menu te sluiten. Deze knop heeft echter de toegankelijke naam “Menu”, wat verwarrend is. Voor schermlezers lijkt het daardoor alsof de knop het menu opent in plaats van sluit. Ook hier is het belangrijk om een duidelijke en passende toegankelijke naam toe te voegen, zoals “Sluit menu”.

Op pagina https://vvn.nl/leer-meer/op-school beschrijven sommige koppen, zoals “Direct naar”, de inhoud die erop volgt niet op een duidelijke manier. Teksten als “Snel naar”, “Direct naar” of “Ga naar” zijn erg algemeen en voegen weinig toe. Het is vanzelfsprekend dat links doorverwijzen naar andere pagina’s; dat hoeft niet extra benoemd te worden in een kop. Zulke algemene koppen bieden dus geen meerwaarde en geven bezoekers, vooral degenen die schermlezers gebruiken, weinig context. Bezoekers die afhankelijk zijn van schermlezers gebruiken vaak de koppenstructuur om snel een overzicht van de pagina te krijgen. Wanneer koppen geen betekenisvolle beschrijving geven van de inhoud die volgt, wordt het moeilijker om te navigeren en relevante informatie te vinden. Het is daarom belangrijk om specifieke koppen te gebruiken die direct aangeven wat voor soort informatie of functie erna komt. Denk bijvoorbeeld aan een kop als “Populaire pagina’s” of “Belangrijke onderwerpen”, waarmee meteen duidelijk is wat men kan verwachten.

Op pagina https://vvn.nl/nieuws staat onder “Selecteer provincie” een select-element met zichtbare tekst “Landelijk”. De toegankelijke name is “Facet Province » ID”. Wanneer een provincie is geselecteerd, verschijnt nog een select-element om een gemeente te selecteren. Dit tweede select-element heeft dezelfde toegankelijke naam. Deze naam beschrijft de functie van het element niet.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de header staat een icoon van een vergrootglas dat een zoekbalk opent. Boven het invoerveld staat tekst “Waar ben je naar op zoek?”. Deze tekst komt niet voor in de toegankelijke naam van het invoerveld die momenteel “Zoeken” is. De toegankelijke naam van het invoerveld is dus niet hetzelfde als de zichtbare tekst in het logo. Daardoor werkt dit element niet als deze met een stemgestuurd systeem wordt geactiveerd. Daarvoor spreekt de bezoeker de tekst uit die zichtbaar is op en naast het element. Als de toegankelijke naam anders is, zal het systeem de link niet herkennen. Zorg daarom dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan.

De pagina https://vvn.nl/nieuws bevat een select-element waarvan het label boven het invoerveld "Selecteer provincie" is, maar de toegankelijke naam is "Facet provincie " ID". De zichtbare tekst van een interactief element mag niet te veel afwijken van de toegankelijke naam van het element. Als de zichtbare tekst niet voorkomt in de toegankelijke naam, kan het element niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de zichtbare tekst voor te lezen, zullen het element dan niet activeren. Zorg dus dat de zichtbare tekst deel uitmaakt van de toegankelijke naam, bij voorkeur vooraan geplaatst.

Op alle pagina's van de steekproef staat een "Lees meer"-widget. Deze widget heeft een aantal toegankelijkheidsproblemen. In het webReader-menu staat een knop "Instellingen" die een pop-upvenster opent. Op het tabblad "Sneltoetsen", onder het label "Sneltoetsen", staan knoppen om sneltoetsen toe te wijzen. De toegankelijke namen voor deze knoppen worden gedefinieerd met het attribuut aria-label. Onder het kopje "Voorleesknop en speler" staat bijvoorbeeld een knop met sleuteliconen als vooringestelde tekst en een zichtbaar label met de tekst "Afspelen". Het aria-label voor deze knop luidt: "Toegewezen toetsencombinatie voor 'Afspelen'. Klik om deze sneltoets te wijzigen." Om de effectiviteit van stemactivering te verbeteren, moet de zichtbare tekst worden opgenomen in de toegankelijke naam, idealiter aan het begin.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: In de cookiebanner heeft het logo de alternatieve tekst "Cookiebot- opent in een nieuw venster". Deze tekst is in het Engels terwijl de rest van de pagina in het Nederlands is. Geef dit logo een taalattribuut of verander de tekst in Nederlands.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/nieuws zorgt een select-element onder de tekst "Selecteer provincie" ervoor dat de pagina opnieuw wordt geladen als een optie wordt geselecteerd. De focus begint bovenaan de pagina. Dit mag niet zomaar gebeuren. Bezoekers moeten van tevoren gewaarschuwd worden dat de pagina opnieuw zal laden als zij een andere optie selecteren. Een andere oplossing is om een knop toe te voegen waarmee de bezoeker zijn keuze kan bevestigen.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina's wordt in een formulier onder het kopje "Schrijf je in voor de nieuwsbrief" gebruikgemaakt van HTML5-validatie, waarbij standaard HTML5-foutmeldingen worden weergegeven wanneer het formulier wordt ingediend met lege of onjuiste gegevens. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Voeg daarom altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben. Zie https://vvn.nl/.

Op pagina https://vvn.nl/zelf-iets-doen/help-anderen/buurt/maak-een-melding wordt een foutmelding "Waar gaat de melding over? is een verplicht veld." getoond. Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op alle pagina’s opent de zoekknop bovenaan de website een dialoogvenster met een zoekveld. Dit venster beschikt echter niet over een geschikte ARIA-rol en heeft ook geen toegankelijke naam. Hierdoor kunnen schermlezers niet herkennen dat het om een dialoogvenster gaat en wordt de inhoud ervan niet duidelijk overgebracht aan gebruikers met een visuele beperking. Dit probleem kan worden opgelost door twee attributen toe te voegen aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud en het attribuut role="dialog". Daarmee wordt het venster correct aangekondigd door hulpsoftware. Een voorbeeld van dit probleem is te vinden op de pagina https://vvn.nl/. Hetzelfde geldt voor de pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets, bij de afbeelding onder de tekst “Ronde 1 van 3”, waar eveneens ontbrekende of onjuiste toegankelijke kenmerken worden gebruikt. Zie ook alle video’s die in een dialoogvenster opnenen.

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets, onder "Opfrisquiz fiets" staat een test met keuzevakjes waarmee het antwoord kan worden gegeven. Deze keuzevakjes missen de interactieve rol. Een bezoeker met een schermlezer kan deze test niet maken.

Pagina https://vvn.nl/blijf-veilig-onderweg bevat een iframe zonder een titel-attribuut. Iframes moeten een goede beschrijving hebben. Die komt meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen blinde bezoekers beslissen of het de moeite waard is om de inhoud van het iframe te verkennen. Zie ook pagina https://vvn.nl/leer-meer/op-school/verkeersmethode, pagina https://vvn.nl/gemeenten/50-plussers en pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets.

Op pagina https://vvn.nl/blijf-veilig-onderweg/fiets/opfrissen staat boven "Meer lezen" een link met de enige inhoud als een punt dat geen toegankelijke naam heeft. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Geef deze link een toegankelijke naam die het doel van de link beschrijft.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://vvn.nl/zelf-iets-doen/help-anderen/buurt/maak-een-melding wordt een bevestiging getoond als het formulier succesvol is verzonden. Dit bericht verschijnt zonder de pagina te herladen en de focus wordt niet naar dit bericht gestuurd. Daarom is extra code nodig zodat schermlezers het statusbericht automatisch voorlezen zodra het verschijnt. Voeg aria-live="polite" of role="status" toe aan de melding. Meer informatie overrole="status" is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22 .

Op pagina https://vvn.nl/blijf-veilig-onderweg/opfrissen/opfrisquiz/fiets staat een test. Wanneer de bezoeker alle stappen van de test heeft doorlopen, verschijnt er een resultaat met de statusmelding “Eindscore:...”, en na het invullen van het formulier volgt de statusmelding: “Bedankt voor het indienen van je gegevens. We zullen deze gebruiken om de verkeersveiligheid te verbeteren.” Dit bericht wordt niet als een statusbericht voorgelezen.

Op alle pagina's van de steekproef staat een "Lees voor"-widget. Deze widget heeft verschillende toegankelijkheidsproblemen. Bij het klikken op de knop "Voorlezen" wordt een laadanimatie weergegeven. Deze statusmelding is niet toegankelijk voor blinde bezoekers. Om ervoor te zorgen dat schermlezers dit bericht onmiddellijk kunnen aankondigen, moet aan de animatie een geschikte rol worden toegewezen, zoals aria-live="polite" of role="status". Dit maakt de laadanimatie toegankelijk en zorgt ervoor dat de informatie programmatisch wordt gedeeld met schermlezers. Ga voor meer informatie over het gebruik van role="status" naar https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.