Toegankelijkheidsonderzoek

Issues:
Content-audit digitale toegankelijkheid R-net busbaan

(Alleen de bevindingen)

Scope van de evaluatie

Naam website R-net busbaan
Datum 26 november 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • De content van alle pagina's op rnetbusbaan.nl
  • De PDF's op rnetbusbaan.nl.
Buiten de scope van het onderzoek valt:
  • De techniek van alle pagina's op rnetbusbaan.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: 35

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: Het logo van R-net busbaan Leiden-Katwijk in de header van elke pagina heeft als alternatieve tekst 'R-net busbaan Leiden-Katwijk'. De informatie dat het hier om een logo gaat mist. Voeg aan de alternatieve tekst 'logo' toe. De alternatieve tekst van een logo moet altijd tenminste de naam van de organisatie en eventuele overige tekst in de afbeelding bevatten en daarnaast een beschrijvend linkdoel als de afbeelding ook als link dient. In dit geval dient het logo in de header op alle pagina's, behalve de homepagina, als link naar de homepagina. Een vergelijkbaar probleem komt voor bij de logo's net boven de footer zoals het logo van 'provincie Zuid Holland', waar de tekst 'logo' ontbreekt en het linkdoel niet is toegevoegd aan de alternatieve tekst van de logo's.

Bevinding 2: Op pagina https://rnetbusbaan.nl/nieuws/start-werkzaamheden-duinvallei/ staan kaarten met een alternatieve tekst zoals 'M24 01 01636_Werkzaamheden_afgesloten_toerit_Zeeweg_N206_omleidingsroute'. Deze tekst bevat overbodige informatie zoals de cijfers voor bezoekers die gebruikmaken van voorleessoftware. Verwijder onnodige informatie uit de alternatieve tekst van de afbeelding. Daarnaast bevat de afbeelding informatie die niet terugkomt in de alternatieve tekst zoals een logo van provincie Zuid-Holland, die wel informatief is. Voeg deze informatie toe aan de alternatieve tekst. Hetzelfde probleem komt ook voor op pagina https://rnetbusbaan.nl/werkzaamheden/werkzaamheden-omleidingen/ bijvoorbeeld bij de kaart met alternatieve tekst 'M24 01 01636 Werkzaamheden N206 tbv infoavond 3 sept 2024'.

Bevinding 3: In de video op pagina https://rnetbusbaan.nl/projectinformatie/animatie-busbaan/@1027/animatie-buslijn-leiden-katwijk/ staat een afbeelding van het logo van Provincie Zuid-Holland. Voor bezoekers die gebruikmaken van een screenreader is het niet duidelijk dat deze afbeelding een logo is. Er wordt wel goed voorgelezen dat het om een afbeelding van Provincie Zuid-Holland gaat. Voeg toe dat het hier om het logo gaat.

Bevinding 4: De afbeelding van de interactieve kaart op pagina https://rnetbusbaan.nl/projectinformatie/interactieve-kaart-deelgebied-duinvallei/ heeft als alternatieve tekst 'Deelgebied Duinvallei'. Voeg hieraan toe dat het om een interactieve kaart gaat die de deelprojecten weergeeft.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://rnetbusbaan.nl/ staan koppen in de koppenstructuur die geen koppen zijn. Het gaat om de h2 koppen uit de hoofdnavigatie zoals 'Projectinformatie en 'Werkzaamheden'. Onder deze hoofdnavigatie onderwerpen bevinden zich subnavigatie links, maar deze horen niet thuis in een koppenstructuur. Verwijder de hoofdnavigatie uit de koppenstructuur. Dit probleem komt op meerdere pagina's voor, bijvoorbeeld op pagina https://rnetbusbaan.nl/contact/.

Bevinding 6: Op pagina https://rnetbusbaan.nl/ is het logo opgemaakt als h1 kop en het is daarmee ook de titel van de pagina. Omdat zich geen content bevindt onder dit logo hoort het niet thuis in de koppenstructuur. De h2 kop 'Nieuwe R-net busbaan Leiden – Katwijk' zou wel een geschikte h1 kop kunnen zijn.

Bevinding 7: Op pagina https://rnetbusbaan.nl/ staat onder de kop een stuk tekst in vet. Hier is het strong-element gebruikt om een heel stuk tekst nadruk te geven, dat is niet de bedoeling. Het strong-element is bedoeld voor het benadrukken van kleine stukjes tekst. Maak gebruik van de stylesheet om een introtekst in een vet lettertype te tonen.

Bevinding 8: Het invoerveld waar een e-mailadres kan worden ingevuld, onderaan pagina https://rnetbusbaan.nl/algemeen/nieuwsalert/ heeft dezelfde id als het invoerveld in de footer. De id wordt gebruikt om het label aan het invoerveld te koppelen met behulp van het for attribuut. Op elke pagina moet elk element een unieke id hebben. Nu wordt bij het invoerveld onderaan de pagina twee labels voorgelezen en heeft het invoerveld in de footer geen toegankelijke naam waardoor bezoekers niet weten wat zij hierin moeten vullen. Zorg ervoor dat het voor alle bezoekers altijd duidelijk is welke input gevraagd wordt.

Bevinding 9: Advies: Op pagina https://rnetbusbaan.nl/nieuws/3-september-informatieavond-busbaan/ staat visueel een tabel onder 'Praktische informatie', die in de code niet als zodanig is opgemaakt. Maak deze tabel op met het table-element, gebruik voor tabelkoppen het th-element en voor datacellen het dt-element.

Bevinding 10: Advies: Op pagina https://rnetbusbaan.nl/werkzaamheden/werkzaamheden-omleidingen/ staat onder de kop 'Omleiding fietsers Duinvallei' de tekst 'De omleiding voor fietsers is weergegeven in onderstaande kaart.' Het advies is om de omleidingsroute uit de kaart ook als html tekst op de pagina te plaatsen, voor bezoekers die het scherm niet kunnen zien. Bijvoorbeeld zoals de beknopte beschrijving van de omleiding onder de kop 'Omleiding doorfietsroute Leiden-Katwijk', dat zou hier ook behulpzaam zijn.

Bevinding 11: Advies: Op pagina https://rnetbusbaan.nl/projectinformatie/interactieve-kaart-deelgebied-duinvallei/ staat een interactieve kaart. Op deze kaart staan deelprojecten weergegeven. Omdat de interactieve kaart onder de uitzonderingen valt is hiervoor geen toegankelijk alternatief nodig. Echter, dit is de enige pagina (samen met pagina https://rnetbusbaan.nl/projectinformatie/interactieve-kaart-deelgebied/) waar alle deelprojecten worden beschreven. Op pagina https://rnetbusbaan.nl/projectinformatie/alleen-busbaan/ staan een aantal deelprojecten, maar niet alle deelprojecten. Een deel van de bezoekers heeft daardoor geen toegang tot alle informatie.

1.3.3 Zintuiglijke eigenschappen (Niveau A)

Informatie over succescriterium 1.3.3 Zintuiglijke eigenschappen

Uitkomst: Onvoldoende

Bevinding 12: Op pagina https://rnetbusbaan.nl/fout staat de tekst 'Geef je zoekterm op in het zoekveld bovenaan de pagina'. Deze instructie maakt gebruik van oriëntatie en is daarom niet behulpzaam voor blinde bezoekers. Omdat het zoekveld zich vaak op een plek in de header bevindt, zoals hier ook het geval is, is het in dit geval niet een heel groot probleem, maar het zou beter zijn om helemaal geen gebruik te maken van een instructie op basis van zintuiglijke eigenschappen.

Bevinding 13: Advies: Op pagina https://rnetbusbaan.nl/werkzaamheden/ staat de tekst 'Via onderstaande knoppen vind je meer informatie'. De informatie waarnaar verwezen staat direct onder deze tekst. Echter, er wordt verwezen naar 'knoppen' terwijl het hier om 'links' gaat. Dit zou verwarrend kunnen zijn voor bezoekers die het scherm niet kunnen zien. Verander daarom de tekst 'onderstaande knoppen' naar 'onderstaande links'.

Bevinding 14: Advies: Op pagina https://rnetbusbaan.nl/projectinformatie/interactieve-kaart-deelgebied-duinvallei/ staat een interactieve kaart. Op deze kaart staan deelprojecten weergegeven. In de instructie bij de kaart staat de tekst 'Ga met je muis over de kaart en je ziet informatie over het deelproject.' Omdat de interactieve kaart onder de uitzonderingen valt is hiervoor geen toegankelijk alternatief nodig. Echter, pas op met een dergelijke instructie die niet behulpzaam is voor blinde bezoekers.

Bevinding 15: Advies: Op pagina https://rnetbusbaan.nl/contact/ staat de tekst
'Scan de QR-code'. Wanneer een bezoeker het scherm niet kan zien is dit geen behulpzame instructie. Omdat er een alternatief beschikbaar is, namelijk 'of ga naar de appstore om de app (gratis) te downloaden' is het hier geen probleem. Let echter op met dergelijke instructies.

1.4 Onderscheidbaar

1.4.1 Gebruik van kleur (Niveau A)

Informatie over succescriterium 1.4.1 Gebruik van kleur

Uitkomst: Onvoldoende

Bevinding 16: Op pagina https://rnetbusbaan.nl/planning/ staat een tijdlijn met fases. Met kleur is aangegeven wat de huidige fase is, door middel van een grijze stip, waar de andere stippen (fases) met blauw zijn aangegeven. Slechtzienden en kleurenblinden krijgen deze informatie mogelijk niet mee. Zorg ervoor dat informatie niet van kleur afhankelijk is om dit probleem op te lossen.

Bevinding 17: Advies: In de legenda van de kaart 'Afsluiting toerit Zeeweg N206' op pagina https://rnetbusbaan.nl/nieuws/start-werkzaamheden-duinvallei/ komt de blauwe kleur niet terug, die wel in de kaart voorkomt. Wanneer deze wel in de legenda wordt opgenomen, zorg er dan voor dat er naast kleur ook een andere manier is om onderscheid te maken. Nu is het slechts een advies omdat iedere bezoeker hier last van heeft.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 18: Op pagina https://rnetbusbaan.nl/projectinformatie/animatie-busbaan/@1027/animatie-buslijn-leiden-katwijk/ staan blauwe + en - tekens voor in- en uitklappen (HEX #7BADDE). De contrastverhouding is hier 2,3:1, waar dit minimaal 3:1 moet zijn. Dit probleem komt voor op meerdere pagina's, bijvoorbeeld op pagina https://rnetbusbaan.nl/fout. Deze kleurencombinatie met te laag contrast komt ook voor:

Bevinding 19: Op pagina https://rnetbusbaan.nl/contact/ staat een QR code. De gele (HEX #FEAC00) kleur op de witte achtergrond heeft een contrastverhouding van 1,8:1, waar dit minimaal 3:1 moet zijn.

Bevinding 20: In de kaart 'Omleiding vanwege afsluiting toerit N206' op pagina https://rnetbusbaan.nl/nieuws/start-werkzaamheden-duinvallei/ worden kleuren gebruikt om routes aan te geven. De lichtblauwe (HEX #1BC1DC) lijn op de kaart heeft een te laag contrast met de witte achtergrond. De contrastverhouding gis 2,1:1, waar dit minimaal 3:1 moet zijn. Een vergelijkbaar probleem komt voor op dezelfde pagina in de kaart 'Omleidingsroutes voor fietsers'. Hier heeft de blauwe (HEX #3CB1B1) lijn op de witte achtergrond een contrastverhouding van 2,5:1 (ook in de legenda). Een vergelijkbaar probleem komt voor bij de kaarten op pagina https://rnetbusbaan.nl/werkzaamheden/werkzaamheden-omleidingen/. Bijvoorbeeld bij de kaart 'Afsluiting doorfietsroute - westzijde N206' bij de blauwe (HEX #43B4B4) kleur in de legenda op de witte achtergrond, de contrastverhouding is hier 2,4:1.

Bevinding 21: In de interactieve kaart op pagina https://rnetbusbaan.nl/projectinformatie/interactieve-kaart-deelgebied-duinvallei/ staan een aantal kleuren die onvoldoende contrast hebben met de achtergrondkleur. Bijvoorbeeld in de legenda heeft de gele (HEX #EABE00) kleur op de grijze (HEX #D7D2D6) achtergrondkleur een contrastverhouding van 1,1:1, waar dit minimaal 3:1 moet zijn. Er zijn meerdere contrastproblemen in deze kaart, bijvoorbeeld de blauwe lijn (HEX #6AB6E9) op de groene (HEX #E8ECCB) achtergrondkleur heeft een contrastverhouding van 1,8:1.

2. Bedienbaar

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 22: Het logo van R-net busbaan Leiden-Katwijk in de header van elke pagina heeft als toegankelijke naam van de link 'R-net busbaan Leiden-Katwijk'. Het linkdoel is de homepagina. Voeg deze informatie toe aan de toegankelijke naam van de link.

Bevinding 23: Op pagina https://rnetbusbaan.nl/algemeen/zoeken/?mode=zoek&zoeken_term=werkzaamheden&zoeken_sortering=Num&Zoeken_button= komen links voor naar verschillende doelen met meerdere keren dezelfde linktekst zoals 'Planning' en 'Werkzaamheden'. Zorg dat links naar verschillende doelen unieke linkteksten hebben, door bijvoorbeeld de tekst aan te vullen met de titel van het bericht of pagina waarnaar gelinkt wordt. Als visueel duidelijk is waar de link bij hoort hoeft deze aanvullende tekst niet visueel zichtbaar te zijn.

Bevinding 24: Advies: Op pagina https://rnetbusbaan.nl/planning/ staan bij de tijdlaan uitvouwbare onderdelen met links zoals '2022 – mei 2024: Participatie, en procedures PIP en MER (Status: Huidig) Uitklappen'. De status in- en uitklappen wordt voor bezoekers die gebruikmaken van voorleessoftware doorgegeven met de aria-expanded die in de code staat. Zodoende is het niet nodig in de toegankelijke naam van de link nogmaals uit- en inklappen te vermelden.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://rnetbusbaan.nl/algemeen/zoeken/?mode=zoek&zoeken_term=werkzaamheden&zoeken_sortering=Num&Zoeken_button= staan twee identieke h2 koppen, namelijk 'Werkzaamheden'. Een van de koppen beschrijft de onderliggende content onvoldoende. Omdat de kop uit de hoofdnavigatie niet thuishoort in de koppenstructuur, wordt dit probleem opgelost door deze uit de koppenstructuur te verwijderen, zie ook succescriterium 1.3.1. Dit probleem komt ook voor op dezelfde pagina bij de koppen 'Planning' en 'Contact'. Zorg voor unieke namen voor de koppen die de onderliggende content voldoende beschrijven.

Bevinding 26: Op pagina https://rnetbusbaan.nl/projectinformatie/animatie-busbaan/@1027/animatie-buslijn-leiden-katwijk/ staan onder de animatie twee koppen die als een uitvouwbare knop functioneren. De naam van de kop veranderd mee met de status van de knop, zo wordt bijvoorbeeld de kop 'Bron' aangevuld met "In- of uitklappen". De tekst in- of uitklappen beschrijft de onderliggende content niet en hoort niet in de kopnaam thuis. Dit probleem is op te lossen door de uitvouwbare knop anders op te maken, zie hiervoor succescriterium 4.1.2.

Bevinding 27: Advies: Op pagina https://rnetbusbaan.nl/projectinformatie/alleen-busbaan/ staat de kop 'Meer dan alleen een busbaan'. Op de pagina bevindt zich een overzicht van deelprojecten. De kop zou dit iets duidelijker kunnen beschrijven, zodat dit voor alle bezoekers duidelijk is.

3. Begrijpelijk

3.2 Voorspelbaar

3.2.4 Consistente identificatie (Niveau AA)

Informatie over succescriterium 3.2.4 Consistente identificatie

Uitkomst: Voldoende

Bevinding 28: Advies: Op de homepagina staat de link 'bekijk alle deelprojecten'. Het linkdoel is pagina https://rnetbusbaan.nl/projectinformatie/alleen-busbaan/ met als titel 'Meer dan alleen een busbaan'. In de hoofdnavigatie wordt ook de tekst 'Meer dan alleen een busbaan' gebruikt. Op de pagina bevindt zich een overzicht van een aantal deelprojecten. Wanneer de tekst 'deelprojecten' zou terugkomen in de titel van de pagina en de hoofdnavigatie dan zou dit bezoekers, bijvoorbeeld met een cognitieve beperking, kunnen helpen met het vinden van de juiste informatie.

Bevinding 29: Advies: Er wordt op de verschillende pagina's afwisselend de tekst 'mail', 'e-mail' en 'e-mailadres' gebruikt. In de footer staat bijvoorbeeld 'Mail' en op pagina https://rnetbusbaan.nl/algemeen/nieuwsalert/ 'e-mail'. Zorg voor een consistente benaming.

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 30: Op paginahttps://rnetbusbaan.nl/ is in de footer een invoerveld waar bij het verplichte veld een * wordt getoond in de toegankelijke naam van het invoerveld. Nergens binnen het formulier staat vermeld dat dit betekent dat dit veld verplicht is. Plaats een melding bovenaan, binnen het formulier, bijvoorbeeld: ‘Een veld met een sterretje (*) is verplicht'. Dit probleem komt op meerdere pagina's voor.

Bevinding 31: Het invoerveld waar een e-mailadres kan worden ingevuld, onderaan pagina https://rnetbusbaan.nl/algemeen/nieuwsalert/ heeft dezelfde id als het invoerveld in de footer. De id wordt gebruikt om het label aan het invoerveld te koppelen met behulp van het for attribuut. Op elke pagina moet elk element een unieke id hebben. Nu wordt bij het invoerveld onderaan de pagina twee labels voorgelezen en heeft het invoerveld in de footer geen toegankelijke naam waardoor bezoekers niet weten wat zij hierin moeten vullen. Zorg ervoor dat het voor alle bezoekers altijd duidelijk is welke input gevraagd wordt.

3.3.3 Foutsuggestie (Niveau AA)

Informatie over succescriterium 3.3.3 Foutsuggestie

Uitkomst: Onvoldoende

Bevinding 32: Formulierveld 'E-mailadres *' in het formulier in de footer op pagina https://rnetbusbaan.nl/ vraagt om een specifieke invoer, maar het is niet duidelijk in welk formaat het e-mailadres ingevuld met worden. Voeg bijvoorbeeld toe 'naam@domein.nl'. Zorg dat het voor bezoekers duidelijk is hoe zij dit formulierveld moeten invullen. Dit probleem komt op meerdere pagina's voor. Hetzelfde probleem komt ook voor in het formulier op pagina https://rnetbusbaan.nl/algemeen/nieuwsalert/ wanneer een bezoeker geen of foutieve invoer geeft in het invoerveld voor het inschrijven van een nieuwsalert.

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 33: Het invoerveld waar een e-mailadres kan worden ingevuld, onderaan pagina https://rnetbusbaan.nl/algemeen/nieuwsalert/ heeft dezelfde id als het invoerveld in de footer. De id wordt gebruikt om het label aan het invoerveld te koppelen met behulp van het for attribuut. Op elke pagina moet elk element een unieke id hebben. Nu wordt bij het invoerveld onderaan de pagina twee labels voorgelezen en heeft het invoerveld in de footer geen toegankelijke naam waardoor bezoekers niet weten wat zij hierin moeten vullen. Zorg ervoor dat het voor dat elementen de juiste naam hebben.

Bevinding 34: Dit probleem vereist mogelijk een technische oplossing: Op pagina https://rnetbusbaan.nl/projectinformatie/animatie-busbaan/@1027/animatie-buslijn-leiden-katwijk/ wordt gebruikgemaakt van uitvouwbare blokken (accordeons) zoals bij 'Uitgeschreven tekst'. Voor ziende gebruikers is het duidelijk dat een tekstblok in- of uitgevouwen is. Voor screenreadergebruikers die blind of slechtziend zijn is er een oplossing waarbij in de kopnamen wordt aangegeven wat de status is van de knop. Deze opmaak zorgt voor andere toegankelijkheidsproblemen (zie hiervoor succescriterium 2.4.6. Om dit probleem op te lossen is het bijvoorbeeld een optie om in de code de status aan te geven met aria-expanded of een vergelijkbare techniek. Dit probleem komt op meerdere pagina's voor, bijvoorbeeld op pagina https://rnetbusbaan.nl/planning/.
Dit probleem komt ook voor in de hoofdnavigatie bij de pijl-knoppen naast 'Projectinformatie' en 'Werkzaamheden' die verschijnen wanneer een bezoeker met de tab-toets over de pagina navigeert. De status van deze knoppen 'Inklappen' en 'Uitklappen' staat ook in de toegankelijke naam van de knop. Voorleessoftware zou informatie over de status al moeten doorkrijgen door middel van aria-expanded. Een ander probleem is dat de pijl-knop pas zichtbaar wordt bij tabfocus, na de link 'Projectinformatie' Ziende bezoekers die gebruikmaken van toetsenbordbediening zouden zo mogelijk informatie kunnen missen, wanneer zij niet verder navigeren, plaats daarom het pijl-icoon visueel zichtbaar op de pagina.

Bevinding 35: Advies: Op pagina https://rnetbusbaan.nl/planning/ staat bij de uitvouwbare onderdelen een visueel verborgen tekst 'status: huidig'. Het is niet helemaal duidelijk wat hier de functie van is.

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: 2024-12-27 12:00:36 v2.4-011