Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Regionaal Orgaan Verkeersveiligheid Limburg

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Regionaal Orgaan Verkeersveiligheid Limburg
Datum 16 november 2023
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op rovl.nl
  • Alle PDF's op rovl.nl
  • Alle pagina's binnen de acceptatieomgeving rovl.ivengi.info/inloggen.
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: 75

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: De zoekbutton in de algemene navigatiebalk heeft geen tekstalternatief. Doordat het een lege alt-tekst heeft, weet de gebruiker van schermleessofware niet wat het icoon doet. Naast dat er geen toegankelijk tekstalternatief is, heeft dit element ook geen toegankelijke rol. Zie succescriterium 4.1.2. Zorg ervoor dat het element een toegankelijke naam (zoals ‘Zoeken openen’) en een toegankelijke rol heeft.

Bevinding 2: Op pagina https://rovl.ivengi.info/inloggen staat een logo van Verkeersactieveschool. De alternatieve tekst van de afbeelding is enkel 'logo'. De alternatieve tekst van een logo moet tenminste de naam van de organisatie/het project hebben. Pas de alternatieve tekst daarom aan om dit probleem op te lossen.

Bevinding 3: Op pagina https://www.rovl.nl/over-rovl staat een afbeelding van fietsers. Wanneer bezoekers op de afbeelding klikken opent de afbeelding in vergrootte weergave, de afbeelding heeft daarom een beschrijvend tekstalternatief nodig dat beschrijft wat er gebeurt als de bezoeker er op klikt, dat is nu niet het geval. Pas de alternatieve tekst aan om dit probleem op te lossen. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://www.rovl.nl/campagnes en op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar. Op deze pagina heeft de afbeelding wel een title-attribuut, maar is de beschrijving alleen 'Afbeelding'.

Bevinding 4: Op pagina https://www.rovl.nl/educatie/verkeersactieve-school staat het logo van Totally Traffic. Deze afbeelding heeft geen (goede) alternatieve tekst. De alternatieve tekst van een logo moet minimaal de naam van de organisatie bevatten. De afbeelding dient als link en heeft daarom tevens een beschrijvend linkdoel nodig. Het is ook raadzaam om te vermelden dat het om een externe website gaat. Zit tevens SC 2.4.4

Bevinding 5: Op pagina https://www.rovl.nl/educatie/verkeersactieve-school staat een afbeelding met de tekst 'Inloggen digitale lessen'. De afbeelding heeft geen alternatieve tekst, dus de tekst is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Geef de afbeelding een beschrijvende alternatieve tekst, of plaats de linktekst als platte tekst op de pagina (zie succescriterium 1.4.5).

Bevinding 6: Op meerdere pagina's, waaronder op pagina https://www.rovl.nl/educatie/verkeersactieve-school, staan social media iconen onder 'Deel deze pagina op:'. Deze iconen hebben geen alternatieve tekst (en de elementen hebben geen toegankelijke rol, zie succescriterium 4.1.2). Daarnaast zijn de iconen door middel van CSS op de pagina geplaatst. Voor bezoekers die een eigen stylesheet inladen op de pagina valt deze informatie daardoor weg. Plaats daarom alléén puur decoratieve content op de pagina met CSS. Plaats deze afbeeldingen als img-elementen met een beschrijving binnen het alt-attribuut, binnen een a-element (een link), om dit probleem op te lossen. Een vergelijkbaar probleem komt voor op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1, met de sorteerfunctie in de tabel.

Bevinding 7: Op onder andere pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar staan links om videospelers mee te openen. De afbeeldingen hebben een alternatieve tekst, maar de link zelf heeft ook al een toegankelijke naam. Hierdoor wordt onnodig veel tekst voorgelezen, bijvoorbeeld bij de online video voor Mono: Name: "Speel video : MONO TV commercial mij nie appen MONO TV commercial mij nie appen". Maak de afbeeldingen daarom decoratief, zodat er geen overbodige tekst wordt voorgelezen.

1.2 Op tijd gebaseerde media

1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 8: Op pagina Op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar worden er twee video's getoond. Deze video’s hebben alleen een automatisch gegenereerde ondertiteling. Voor een groot deel van de video mist nu echter in zijn geheel ondertiteling (er is alleen ondertiteling voor de voiceover), en belangrijke omgevingsgeluiden worden ook niet aangekondigd. Daarnaast mist automatische ondertiteling interpunctie. Voeg daarom een eigen ondertiteling toe voor deze video’s. Een foutieve automatisch gegeneerde ondertiteling komt ook voor bij de video 'Verkeerstuin verhuist Koninglust' op pagina https://www.rovl.nl/educatie/projecten/id=602bc46da8452f6ae0d928f1#gallery-2.

Bevinding 9: De video's 'De verkeerstuin - Ik let goed op in het verkeer' en de video 'De verkeerstuin Maasbree - Jos van Rens' missen in het geheel ondertiteling. Het is voor dove bezoekers daardoor niet mogelijk de informatie in de video tot zich te nemen.

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar komen twee campagnevideo's voor. In de video voeren personen acties uit, of is hun locatie (in de auto stappen, op de fiets zitten, etc) belangrijk voor het begrijpen van de video. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Voeg een transcript met deze beschrijvingen toe, of voeg een audiodescriptie toe aan de video om ook te voldoen aan succescriterium 1.2.5.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 11: Op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar komen twee campagnevideo's voor. In de video voeren personen acties uit, of is hun locatie (in de auto stappen, op de fiets zitten, etc) belangrijk voor het begrijpen van de video. Deze informatie is niet beschikbaar voor bezoekers die het scherm niet kunnen zien. Audiodescriptie is gesproken tekst die is toegevoegd aan het standaard audiospoor om belangrijke visuele informatie te beschrijven, die niet uit het standaard audiospoor te begrijpen zijn. Vaak kan audiodescriptie in een videospeler aan of uit worden gezet, of is de audiodescriptie een vast onderdeel van de video. Voeg een audiodescriptie toe voor deze video's.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 12: Op pagina https://www.rovl.nl/campagnes staat een tabel. De tabelkoppen zijn opgemaakt met het strong-element, bijvoorbeeld "Limburgse Campagnekalender". Het strong-element geeft aan dat relatief aan andere tekst eromheen, bijvoorbeeld in dezelfde paragraaf, deze tekst belangrijker is. Gebruik het strong-element daarom ook nooit puur voor opmaak, maar gebruik CSS of een vergelijkbare techniek om eenzelfde visueel effect te creëren.

Bevinding 13: Op onder andere pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar komt een broodkruimelpad voor. Hier is role=navigation direct op een ul-element geplaatst, in plaats van een div-element met role=navigation, met daarin een ul-element genest. Hierdoor worden de li-elementen niet meer door alle browser en hulpsoftware combinaties goed voorgelezen. Plaats het role attribuut op het juiste niveau om dit probleem op te lossen. Dit probleem doet zich op alle pagina's met een broodkruimelpad voor.

Bevinding 14: Op pagina https://www.rovl.nl/educatie/projecten#offset=78&limit=6&() is het woord 'Thema's' visueel een kop voor de onderstaande content, maar de tekst is niet als kop opgemaakt. Bezoekers kunnen aan de hand van een koppenlijst of met een sneltoets door koppen op een pagina navigeren, maar alleen als de tekst correct opgemaakt is. Geef deze teksten een kop-opmaak. Zie verder succescriterium 1.3.2.

Bevinding 15: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staan filteropties. Sommige filteropties hebben daarbinnen een invoerveld. Deze invoervelden hebben geen toegankelijke naam. Voeg een toegankelijke naam toe, bijvoorbeeld 'Eigen invoer'. Om dit probleem toe te voegen.

Bevinding 16: De PDF op pagina https://indd.adobe.com/view/publication/822c4d0c-18ac-4acd-a349-5d79af1a620d/y1ja/publication-web-resources/pdf/2304_1552_Kwartaalblad_ROVL_editie_46_-__juni_2023.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. Dit geldt ook voor de PDF op pagina https://www.rovl.nl/IManager/Download/1095/123743/34269/2418263/NL/34269_2418263_1OZM_Activiteitenoverzicht_ROVL_2022_definitieve_versie.pdf.

Bevinding 17: Advies: Wanneer bezoekers in het navigatiemenu bovenaan iedere pagina een regio willen selecteren maar het dialoogvenster sluiten zonder een regio te kiezen, activeert automatisch een paginarefresh. Dit is onverwacht gedrag voor alle bezoekers, zorg er bij voorkeur voor dat het sluiten van een dialoogvenster geen onverwachte gevolgen heeft.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 18: Op pagina https://www.rovl.nl/home staan onder 'Onze campagnes' blokken content. Zowel visueel als in de code staat de tekst 'Huidig' van de huidige campagne, bóven de kop van het artikel. Voor bezoekers die gebruik maken van voorleessoftware is het nu niet duidelijk waar deze tekst bij hoort. Plaats deze tekst daarom in de code ónder de kop van het artikel. Visueel mag het er wel boven blijven staan. Een vergelijkbaar probleem komt voor bij de datums onder 'Ons laatste nieuws' en 'Onze agenda' op dezelfde pagina en op pagina https://www.rovl.nl/educatie/projecten#offset=0&limit=6&(), bij de blokken met projecten.

1.3.5 Identificeer het doel van de input (Niveau AA)

Informatie over succescriterium 1.3.5 Identificeer het doel van de input

Uitkomst: Onvoldoende

Bevinding 19: Op pagina https://rovl.ivengi.info/gebruiker/642ad903700ab5f7519471f2/wijzigen is een formulier waar de bezoeker onder andere het eigen e-mailadres 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: https://www.w3.org/tr/wcag21/#input-purposes.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 20: Wanneer bezoekers op pagina https://rovl.ivengi.info/inloggen geen gegevens invullen en verder navigeren, kleuren de randen van de invoervelden rood. Kleur mag niet als het enige visuele middel gebruikt worden om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Geef op minimaal één andere manier aan dat invoer verplicht is, bijvoorbeeld met het markeren van verplichte velden of door het toevoegen van toegankelijke foutmeldingen.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 21: In de algemene footer staan onder "Handige links" en "Volg ons op" een reeks links. Wanneer ze de focus ontvangen, ontstaat er oranje tekst (HEX #B55B08) op een donkergrijze achtergrond (HEX #231F20). Deze tekst heeft een te laag contrast. De contrastverhouding is 3,4:1 waar dit 4,5:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden het onderscheid niet of moeilijk waar te nemen. Gebruik een andere kleur voor de focus op die plekken waar het contrast te laag is.

Bevinding 22: Indien items in de algemene navigatie de focus ontvangen, ontstaat donkergrijze tekst (HEX #0A0A0A) op een blauwe achtergrond (HEX #017DBC). Deze tekst heeft een te laag contrast. De contrastverhouding is 4,3:1 waar dit 4,5:1 moet zijn.

Bevinding 23: Op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar komt witte tekst op een blauwe (HEX #1A8AC2) achtergrond voor. De contrastratio is 3,8:1 waar dat minimaal 4,5:1 moet zijn. Dit probleem doet zich op meerdere pagina's voor, waaronder op pagina https://www.rovl.nl/home.

Bevinding 24: Op onder andere pagina https://www.rovl.nl/home komt donkerblauwe tekst (HEX #122B3A) op een blauwe (HEX #1A8AC2) achtergrond voor. De contrastratio is hier 3,8:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 25: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staan onder "Projectenoverzicht" een achttal dropdown filtermenu's. De donkergrijze tekst (HEX #7E7E7E) op de lichtgrijze achtergrond (HEX #EFEFEF) heeft een te laag contrast, als er een optie geselecteerd is. De contrastverhouding is 3,5:1 waar dit 4,5:1 moet zijn. Wanneer er geen optie geselecteerd is het contrast van de lichtgrijze tekst (HEX #BABABA) op de lichtgrijze achtergrond 1,6:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 26: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staan onder "Projectenoverzicht" een achttal dropdown filtermenu's. De donkergrijze tekst (HEX #7E7E7E) op de lichtgrijze achtergrond (HEX #EFEFEF) heeft een te laag contrast. De contrastverhouding is 3,5:1 waar dit 4,5:1 moet zijn.

Bevinding 27: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staat een navgatiemenu. Het actieve item (bijvoorbeeld 'Alle') heeft een witte tekst op een grijze (HEX #7E7E7E) achtergrond. De contrastratio is hier 4:1 waar dat minimaal 4,5:1 moet zijn. Dit probleem doet zich op alle pagina's in de acceptatieomgeving voor.

Bevinding 28: Op pagina https://rovl.ivengi.info/inloggen komt witte tekst op een paarse (HEX #899BBF) achtergrond voor. De contrastratio is hier 2,7:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 29: Op pagina https://rovl.ivengi.info/inloggen komt grijze tekst (HEX #BABABA) op een witte achtergrond voor. De contrastratio is 1,9:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 30: Op pagina https://rovl.ivengi.info/inloggen komt grijze placeholdertekst (HEX #BAB6B5) op een lichtgrijze achtergrond (HEX #EFEAE8) voor. De contrastratio is hier 1,6:1 waar dat minimaal 4,5:1 moet zijn.

Bevinding 31: In de PDF's op pagina https://indd.adobe.com/view/publication/822c4d0c-18ac-4acd-a349-5d79af1a620d/y1ja/publication-web-resources/pdf/2304_1552_Kwartaalblad_ROVL_editie_46_-__juni_2023.pdf en op pagina https://www.rovl.nl/IManager/Download/1095/123743/34269/2418263/NL/34269_2418263_1OZM_Activiteitenoverzicht_ROVL_2022_definitieve_versie.pdf komen meerdere contrastproblemen voor, waaronder:

Daarnaast komen er meerdere ton sur ton kleurcombinaties voor met een te lage contrastratio. Zorg ervoor dat alle tekst- en achtergrondcombinaties minimaal een contrastratio van 3:1 hebben voor grote- en grote dikgedrukte tekst en 4,5:1 voor gewone tekst.

1.4.4 Herschalen van tekst (Niveau AA)

Informatie over succescriterium 1.4.4 Herschalen van tekst

Uitkomst: Onvoldoende

Bevinding 32: Wanneer bezoekers op pagina https://www.rovl.nl/campagnes inzoomen naar 200%, schuift op verschillende tekst over elkaar. Zorg ervoor dat bezoekers de tekst tot 200% kunnen vergroten zonder verlies van content of functionaliteit. De functionaliteit die de website zelf aanbiedt vergroot tot 125% en is daarmee geen voldoende alternatief.

Bevinding 33: Wanneer bezoekers op de homepage https://www.rovl.nl/home inzoomen naar 200%, schuift het vergrootglas icoon in het navigatiemenu bovenaan iedere pagina over de regio-aanduiding, waardoor beiden niet meer geheel leesbaar zijn. Zorg ervoor dat bezoekers de tekst tot 200% kunnen vergroten zonder verlies van content of functionaliteit.

Bevinding 34: Advies: Op pagina https://www.rovl.nl/campagnes komt erg kleine tekst voor. Deze tekst is moeilijk leesbaar voor een grote groep mensen. Overweeg de tekst in een gewoon formaat weer te geven.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 35: Op pagina https://www.rovl.nl/educatie/verkeersactieve-school staat onderaan twee afbeeldingen: een link naar Totally Traffic en een link op deze website in te loggen bij de digitale lesomgeving. Bezoekers die bijvoorbeeld slechtziend, dyslectisch, of moeite hebben met contrast kunnen de tekst op een pagina aanpassen om het voor hen beter leesbaar te maken. Met tekst op een afbeelding is dat niet mogelijk. Plaats deze tekst daarom dan ook tenminste ook als platte tekst op de pagina maar bij voorkeur helemaal zonder gebruik te maken van een afbeelding. Zie tevens SC 1.1.1

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 36: Wanneer bezoekers met een schermgrootte van 1280 bij 1024 inzoomen naar vanaf 125% (tot 400%) komen op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar delen van de content over elkaar heen te staan, bijvoorbeeld de navigatiebalk "Campagnes" over de lopende tekst van het artikel. De tekst wordt daardoor slechter leesbaar. Zorg ervoor dat bezoekers kunnen inzoomen zonder verlies van functionaliteit of informatie.

Bevinding 37: Wanneer met bezoekers met een schermgrootte van 1280 bij 1024 inzoomen naar 400% is de tabel op pagina https://www.rovl.nl/campagnes niet meer leesbaar. Een tabel is tweedimensionaal van aard en kan daardoor niet herschaald worden op dezelfde manier als platte tekst. Voeg hier daarom een horizontale scrollbalk toe aan de tabel, zodat de bezoeker alsnog de hele tabel kan bekijken.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 38: Op pagina https://rovl.ivengi.info/inloggen worden de randen van knoppen en checkboxes lichtgrijs (HEX #D5DADF) indien ze de focus ontvangen. Het contrast op de witte achtergrond is hierbij onvoldoende. De contrastverhouding is hier 1,4:1, waar dit minimaal 3:1 moet zijn. Wanneer de invoervelden geen focus hebben is de contrast tussen de achtergrond van het invoerveld (HEX #EFEAE8) en de witte achtergrond slechts 1,1:1 waar dat minimaal 3:1 moet zijn. Dit laatste kan worden opgelost door een rand met voldoende contrast toe te voegen.

Bevinding 39: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staat onder "Projectenoverzicht" een reeks filteropties. Middels een kruisje kan de selectie ongedaan gemaakt worden. Het contrast van dit lichtgrijze kruisje (HEX #BABABA) op de witte achtergrond is te laag. De contrastverhouding is hier 1,9:1, waar dit minimaal 3:1 moet zijn. Hierdoor is voor slechtzienden en kleurenblinden niet of moeilijk mogelijk om de filterfunctie goed te bedienen. Maak gebruik van een kleurencombinatie met voldoende contrast.

Bevinding 40: Op pagina https://rovl.ivengi.info/school/overzicht?page=1 staat onder "Scholenoverzicht" een reeks filteropties. Indien de filteropties de focus ontvangen, is het onderscheid zeer subtiel. Het contrast tussen de grijze focusrand (HEXa #4040401A) en het grijze filterelement (HEX #EFEFEF) is slechts 1,2:1 waar diet minimaal 3:1 moet zijn.

1.4.12 Tekstafstand (Niveau AA)

Informatie over succescriterium 1.4.12 Tekstafstand

Uitkomst: Onvoldoende

Bevinding 41: Wanneer bezoekers op onder andere de homepage https://www.rovl.nl/home de tekstafstand wijzigen naar de waarden zoals beschreven in dit succescriterium, zijn de teksten zoals onder 'Ons laatste nieuws' en 'Onze campagnes' niet meer goed leesbaar omdat de teksten over elkaar heen schuiven. Zorg ervoor dat bezoekers de tekstafstand kunnen wijzigen zonder verlies van functionaliteit of informatie.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Voldoende

Bevinding 42: Advies: in de algemene navigatiebalk staan er onder de vijf middelste opties ("Over ROVL" tot "Kennis & Cijfers" uitklapmenu's. Deze uitklapmenu's zijn soms wel en soms niet toegankelijk met de muis. Wanneer bezoekers de content met de escape-toets sluiten, komt het daarna namelijk niet meer terug bij hover.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 43: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staat een navigatiemenu met uitklapbare items. Wanneer het item uitgeklapt is, verschijnen er nieuwe sub-items, zoals 'Alle' of 'Gastdocent'. Deze items zijn niet bereikbaar en bedienbaar met het toetsenbord. Zorg ervoor dat alle elementen die met de muis bedienbaar zijn ook met het toetsenbord te bedienen zijn.

2.1.4 Enkel teken sneltoets (Niveau A)

Informatie over succescriterium 2.1.4 Enkel teken sneltoets

Uitkomst: Onvoldoende

Bevinding 44: De video's op pagina https://www.rovl.nl/educatie/projecten/id=602bc46da8452f6ae0d928f1 maken gebruik van sneltoetsen, bijvoorbeeld om de video weer te geven in fullscreen met de lettertoets 'f'. Als de videospeler gebruik maakt van sneltoetsen, mogen die de werking van screenreaders niet in de weg zitten. Daarom moet de bezoeker ze kunnen uitzetten, aanpassen, of moeten ze alleen actief zijn als het object waarop de sneltoets van toepassing is heeft toetsenbordfocus heeft. Dit geldt ook voor de videospelers op pagina https://www.rovl.nl/educatie/verkeersactieve-school en op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar.

2.4.1 Blokken omzeilen (Niveau A)

Informatie over succescriterium 2.4.1 Blokken omzeilen

Uitkomst: Onvoldoende

Bevinding 45: Onder andere pagina https://www.rovl.nl/veelgestelde-vragen heeft wel een skiplink, maar deze verwijst de bezoeker niet daadwerkelijk naar de inhoud van de pagina. De pagina verschuift alleen visueel, wanneer een bezoeker verder navigeert met de tabtoets gaat de focusvolgorde alsnog naar het navigatiemenu. Zorg ervoor dat de focus ook wordt verplaatst naar de eerste niet-herhalende content. Dit probleem doet zich op meerdere pagina's voor.

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Onvoldoende

Bevinding 46: Op pagina https://rovl.ivengi.info/inloggen en aansluitend op de hele acceptatieomgeving is er een paginatitel maar deze beschrijft de inhoud van de pagina onvoldoende. Het betreft een inlogpagina maar de toegankelijke naam is "acceptance". Zie tevens SC 3.1.1

Bevinding 47: De PDF op pagina https://www.rovl.nl/IManager/Download/1095/123743/34269/2418263/NL/34269_2418263_1OZM_Activiteitenoverzicht_ROVL_2022_definitieve_versie.pdf. heeft alleen een bestandsnaam, geen titel. Een goede titel is belangrijk voor bezoekers met verschillende beperkingen, het is namelijk een belangrijk hulpmiddel bij het navigeren. Voeg een beschrijvende titel toe en zorg ervoor dat niet de bestandsnaam maar de titel wordt getoond bij openen.

Bevinding 48: De PDF op pagina https://indd.adobe.com/view/publication/822c4d0c-18ac-4acd-a349-5d79af1a620d/y1ja/publication-web-resources/pdf/2304_1552_Kwartaalblad_ROVL_editie_46_-__juni_2023.pdf heeft wel een titel, maar de bestandsnaam wordt getoond bij openen. Zorg ervoor dat niet de bestandsnaam maar de titel wordt getoond bij openen door bij 'Weergave bij openen' te kiezen voor 'Documenttitel'.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 49: In het navigatiemenu bovenaan iedere pagina staat een vergrootglas-icoon om de zoekfunctie te openen. Wanneer de zoekfunctie geopend is, gaat de focusvolgorde verder op de achterliggende pagina. Zorg ervoor dat bezoekers de zoekfunctie zelf moeten sluiten, door de sluit-knop te gebruiken of door een zoekterm in te vullen en de zoekopdracht te verzenden, voor zij verder kunnen navigeren op de achterliggende pagina.

Bevinding 50: Wanneer bezoekers inzoomen verandert het navigatiemenu bovenaan iedere pagina in een hamburgermenu. Wanneer de bezoeker met het toetsenbord daar doorheen navigeert, gaat de focusvolgorde na het laatste item verder op de achterliggende pagina terwijl het menu open blijft staan. Zorg ervoor dat bezoekers ofwel het menu zelf moeten sluiten, of dat het menu na het laatste item vanzelf sluit om dit probleem op te lossen.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 51: Op pagina https://www.rovl.nl/educatie/verkeersactieve-school staat het logo van Totally Traffic.De afbeelding dient als link en heeft daarom tevens een beschrijvend linkdoel nodig. Zie tevens SC 1.1.1

Bevinding 52: Op pagina https://www.rovl.nl/home staat meerdere keren de linktekst 'Klik hier'. Dit is onvoldoende beschrijvend. Pas de visuele linktekst aan, of voeg bijvoorbeeld met screenreader-only tekst de naam van de pagina waar de link naar verwijst toe. Dit geldt ook voor de linktekst 'Lees meer' op dezelfde pagina. Dit probleem komt op meerdere pagina's voor, waaronder op pagina https://www.rovl.nl/veelgestelde-vragen.

Bevinding 53: Op pagina https://www.rovl.nl/educatie/projecten/id=602bc46da8452f6ae0d928f1 komt drie keer de linktekst 'Speel video' voor, maar de links openen ieder een andere video. Zorg ervoor dat het duidelijk is welke video afgespeeld wordt. Daarnaast opent dit element een dialoogvenster. Een button is hier semantisch de correcte keus, kies daar dan ook bij voorkeur voor.

Bevinding 54: Advies: Op pagina https://www.rovl.nl/actueel/nieuws/editie-kwartaalblad-mvd01-september2023 komt de linktekst 'hier' voor. Uit de directe context van de paragraaf is op te maken waar de link naar verwijst, maar geef de link bij voorkeur een beschrijvendere linktekst.

Bevinding 55: Advies: De links naar de projecten op pagina https://www.rovl.nl/educatie/projecten#offset=0&limit=6&() bestaan uit álle tekst in de blokken. Dit is onnodig lang en mogelijk verwarrend, omdat niet eerst de kop maar de tekst op volgorde van voorkomen wordt voorgelezen. Overweeg om de linkteksten in te korten.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 56: Op pagina https://www.rovl.nl/educatie/projecten/id=602bc46da8452f6ae0d928f1 staan drie videos. De linktekst op de buttons die worden voorgelezen door hulpsoftware is "speel video". Geef de buttons een individuele naam met beschrijving van de video, zodat gebruikers van screenreaders de videos van elkaar kunnen onderscheiden. Een plek waar dit wel goed gaat is bijvoorbeeld op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 57: Wanneer bezoekers met het toetsenbord door het navigatiemenu navigeren, krijgt er ná ieder item in het menu een onzichtbaar item focus, of is de focusstijl zo ingesteld dat er slechts een kleine punt zichtbaar is. Wanneer bezoekers hier op klikken, opent een secundair menu (dat bij muishover direct opent). Dit is onvoldoende duidelijk. Zorg ervoor dat het voldoende duidelijk waar de bezoeker focus op heeft, bijvoorbeeld door een naar beneden wijzende pijl toe te voegen om aan te geven dat het item open te klappen is.

Bevinding 58: Wanneer de knop 'Inloggen' (niet disabled) op pagina https://rovl.ivengi.info/inloggen focus heeft, is dat niet zichtbaar. Zorg ervoor dat bezoekers die gebruik maken van het toetsenbord om over de pagina te navigeren maar het scherm wel kunnen zien, weten waar zij zich bevinden op de pagina door een duidelijke focusstijl toe te voegen.

Bevinding 59: In de acceptatieomgeving achter de inlog (https://rovl.ivengi.info/) is het vaak niet zichtbaar wanneer elementen focus ontvangen. Bijvoorbeeld op pagina https://rovl.ivengi.info/school/overzicht?page=1. Hier ontvangen sommige elementen wél zichtbare toetsenbordfocus, zoals de filtermenu's onder "Scholenoverzicht", de blauwe filterknop, het kruisje en de ‘bekijk’ icons. Bij alle overige elementen is het niet duidelijk waar en wanneer de focus op staat. Zie tevens SC 1.4.11

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 60: Op pagina https://rovl.ivengi.info/inloggen en aansluitend op de hele acceptatieomgeving is de taalaanduiding van de hele pagina Engels (lang="en"). De pagina is echter in het Nederlands. Zorg voor de juiste taalcodering in de HTML (lang="nl") zodat hulpsoftware de tekst op correcte wijze voorleest. Zie tevens SC 2.4.2

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 61: De algemene navigatiebalk heeft de naam "main menu". Dit wordt door screenreadersoftware in het Nederlands niet goed voorgelezen. Verander de naam naar "hoofdmenu", of laat het aria-label weg zodat door de role=navigation wordt voorgelezen dat het om een navigatiemenu gaat.

Bevinding 62: Advies: Wanneer bezoekers inloggen op de acceptatieomgeving en op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 belanden, verschijnt de melding 'U bent succesvol ingelogd'. De toegankelijke naam om dit venster te sluiten is 'close'. Zodra de taalinstelling goed staat (zie 3.1.1) is dit geen goede toegankelijke naam meer. Vertaal de toegankelijke namen van interactieve elementen dan naar het Nederlands.

3.3 Assistentie bij invoer

3.3.1 Foutidentificatie (Niveau A)

Informatie over succescriterium 3.3.1 Foutidentificatie

Uitkomst: Onvoldoende

Bevinding 63: Wanneer bezoekers op pagina https://www.rovl.nl/nieuwsbrief foutieve invoer invullen, verschijnen er geen foutmeldingen bovenaan de pagina. De bezoeker wordt meteen naar een nieuwe pagina met een foutmelding gebracht; https://www.rovl.nl/nieuwsbrief/nieuwsbrief-foutief. Op deze pagina is het niet mogelijk correcties aan te brengen, men moet weer terug naar de nieuwsbriefpagina en het formulier opnieuw invullen en verzenden. Dit is onhandig voor blinde en slechtzienden die afhankelijk zijn van hulpsoftware. Maak gebruik van foutidentificatie op de originele pagina. Een goede foutidentificatie vermeld welke fout is gemaakt, en waar de fout is gemaakt. Bijvoorbeeld 'Het veld e-mailadres is niet ingevuld’.

Bevinding 64: Het formulier op pagina https://www.rovl.nl/nieuwsbrief maakt gebruik van HTML5-foutmeldingen wanneer een bezoeker geen input geeft en het formulier probeert te verzenden. Deze foutmeldingen zijn niet volledig, geven geen suggesties voor oplossingen (zie succescriterium 3.3.3) en verdwijnen na enkele seconden weer. Voeg een eigen foutmelding toe om dit probleem op te lossen.

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 65: Op pagina https://www.rovl.nl/contact is een formulier waar bij de verplichte velden een * wordt getoond. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Velden met een sterretje (*) zijn verplicht'. Zie tevens SC 3.3.3.

Dit probleem doet zicht tevens voor op de volgende pagina:

Bevinding 66: Op pagina https://rovl.ivengi.info/inloggen staan twee invoervelden. De instructies voor welke invoer gevraagd wordt, staat nu alleen in de placeholder. Een placeholder verdwijnt wanneer een bezoeker begint met typen. Zorg ervoor dat visuele labels en instructies permanent zichtbaar zijn.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 67: Het formulier op pagina https://www.rovl.nl/nieuwsbrief maakt gebruik van HTML5-foutmeldingen wanneer een bezoeker geen input geeft en het formulier probeert te verzenden. Deze foutmeldingen zijn niet volledig (zie succescriterium 3.3.1), geven een suggesties voor oplossingen en verdwijnen na enkele seconden weer. Voeg een eigen foutsuggestie toe om dit probleem op te lossen.

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 68: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staat een navigatiemenu met uitklapbare items. Deze uitklapbare items bestaan uit een div-element met de rol 'region' en zijn uitklapbaar gemaakt met JavaScript. Dit is semantisch niet correct, de rol 'region' is hier niet geschikt voor. Het is nu ook niet programmatisch te bepalen of de knop in- of uitgeklapt is. Gebruik bij voorkeur een gewone html button-element met het aria-expanded attribuut.

Bevinding 69: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staat een navigatiemenu met uitklapbare items. Wanneer het item uitgeklapt is, verschijnen er nieuwe sub-items, zoals 'Alle' of 'Gastdocent'. Deze items hebben geen toegankelijke naam en geen rol. Zorg ervoor dat ieder interactief element een juiste naam, rol, waarde en waar van toepassing een status heeft

Bevinding 70: Op pagina https://www.rovl.nl/educatie/projecten#offset=0&limit=6&() staan visueel uitklapbare elementen. Deze elementen hebben geen toegankelijk rol. Hierdoor is het voor bezoekers die gebruik maken van hulpsoftware niet duidelijk waar dit element voor dient. Gebruik hier bijvoorbeeld een uitklapbare knop met aria-expanded en koppel de naam van de knop ook als groepsnaam aan de selectievakjes, zodat bezoekers weten waar zij antwoord op geven met het aanvinken van de selectievakjes. Een alternatief is een om de filteropties als submenu toe te voegen aan de pagina, in plaats van in uitklapbare elementen.

Bevinding 71: Het is voor ziende bezoekers duidelijk dat 'Campagnes' in het navigatiemenu op pagina https://www.rovl.nl/campagnes/aandacht-op-de-weg/mono-voorjaar actief is. Deze informatie is niet beschikbaar voor hulpsoftware. Maak gebruik van aria-current of een vergelijkbare techniek om dit probleem op te lossen.

Bevinding 72: Op pagina https://www.rovl.nl/contact staat visueel een knop 'Versturen'. Dit element is echter opgemaakt als link (met een a-element). Een optie waarmee gegevens van bezoekers worden verzonden ter opslag moet altijd herkenbaar zijn als knop (ofwel met een role ofwel met een button-element) met het type 'submit'. Dit geldt ook voor de visuele knop 'Selecteren' in het dialoogvenster dat verschijnt wanneer bezoekers op 'Geen regio' in het navigatiemenu bovenaan iedere pagina klikken.

Bevinding 73: Op pagina https://www.rovl.nl/veelgestelde-vragen staan uitklapbare elementen. Deze elementen zijn genest binnen een ul-element met de rol tablist, waarbij ieder uitklapbaar element een tab is. Het tabpanel is echter niet genest binnen het tab element, maar als direct child-element van de tablist. Daarnaast is op de li-elementen role=presentation geplaatst.Hierdoor wordt de inhoud niet goed gecommuniceerd aan hulpsoftware. Gebruik hier button-elementen met een aria-expanded attribuut, of bijvoorbeeld een details- en summary combinatie om dit probleem op te lossen.

Bevinding 74: Op pagina https://rovl.ivengi.info/project/overzicht/alle?page=1 staan filteropties. Sommige filteropties hebben daarbinnen een invoerveld. Deze invoervelden hebben geen toegankelijke naam. Ook de knop om de invoer mee te wisselen heeft geen toegankelijke naam. De selectievakjes in de filteropties die zijn opgemaakt als listbox hebben zowel geen toegankelijke naam als geen rol.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 75: Wanneer een pagina aan het laden is, zoals op pagina https://www.rovl.nl/veelgestelde-vragen, verschijnt er een laadanimatie. Bezoekers die gebruik maken van hulpsoftware moeten statusberichten kunnen krijgen op pagina's die niet verversen, zonder dat de bezoeker daar op dat moment de focus heeft. Dit kan bijvoorbeeld met aria-live worden aangegeven, of er kan role=alert gebruikt worden. Dit probleem komt op meerdere pagina's voor, waaronder met het laden van de infinite scrolling op pagina https://www.rovl.nl/educatie/projecten#offset=78&limit=6&().

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-04-16 13:26:23 v2.4-011