Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid N211 Wippolderlaan

(Alleen de bevindingen)

Scope van de evaluatie

Naam website N211 Wippolderlaan
Datum 30 augustus 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De content van alle pagina's op n211wippolderlaan.nl
Buiten de scope van het onderzoek valt:
  • De techniek op alle pagina's van het domein n211wippolderlaan.nl. Dit vereist een apart onderzoek.
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar de onderzochte website met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 20

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: Op alle pagina’s van https://n211wippolderlaan.nl/ staat bij het hoofdmenu nu de afbeelding “N211 Wippolderlaan”. Er is aangenomen dat deze afbeelding bedoeld is als logo van dit project, om die reden is het vereist om in het tekstalternatief aan te geven dat het om een logo gaat door deze aan te passen naar bijvoorbeeld “Reconstructie N211 Wippolderlaan logo”. Op het moment dat deze afbeelding niet bedoeld is als logo voldoet de afbeelding niet aan meerdere andere succescriteria waaronder 1.4.3 en 1.4.5.

Bevinding 2: Op pagina https://n211wippolderlaan.nl/over/kaart/ staat een kaart. Deze kaart is nu opgemaakt als afbeelding zonder tekstalternatief. Het gevolg is dat deze afbeelding nu genegeerd wordt door hulpsoftware en dat is niet de bedoeling. Het is een optie om deze kaart een kort tekstalternatief te geven zodat duidelijk is dat dit de kaart is waar de bovenstaande tekst naar verwijst. Het is een optie om in deze tekst kort aan te geven dat alle belangrijke informatie in de tekst onder de kaart terug te vinden is. Denk daarbij aan een tekst als “Overzichtskaart, zie onderstaande tekst voor meer informatie”.

Bevinding 3: Op pagina https://n211wippolderlaan.nl/werkzaamheden/aannemer/ staat rechts het logo van de aannemer. Op dit moment wordt deze afbeelding genegeerd door hulpsoftware. Dat logo heeft net als op pagina https://n211wippolderlaan.nl/algemeen/secundaire-navigatie/over-ons/ een tekstalternatief nodig om te voldoen. Het advies is om in beide gevallen dezelfde tekst te gebruiken.

Bevinding 4: Op pagina https://n211wippolderlaan.nl/contact/ staat een QR-code. Die afbeelding wordt nu genegeerd door hulpsoftware en dat is niet de bedoeling. Het advies is om deze afbeelding aan te passen zodat die voldoende contrast heeft en hem dan een tekstalternatief te geven dat duidelijk maakt dat dit een QR-code naar de BouwApp is.

Bevinding 5: Op alle pagina’s van https://n211wippolderlaan.nl/ staat het logo van de provincie. Het advies is om in een tekstalternatief van een logo altijd aan te geven dat het om een logo gaat. Wij raden dan ook aan om het tekstalternatief “Provincie Zuid-Holland” aan te passen naar “Logo Provincie Zuid-Holland” of “Provincie Zuid-Holland (logo)”.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://n211wippolderlaan.nl/actueel/nieuws/let-n211-wippolderlaan-dicht-5-8-juli/ zijn de koppen opgemaakt met zowel een h2-element als een strong-element, bijvoorbeeld de kop “Dit merk je van de werkzaamheden”. Het is overbodig om koppen op te maken met een kop- en strong-element, omdat het strong-element een eigen semantische waarde heeft die niet gelijk is aan dat van een kop. Verwijder het strong-element van de koppen, laat het h2-element op de koppen staan.

Bevinding 7: Advies: Op pagina https://n211wippolderlaan.nl/werkzaamheden/weekendwerkzaamheden/ staan in de code vier lege h2-koppen om witruimte te creëren. Het gaat om de koppen onder de tekst “Werkzaamheden tijdens deze … overige (grond)werkzaamheden.” en boven de kop “Omleidingenkaart weekendafsluitingen Wippolderlaan”. Dit is een validatiefout die meestal geen gevolgen heeft en daarom niet wordt afgekeurd. Het advies is om styling met CSS te gebruiken om witruimte te maken. Het is niet de bedoeling om elementen met een semantische betekenis (zoals koppen) te gebruiken om witruimte te maken.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Voldoende

Bevinding 8: Onderstaande is geen (content) toegankelijkheidsprobleem, maar viel op:
Op pagina https://n211wippolderlaan.nl/contact/ staat de instructie “Klik op het plusje om het project te volgen”. Doordat het gaat om een instructie over de bediening van de BouwApp is dit niet getest. Let erop dat de huidige instructie alleen afhankelijk is van de vorm van het icoon in die applicatie. Het is een optie om deze instructie aan te vullen met een klein beetje meer informatie. Een instructie in de vorm “Klik op het plusje naast/onder/boven de projectnaam om dat project te volgen” zou bijvoorbeeld wel altijd voldoen doordat deze instructie gebruik maakt van vorm én locatie.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 9: In de kaart op pagina https://n211wippolderlaan.nl/werkzaamheden/weekendwerkzaamheden/ is het niet mogelijk om te begrijpen wat de verschillende pijlen betekenen zonder dat het mogelijk is om de kleur van de pijl op te zoeken in de legenda die rechtsonder in de kaart staat. Op pagina https://n211wippolderlaan.nl/over/kaart/ is het ook niet mogelijk om zonder het gebruik van kleuren te begrijpen wat er precies bedoeld wordt. Die tweede kaart is niet afgekeurd omdat er onder de kaart een tekst staat die uitleg geeft over wat er te zien is op de kaart. Een optie is om de verschillende routes voor de weekendwerkzaamheden in tekst onder de kaart te plaatsen net als bij de overzichtskaart is gedaan. Het is in dit geval geen optie om gebruik te maken van de uitzondering voor online kaarten en karteringsdiensten. De reden is dat de informatie op deze kaart die bedoeld is voor navigatie en dan nog steeds beschikbaar moet zijn voor gebruikers die niet in staat zijn om deze kaart te gebruiken. Deze uitzondering kan wel gebruikt worden om te voorkomen dat alle details op de kaart een alternatief moeten krijgen. De uitzondering voor online kaarten en karteringsdiensten kan bijvoorbeeld wel gebruikt worden op de kaart op pagina https://n211wippolderlaan.nl/over/toen-straks/, omdat die kaart niet bedoeld is voor navigatie. Op pagina https://www.digitoegankelijk.nl/aan-de-slag/tips/online-kaarten staat meer informatie.

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 10: Op pagina https://n211wippolderlaan.nl/over/toen-straks/ staat het iframe “n211.ik-doe-mee” in een kader. In het iframe staat een blauwe (HEX #6F6C8A) tekst op een licht blauw (HEX #F0EFF3) gekleurde achtergrond. De tekst “© N211 Wippolderlaan - Gemaakt met het Gebiedsparticipatie Platform” heeft met 4,4:1 nu net niet voldoende contrast om te voldoen. De contratsverhouding voor (kleine) teksten moet minimaal 4,5:1 zijn.

Bevinding 11: Op pagina https://n211wippolderlaan.nl/werkzaamheden/weekendwerkzaamheden/ staat een kaart die onvoldoende resolutie heeft om goede metingen op het contrast van teksten te doen. Het contrast van de letter “e” in het label “Den haag” is met 2,2:1 (HEX #F2FDFE op HEX #94AFCF) onvoldoende. De rode tekst die begint met “Let op” komt met meerdere metingen niet boven de 3,0:1 (HEX #EC7D83 op HEX #F6FDFD) uit. Het is niet gelukt om de rest van deze tekst te lezen, ook niet met herschalen naar 400%. Dit zijn enkele voorbeelden uit deze ene afbeelding die niet voldoen. Tekst op een afbeelding moet ook aan deze contrasteisen voldoen.

Bevinding 12: De nummering van de lijst op pagina https://n211wippolderlaan.nl/werkzaamheden/schadeloket/ is lichtblauw (HEX #90ADE0). Op de witte achtergrond hebben deze cijfers onvoldoende contrast. De contrastverhouding is hier 2,2:1, waar dat minimaal 4,5:1 moet zijn.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 13: Op pagina https://n211wippolderlaan.nl/contact/ staat een oranje QR-code. Om visueel waar te kunnen nemen dat dit een QR-code is moet deze voldoende contrast hebben. Het is nu ook moeilijker om deze code te scannen doordat het oranje (HEX #F39F21) een contrastverhouding heeft van 2,1:1 met de witte achtergrond, terwijl dit minimaal 3:1 moet zijn.

Bevinding 14: Advies: Op pagina https://n211wippolderlaan.nl/over/kaart/ is het deel van de N211 waar de werkzaamheden op plaats gaan vinden groen (HEX #65B33B) en het deel van de N211 dat niet aangepakt wordt is geel (HEX #F3E383). Die twee kleuren een contratsverhouding van 2:1, waar een contrastverhouding van minimaal 3:1 beter zou zijn. Het wordt aangeraden om hiervoor kleuren te kiezen die meer contrast hebben. Een bijkomend probleem is dat de gele en de groene lijnen op dit moment ook niet voldoende contrast met de achtergrond hebben. Gelukkig staat er onder de afbeelding een tekst die werkt als alternatief. Het advies is om op een aangepaste kaart als deze de gemarkeerde wegen ruim voldoende contrast te geven, maar in dit geval is dat niet vereist om te voldoen.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Voldoende

Bevinding 15: Advies: De pagina https://n211wippolderlaan.nl/over/kaart/ heeft met “Kaart - N211 Wippolderlaan” een paginatitel die voldoet aan de minimale eisen van dit succescriterium. Het is een optie om deze tekst te verbeteren naar bijvoorbeeld “Overzichtskaart van de reconstructie - N211 Wippolderlaan” of “Kaart reconstructie - N211 Wippolderlaan”.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Voldoende

Bevinding 16: Onderstaande is geen (content) toegankelijkheidsprobleem, maar viel op:
Op pagina https://n211wippolderlaan.nl/ staat een nav-element met aria-labelledby="nav-title-6825". Hierdoor heeft dit blok met de links “Direct naar” én “Over ons” voor navigatie nu de naam “Direct naar”. Dat is niet helemaal juist. Het is een optie om dit nav-element geen naam te geven.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Niet aanwezig

Bevinding 17: Onderstaande is geen (content) toegankelijkheidsprobleem, maar viel op:
Op alle pagina’s van https://n211wippolderlaan.nl/ staat rechtsboven een zoekveld met zoekknop. Op het moment dat de zoekknop toetsenbordfocus krijgt is deze niet goed zichtbaar. Het probleem is dat het kader dat dan om de zoekknop komt te staan voor een groot deel op de rand van het invoerveld valt. Doordat alle vier de hoeken en de linkerzijde een zichtbare focus hebben wordt dit niet afgekeurd. Het is een optie om de kleuren van deze knop om te draaien als deze focus heeft, zodat er bij focus een witte loep met zwarte achtergrond staat. Het ook een optie om het kader dat om de knop komt te staan een kleine offset naar binnen te geven zodat er één witte pixel tussen de toetsenbordfocus en de rand van het invoerveld zit.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 18: Op alle pagina’s van https://n211wippolderlaan.nl/ staat onderaan de kop “Blijf op de hoogte”. Daaronder staat een tekst en een invoerveld. Het is niet duidelijk welke tekst nu bedoeld is als het visuele label voor dit invoerveld. De naam van dit invoerveld is nu “E-mailadres *”. Die tekst komt niet in dit deel van de pagina terug om het voor gebruikers van spraakbesturing mogelijk te maken om met die tekst dit invoerveld te selecteren. Omdat het veld ook geen visueel label heeft is het een optie om dit het veld het label “E-mailadres *” te geven. Vergeet dan niet om aan te geven wat de asterisk (*) betekent.

3. Begrijpelijk

3.3 Assistentie bij invoer

3.3.2 Labels of instructies (Niveau A)

Informatie over succescriterium 3.3.2 Labels of instructies

Uitkomst: Onvoldoende

Bevinding 19: Op alle pagina’s van https://n211wippolderlaan.nl/ staat onderaan de kop “Blijf op de hoogte”. Daaronder staat een tekst en een invoerveld. Dit invoerveld heeft geen visueel label. Hierdoor kan het voor sommige bezoeker lastig zijn om te bepalen wat zij hier moeten invullen. Geef het invoerveld een visueel label, deze mag overeenkomen met de toegankelijke naam van het veld.

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 20: De iframe op pagina https://n211wippolderlaan.nl/over/toen-straks/ heeft de toegankelijke naam 'n211.ik-doe-mee' gekregen via het title-element. Deze toegankelijke naam omschrijft de inhoud van het iframe onvoldoende. Zorg ervoor dat in de toegankelijke naam van de iframe wordt aangegeven dat het hier gaat om een virtuele tour van het project om de N211 Wippolderlaan.

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-01-15 13:48:52 v2.4-011