Hercontrole digitale toegankelijkheid van website rijnlandroute.nl

#1 - De rand van invoervelden heeft te weinig contrast

De rand van invoervelden is grijs (#D7D7D7). Tegen de lichtgrijze achtergrond (#F4F4F4) is het contrast 1,3:1 en tegen de witte achtergrond 1,4:1. Dat is te laag, waardoor slechtziende bezoekers het invoerveld niet goed van de achtergrond kunnen onderscheiden.

Oplossing:

De randen van interactieve elementen zoals invoervelden moeten een contrast van minimaal 3,0:1 met de achtergrond hebben.

#2 - De toetsenbordfocus kan het dialoogvenster van de cookiebanner verlaten

Bij het eerste bezoek verschijnt een cookiebanner. De knop "Instellingen" opent het dialoogvenster "Privacyoverzicht". Na het laatste interactieve element springt de toetsenbordfocus naar elementen op de pagina achter het dialoogvenster, in plaats van binnen het dialoogvenster te blijven. Dat is geen logische focusvolgorde.

Oplossing:

Zorg dat de toetsenbordfocus binnen het dialoogvenster blijft totdat de bezoeker het venster sluit.

#3 - De staat van het submenu wordt niet doorgegeven aan de schermlezer

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit:

In de header openen de menulinks "N206 Europaweg" en "Over" een submenu. Op deze links staat inmiddels het attribuut aria-expanded, maar dat werkt nog niet goed: de waarde verandert niet als het submenu opent of sluit en blijft altijd "true". Daardoor weet een blinde bezoeker nog steeds niet of het submenu open of dicht staat.

Oplossing:

Zorg dat aria-expanded automatisch wordt bijgewerkt: "true" als het submenu open is en "false" als het dicht is. De waarde moet meebewegen met de staat van het submenu.

#4 - De dropdown heeft niet de rol die aria-haspopup aangeeft

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit:

In de header geven de menulinks "N206 Europaweg" en "Over" met aria-haspopup="true" aan dat ze een dropdown met role="menu" openen. De dropdown-container heeft inmiddels role="menu", maar bevat niet de juiste onderliggende elementen (menuitem). Daardoor klopt de rolstructuur nog niet. Daarnaast hebben de lijst-items niet de juiste bovenliggende rol (role="list").

Oplossing:

Geef de items in het menu de rol menuitem, zodat de structuur consistent is en goed wordt doorgegeven aan hulpsoftware. Zie het ARIA-menubar-patroon: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/.

#5 - De toetsenbordfocus komt niet op een logische plek nadat de zoekbalk is gesloten

In de header opent de knop met het vergrootglas-pictogram een zoekbalk. Na het sluiten van de zoekbalk komt de toetsenbordfocus niet terug op de knop waarmee de zoekbalk werd geopend, en ook niet op het volgende logische element. In plaats daarvan springt de focus naar het begin van de navigatie, naar de link "Home".

Oplossing:

Zorg dat de focus na het sluiten van de zoekbalk terechtkomt op het element waarmee de zoekbalk werd geopend.

#6 - De naam van de footer-logolink beschrijft de bestemming niet

In de footer opent de link met het logo "RijnlandRoute" de homepagina, maar de toegankelijke naam is "RijnlandRoute_FooterLogo". Die naam beschrijft de bestemming niet. Een blinde bezoeker weet daardoor niet precies waar de link naartoe leidt.

Oplossing:

Geef de link een tekst die de bestemming goed beschrijft, bijvoorbeeld "RijnlandRoute home".

#7 - Logo's in de footer zijn links, maar de bestemming is onbekend

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit:

De logo's in de footer, zoals "provincie Zuid-Holland", hebben inmiddels een alt-attribuut, maar de zichtbare tekst van het logo ontbreekt erin. De zichtbare tekst is bijvoorbeeld "provincie Zuid-Holland", terwijl de alt-tekst "Opent website provincie in een nieuw venster" is. Daarnaast bestaat zo'n logolink uit twee afbeeldingen met dezelfde alt-tekst, waardoor de toegankelijke naam dubbel wordt: "Opent website provincie in een nieuw venster Opent website provincie in een nieuw venster".

Oplossing:

Zorg dat de zichtbare tekst van het logo in de toegankelijke naam staat, het liefst vooraan. Idealiter is de toegankelijke naam gelijk aan de zichtbare tekst. Gebruik niet twee keer dezelfde alt-tekst voor de twee afbeeldingen in één link.

#8 - De aangepaste focusindicator heeft te weinig contrast

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit:

De website heeft inmiddels een eigen toetsenbord-focusindicator, waardoor de toetsenbordfocus weer zichtbaar is. Op interactieve elementen op een witte achtergrond is die focusindicator een oranje (#FF7600) rand met een contrast van 2,7:1. Dat is te laag.

Oplossing:

Pas de kleur van de focusindicator aan, zodat het contrast met de aangrenzende achtergrond minimaal 3,0:1 is.

#9 - De aangepaste focusindicator heeft onvoldoende kleurcontrast

Op de link "Naar alle berichten" wordt een aangepaste focusindicator gebruikt: een oranje (#FF7600) achtergrond op de witte pagina-achtergrond. Het contrast tussen die kleuren is 2,7:1.

Voor deze link wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie die met CSS is toegevoegd. Voor de standaard focusindicator gelden geen contrasteisen, omdat bezoekers die zelf kunnen aanpassen. Bij een met CSS aangepaste indicator kan dat niet meer, en daarom gelden de contrasteisen dan wél.

Hetzelfde probleem speelt op de pagina https://rijnlandroute.nl/over/informatiecentrum/.

Oplossing:

Zorg dat het contrast van de aangepaste focusindicator minimaal 3,0:1 is.

#10 - Onlogische leesvolgorde van artikelen

In de artikelen onder "Laatste nieuws" is de volgorde van de HTML-elementen niet logisch: links staan boven de koppen. De huidige volgorde is link met afbeelding, kop, tekst.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Hetzelfde probleem speelt op de pagina https://rijnlandroute.nl/over/informatiecentrum/. Een vergelijkbaar probleem zie je in de artikelen op https://rijnlandroute.nl/?s=route en in de artikelen onder "Gerelateerde berichten" op https://rijnlandroute.nl/informatiebijeenkomsten-werkzaamheden-n206-europaweg/.

Oplossing:

Plaats alle inhoud die bij een bepaalde kop hoort, in de code onder die kop. Dat zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

#11 - De namen van de links beschrijven hun bestemming niet duidelijk

Onder de sectie "Route voor iedereen" hebben de links toegankelijke namen die de bestemming niet goed beschrijven. De link met de zichtbare tekst "Afgerond: N206 Tjalmaweg" heeft bijvoorbeeld de toegankelijke naam "RijnlandRoute-Tjalmaweg-Torenvlietbrug-dark2", die uit een aria-label komt. Een blinde bezoeker weet daardoor niet waar deze links naartoe leiden.

Daarnaast voldoet dit niet aan SC 2.5.3. Als de zichtbare tekst van een link niet in de toegankelijke naam voorkomt, kan de link niet met spraakbediening worden bediend. De bezoeker spreekt dan de zichtbare tekst uit, maar die activeert de link niet.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. Pas in dit geval het aria-label aan, zodat de zichtbare tekst erin staat.

#12 - De huidige pagina is alleen visueel aangegeven

In het hoofdmenu in de header heeft de actieve link "Nieuws" een ander uiterlijk, maar dat onderscheid staat niet in de code. Bezoekers die de pagina laten voorlezen, krijgen deze informatie daardoor niet.

Oplossing:

Zorg voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers het kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link. Andere oplossingen zijn ook mogelijk.

#13 - De relatie tussen links in een groep is niet in HTML vastgelegd

Er is een groep links die visueel als groep wordt gepresenteerd, maar die groepering staat niet in de HTML-structuur. Het gaat om de links "Volgende bericht" en "Vorige bericht". Hetzelfde probleem speelt bij de social-medialinks boven de sectie "Gerelateerde berichten".

Oplossing:

Neem de elementen op in een ul- of nav-element.

#14 - De volgorde van de toetsenbordfocus is niet logisch

Onder "Gerelateerde berichten" staat een carrousel. Als de toetsenbordfocus in de carrousel komt, blijft de focus tussen de links binnen de carrousel rondgaan en gaat niet door naar de volgende interactieve elementen op de pagina. Daardoor kunnen toetsenbordgebruikers niet normaal verder navigeren. Dit is geen logische focusvolgorde.

Oplossing:

Zorg dat de toetsenbordfocus de carrousel in en uit kan, in een logische navigatievolgorde.

#15 - Een onzichtbaar element krijgt toetsenbordfocus

Onder "Geef een reactie" staat een formulier. Na het selectievakje komt de toetsenbordfocus op een onzichtbare link met de toegankelijke naam "Privacybeleid".

Oplossing:

Zorg dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

#16 - Het contrast van de placeholder-tekst is kleiner dan 4,5:1

Onder "Geef een reactie" staat een formulier met invoervelden. De grijze (#A0A0A0) placeholder-tekst op de witte achtergrond heeft een contrast van 2,6:1.

Oplossing:

Zorg dat de placeholder-tekst een contrast van minstens 4,5:1 met de achtergrond heeft.

#17 - Bezoekers die inzoomen tot 200% kunnen niet meer alle tekst lezen

Op een scherm van 1280 bij 1024 pixels en ingezoomd tot 200% verdwijnen de link en de tekst van de kruimelpaden (breadcrumbs).

Oplossing:

Zorg dat alles blijft werken en leesbaar is als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

#18 - Bezoekers die inzoomen tot 400% kunnen niet meer alle tekst lezen

Op een scherm van 1280 bij 1024 pixels en ingezoomd tot 400% gaat een deel van de tekst in de tabel onder "Presentatie en informatiemarkt" verloren: "Avondbijeenkomst", "inloop" en "situatie".

Oplossing:

Zorg dat alles blijft werken en leesbaar is als je inzoomt tot 400% op een scherm van 1280 bij 1024 pixels.

#19 - Een link heeft geen tekst, waardoor het linkdoel onbekend is

Er zijn links zonder inhoud, waardoor het linkdoel niet vast te stellen is. Zie de links met de zichtbare tekst "Kaart", "Informatiecentrum", "360 graden beelden" en andere. Een blinde bezoeker weet daardoor niet waar de link naartoe leidt.

Oplossing:

Geef de link inhoud. Dat kan op twee manieren:

• Tekst toevoegen aan het a-element: voeg beschrijvende tekst toe binnen het element.
• aria-label gebruiken: voeg het aria-label-attribuut toe aan de link met een beknopte beschrijving van de bestemming.

Zorg dat alle links een duidelijk linkdoel hebben.

#20 - De linktekst is niet duidelijk genoeg

De afbeeldingen onder de tekst "Nadat de N434 met Corbulotunnel op 5 juli ..." werken als links en openen een schermvullende weergave van de afbeelding. De toegankelijke namen van deze links beschrijven niet wat de links doen, bijvoorbeeld "infocentrum-17". Zulke namen zijn betekenisloos en maken niet duidelijk dat de link een grote afbeelding opent.

Hetzelfde probleem speelt op andere pagina's. Op https://rijnlandroute.nl/n206-europaweg/planning/ bij de links onder de kop "Bouwfases schematisch op kaart". En op https://rijnlandroute.nl/over/geschiedenis/ bij de links in de uitklapbare onderdelen (accordions) met verborgen inhoud.

Oplossing:

Geef informatie over het gedrag van de link. Dat kan op twee manieren:

• Verborgen tekst toevoegen: voeg beschrijvende tekst toe aan het a-element, zoals "opent een grote weergave", die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).
• aria-haspopup="dialog" gebruiken: voeg het attribuut aria-haspopup met de waarde dialog toe aan het a-element, om aan te geven dat de link een grote weergave opent.

#21 - Een aria-label overschrijft de alt-tekst van de afbeelding

Nieuwe bevinding als gevolg van het oplossen van een bevinding uit de vorige audit:

De afbeeldingen onder de tekst "Nadat de N434 met Corbulotunnel op 5 juli ..." hebben inmiddels een alt-attribuut met de tekst "Bezoekers in informatiecentrum, opent een grote weergave". Maar het aria-label-attribuut overschrijft die tekst met bijvoorbeeld "infocentrum-17". Daardoor krijgt de schermlezer alsnog een betekenisloze naam te horen.

Oplossing:

Verwijder het aria-label-attribuut, of vervang de tekst erin door een betekenisvolle tekst die het doel van de link beschrijft.

#22 - De staat van het submenu wordt niet doorgegeven aan de schermlezer

De afbeeldingen onder de tekst "Nadat de N434 met Corbulotunnel op 5 juli ..." openen een dialoogvenster. Bovenin dat venster staan pictogrammen die als knoppen werken. De knop om de inhoud te delen heeft een submenu, maar een blinde bezoeker krijgt niet door of dat submenu open of dicht staat.

Hetzelfde probleem speelt op https://rijnlandroute.nl/n206-europaweg/planning/ in het dialoogvenster onder de kop "Bouwfases schematisch op kaart" en op https://rijnlandroute.nl/over/geschiedenis/ in het dialoogvenster bij de links in de uitklapbare onderdelen (accordions).

Oplossing:

Gebruik hiervoor het aria-expanded-attribuut, dat meebeweegt met de staat van het submenu.

#23 - Het submenu krijgt niet direct toetsenbordfocus

In het dialoogvenster dat de afbeeldingen openen, opent de deelknop een submenu. De toetsenbordfocus gaat naar een ander element voordat die de items in het submenu bereikt. Dat is geen logische focusvolgorde; de focus moet direct naar het submenu gaan.

Hetzelfde probleem speelt op https://rijnlandroute.nl/n206-europaweg/planning/ in het dialoogvenster onder de kop "Bouwfases schematisch op kaart" en op https://rijnlandroute.nl/over/geschiedenis/ in het dialoogvenster bij de links in de uitklapbare onderdelen (accordions).

Oplossing:

Zorg dat de toetsenbordfocus direct naar de submenu-items gaat zodra een submenu wordt geopend.

#24 - Video bevat tekst of logo's waarvoor geen alternatief is

In de sectie "Virtuele rondleidingen" staan video's met tekst en logo's op verschillende momenten. De video onder "De tunnelboormachine: deel 1" bevat bijvoorbeeld tekst en logo's rond 0:01, 1:46 en 1:49. Er is geen media-alternatief en geen audiodescriptie. Die visuele informatie is daardoor niet toegankelijk voor blinde bezoekers.

De video's onder "De tunnelboormachine: deel 2" en "De tunnelboormachine: deel 3" tonen mensen en gebeurtenissen met betekenisvolle visuele informatie. Ook die informatie is niet toegankelijk voor blinde bezoekers. Een audiodescriptie die de belangrijke visuele inhoud beschrijft (zoals handelingen, mensen en scenes), moet synchroon met de video worden aangeboden.

Hetzelfde probleem speelt op https://rijnlandroute.nl/n206-europaweg/planning/ bij de video onder de kop "Video werkwijze".

Oplossing:

Voor succescriterium 1.2.3 kun je dit oplossen met een geschreven tekst (media-alternatief). Om aan succescriterium 1.2.5 te voldoen, moet je een audiodescriptie toevoegen die de visuele elementen in de video beschrijft, zoals namen, functies, logo's en teksten.

#25 - De huidige pagina is alleen visueel aangegeven

Er is een groep navigatielinks, zoals "Over" en "Kaart". De actieve link "Over" heeft een ander uiterlijk, maar dat onderscheid staat niet in de code. Bezoekers die de pagina laten voorlezen, krijgen deze informatie daardoor niet.

Hetzelfde probleem speelt op https://rijnlandroute.nl/n206-europaweg/planning/ bij de links "Planning" en "N206 Europaweg" in de header, op https://rijnlandroute.nl/n434-corbulotunnel/ bij de links "Over" en "Afgerond" in de header, en op https://rijnlandroute.nl/n434-corbulotunnel/tunneltechnische-installaties/ bij de links "Tunneltechnische installaties" en "Afgerond" in de header.

Oplossing:

Zorg voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers het kunnen begrijpen. Voeg bijvoorbeeld aria-current="page" toe aan de actieve link "Over" op deze pagina. Voor de links in de header kun je bijvoorbeeld aria-current="true" gebruiken. Andere oplossingen zijn ook mogelijk.

#26 - Onlogische leesvolgorde van artikelen

In de artikelen, bijvoorbeeld onder de kop "Lammebrug", is de volgorde van de HTML-elementen niet logisch: afbeeldingen en teksten staan boven de koppen. De huidige volgorde is afbeelding, tekst, kop, tekst.

Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Plaats alle inhoud die bij een bepaalde kop hoort, in de code onder die kop. Dat zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

#27 - De visuele structuur van een alinea staat niet in de tags

Onder de kop "Corbulotunnel N434" staat een alinea tekst. In de tags is die alinea opgemaakt met meerdere P-tags. Hetzelfde probleem speelt bij andere alinea's. De visuele structuur moet terugkomen in de tags: als tekst visueel uit één alinea bestaat, hoort daar ook één P-tag bij.

Oplossing:

Zorg dat de alinea in één enkele P-tag staat.

#28 - Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn er meerdere koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld "1 Dwarsverbindingen", "2 Hulpdienstpaneel", "3 Hulppostkasten" en andere. Daardoor verschilt de visuele informatiestructuur van de structuur in de tags.

Oplossing:

Vervang de P-tag door een H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

#29 - De alt-tekst van een afbeelding klopt niet

Onderaan de pagina staat een logo met de volledige tekst "provincie Zuid-Holland COMOL5", maar het tekstalternatief is "Logo Province Zuid Holland". Niet alle tekst die in het logo te zien is, staat dus in het tekstalternatief. Dat hoort wel, zodat bezoekers die het plaatje niet kunnen zien ook precies weten wat er staat.

Oplossing:

Pas de alt-tekst aan, zodat de volledige tekst van het logo erin staat.

#30 - Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn er meerdere koppen die niet als kop zijn gemarkeerd. Zie bijvoorbeeld "Toelichting partiële herziening provinciaal inpassingsplan RijnlandRoute - N206 Europaweg", "Hebben de wijzigingen verkeerskundige gevolgen?", "Hebben de wijzigingen andere effecten tot gevolg?" en andere. Daardoor verschilt de visuele informatiestructuur van de structuur in de tags.

Oplossing:

Vervang de P-tag door een H-tag, zodat de tag-structuur gelijk is aan de visuele structuur.

#31 - Er is een lege kop-tag in het pdf-document

Op pagina 3 van het pdf-document staat een lege kop-tag. Dat is verwarrend voor een blinde bezoeker die van kop naar kop navigeert.

Oplossing:

Verwijder het element of voeg er inhoud aan toe.

#32 - De lijst is niet op de juiste manier gemarkeerd

Op pagina 1 en 2 van het pdf-document staat een lijst van 4 items. In de tags is die lijst opgemaakt met 4 L-tags. Inhoud die eruitziet als een lijst, moet ook in de tags zo gemarkeerd zijn. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers, en kondigt de schermlezer het aantal items aan.

Oplossing:

Markeer de lijst met L- en Li-tags.