Er is geen skiplink aanwezig

Deze pagina heeft geen skiplink.

Er moet een manier zijn om delen van een pagina over te slaan, zoals het navigatiemenu en andere elementen die op meerdere pagina’s terugkomen. Je gebruikt hier een skiplink voor. Daarmee kun je vaste blokken met herhalende inhoud overslaan. Een skiplink moet de eerste link op de pagina zijn. Deze link mag verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt.

Oplossing:

Voeg een skiplink toe waarmee bezoekers herhalende delen van de pagina over kunnen slaan.

Zorg dat de skiplink:

• de eerste link op de pagina is;
• visueel verborgen is, maar zichtbaar wordt bij toetsenbordfocus;
• naar de hoofdcontent van de pagina springt als de bezoeker de link activeert.

Elementen die toetsenbordfocus krijgen vallen onder sticky header

Wanneer de website wordt verkleind naar een lagere resolutie, bedekt een vastgezette (sticky) header een deel van de paginainhoud. Terwijl interactieve elementen, zoals de link “Lees verder” onder “Nieuws”, nog steeds toetsenbordfocus krijgen, wordt de focusindicator verborgen achter de vastgezette header. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.

Zie deze sticky header ook op andere pagina’s: https://staatvanrijnmond.nl/mosaic/moi-dashboard/lucht, https://staatvanrijnmond.nl/mosaic/participanten-dashboard/basisinformatie en andere.

Oplossing:

Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen, elementen herpositioneren of de header/footer dynamisch verkleinen op kleinere schermen.

Er is een toetsenbordval

Wanneer een bezoeker op een klein scherm met het toetsenbord navigeert en het mobiele menu opent, kan deze vast komen te zitten binnen dit menu. Toetsenbordgebruikers kunnen niet uit het menu navigeren naar andere interactieve elementen op de pagina. Door deze toetsenbordval kunnen bezoekers die alleen een toetsenbord gebruiken niet meer vrij door de pagina navigeren. Het gaat bijvoorbeeld om mensen met een motorische of visuele beperking. Dit maakt de website minder bruikbaar en minder toegankelijk.

Oplossing:

Zorg ervoor dat het altijd mogelijk is om met het toetsenbord de focus weer uit het menu te halen.

Onzichtbaar element krijgt toetsenbordfocus

Op een klein scherm komt de toetsenbordfocus terecht op een onzichtbaar interactief element na de menuknop. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

De knop heeft geen goede tekstalternatief

In de header van de website bevindt zich een zoekknop met een vergrootglaspictogram en de tekstalternatief “Open zoeken”. Deze knop opent de zoekbalk en verandert van uiterlijk naar de sluitknop. De functie verandert, maar het tekstalternatief blijft hetzelfde: “Open zoeken”.

Oplossing:

Zorg ervoor dat de toegankelijke naam van de knop verandert wanneer de functie van de knop verandert.

De status van het element wordt niet aangekondigd aan schermlezers

Wanneer de zoekknop in de header wordt geopend, verschijnt de zoekbalk. De zoekbalk staat boven de zoekknop in de code, en schermlezers worden niet op de hoogte gebracht dat dit element nu zichtbaar is. Wijzigingen in de status van dergelijke verborgen elementen moeten worden aangekondigd aan ondersteunende technologie.

Oplossing:

Zorg ervoor dat schermlezergebruikers op de hoogte worden gebracht van de status van de zoekknop. Dit kan worden gedaan door de knop een aria-expanded-attribuut te geven met de waarde “true”. Zorg ervoor dat dit aria-expanded-attribuut al aanwezig is wanneer de pagina wordt geladen, met de waarde “false”.

Dashboard pagina's

Zie pagina's:

• https://staatvanrijnmond.nl/mosaic/moi-dashboard/lucht,
• https://staatvanrijnmond.nl/mosaic/moi-dashboard/bereikbare-regio,
• https://staatvanrijnmond.nl/mosaic/moi-dashboard/verkeersveiligheid,
• https://staatvanrijnmond.nl/content/handleiding,
• https://staatvanrijnmond.nl/mosaic/participanten-dashboard/basisinformatie,
• https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio.

Op deze pagina’s staan elementen (grafieken, kaarten) die worden geleverd door een applicatie van een derde partij. Binnen de scope van deze audit worden slechts enkele toegankelijkheidsproblemen beschreven om de aard van de problemen te illustreren. Er is geen volledige audit van deze component uitgevoerd, aangezien deze is geïmplementeerd als een oplossing van een derde partij en buiten de controle van het ontwikkelteam van de website valt.

4.1.2 De knop heeft aria-haspopup, maar de pop-up mist de rol menu

In de header van deze pagina bevindt zich een knop met het label “Thema’s.” Deze knop opent een uitklapmenu. De knop heeft het attribuut aria-haspopup, maar het uitklapmenu heeft niet de rol menu. De aria-haspopup-status informeert gebruikers van ondersteunende technologie dat er een pop-up verschijnt. De rol van de pop-upcontainer geeft het type pop-up aan en zorgt ervoor dat ondersteunende technologie dit correct kan aankondigen. Zonder de rol menu begrijpen schermlezergebruikers niet dat ze met een menu interageren en weten ze niet welke toetsenbordinteracties of navigatie ze kunnen verwachten.

Oplossing:

Voeg role="menu" toe aan de dropdowncontainer.

Menuknop voor het mobiele menu heeft geen goed tekstalternatief

In de header van deze pagina bevindt zich een knop met het label “Thema’s.” Deze knop opent een uitklapmenu. In dit uitklapmenu worden submenu’s geopend door pijltjestoetsknoppen met toegankelijke namen “Toon onderliggende thema’s.”

Deze tekst beschrijft de functie van de knop niet voldoende, omdat het niet aangeeft van welk thema de onderliggende thema’s getoond worden. Bovendien verandert deze functie als het menu geopend is. Dan wordt de knop namelijk gebruikt om het menu weer te sluiten. Ook deze verandering van functie is niet terug te zien in de toegankelijke naam van de knop. Als een knop uit een afbeelding bestaat, moet het tekstalternatief van die afbeelding niet beschrijven wat op de afbeelding te zien is, maar wat de functie van de knop is. En als die functie verandert, moet het tekstalternatief mee veranderen (“menu openen" of "menu sluiten").

Oplossing:

Voeg een toegankelijke naam toe die de functie van de knop beschrijft, en zorg dat deze mee verandert als de functie van de knop verandert. Om de status aan te geven kan ook een aria-expanded-attribuut gebruikt worden.

Staat van submenu niet doorgegeven aan schermlezer

In de header van deze pagina bevindt zich een knop met het label “Thema’s.” Deze knop opent een uitklapmenu. In dit uitklapmenu worden submenu’s geopend door pijltjestoetsknoppen, maar een blinde bezoeker krijgt geen informatie over of het submenu geopend of gesloten is.

Als er een element is dat een submenu kan tonen of verbergen, moet ondersteunende software kunnen bepalen wat de status van dat submenu is (zichtbaar of verborgen).

Oplossing:

Je kunt hiervoor het aria-expanded-attribuut gebruiken.

De rand van de knop heeft te weinig contrast wanneer deze is geselecteerd

In de header van deze pagina staat een knop met het label “Rijnmond”. In de gefocuste toestand heeft deze knop een blauwgroene rand (#01A9B5) met een contrastverhouding van 2,9:1. Dit is te laag; de verhouding moet minimaal 3,0:1 zijn.

Hetzelfde probleem (blauwgroene rand ten opzichte van de witte achtergrond) doet zich voor bij het schakelaarelement naast “Vergelijk met” wanneer dit is geactiveerd.

Oplossing:

Zorg dat het contrast tussen focusindicator en de achtergrond minimaal 3,0:1 is.

Icoon heeft te laag contrast

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een dialoogvenster. De sluitknop in dit venster heeft een blauwgroene kleur (#96D3D9) op een witte achtergrond. De contrastverhouding is te laag: 1,7:1. Hierdoor kunnen bezoekers met een visuele beperking of kleurenblindheid het icoon niet (goed) zien. Er is wel een toegankelijk alternatief in de vorm van de knop met de tekst “Sluiten”.

Oplossing:

Gebruik een kleurencombinatie die voldoende contrast heeft. Het contrast dient minimaal 3,0:1 te zijn.

Kleurcontrast van tekst is te laag (tekst kleiner dan 19px)

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een dialoogvenster. In dit venster staat groene tekst (#01A9B5) op een witte achtergrond. De contrastverhouding is te laag: 2,9:1.

Oplossing:

Deze tekst is kleiner dan 19px, daarom moet het contrast met de achtergrondkleur minimaal 4,5:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Knop heeft geen code die aangeeft dat er een popup opent

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een dialoogvenster, maar deze functionaliteit wordt niet aangegeven in de code.

Oplossing:

• Voeg het attribuut aria-haspopup="dialog" toe aan de knop. Hierdoor weet hulpsoftware dat je met de knop een dialoogvenster opent.

Dialoogvenster heeft niet de juiste rol

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een modaal dialoogvenster, maar een schermlezer herkent dit venster niet als een dialoogvenster. Schermlezers kunnen hierdoor niet doorgeven welke inhoud het dialoogvenster heeft.

Oplossing:

Voeg een role=”dialog” aan het dialoogvenster toe.

Tabbladen hebben niet de juiste ARIA-rollen

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een modaal dialoogvenster. Wanneer de knop “Gemeente” wordt geopend, verschijnen er twee knoppen: “Lijst” en “Kaart”. Deze knoppen gedragen zich als tabbladen. Wanneer een bezoeker op een tabtitel klikt, verschijnt er nieuwe inhoud. De vereiste rollen ontbreken.

Oplossing:

Voeg de juiste rollen toe. Je leest er meer over op https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Knop heeft geen code die aangeeft dat er een popup opent

Oplossing:

• Voeg het attribuut aria-haspopup="dialog" toe aan de knop. Hierdoor weet hulpsoftware dat je met de knop een dialoogvenster opent.
• Met het aria-expanded-attribuut kun je de toestand van het dialoogvenster (open of gesloten) aangeven ("true" of "false”). Let op: dit attribuut werkt alleen als beide acties (openen en sluiten) door dezelfde knop worden uitgevoerd.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

In de header van deze pagina staat een knop met het label “Rijnmond”. Deze knop opent een modaal dialoogvenster. Wanneer de knop “Gemeente” wordt geopend, verschijnen er twee knoppen: “Lijst” en “Kaart”. Wanneer “Kaart” wordt geopend, verschijnt de kaart. Onder de kaart staat een knop met een pictogram van een kaartmarkering. Deze knop opent een dialoogvenster met de titel “Gebied zoeken”. Dit dialoogvenster mist zowel een correcte ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg role="dialog" toe aan het dialoogvenster, verwijs naar de kop met aria-labelledby, en gebruik aria-describedby om te verwijzen naar een element dat een beschrijving van de inhoud geeft.

De suggesties voor de zoekfunctie hebben niet de juiste rol

In de header van deze pagina staat een knop “Rijnmond”. Deze knop opent een modaal dialoogvenster. Wanneer de knop “Gemeente” wordt geopend, verschijnen er twee knoppen: “Lijst” en “Kaart”. Wanneer “Kaart” wordt geopend, verschijnt de kaart. Onder de kaart bevindt zich een knop met een pictogram van een kaartmarkering. Deze knop opent een dialoogvenster met de titel “Gebied zoeken”.

De zoekbalk in dit venster biedt tijdens het typen suggesties in een dropdownlijst en fungeert als een combobox. De vereiste ARIA-rol ontbreekt echter.

Oplossing:

Om deze zoekbalk toegankelijk te maken, voeg je het volgende toe:

• role="combobox": voeg dit attribuut toe aan het invoerveld om aan te geven dat het een keuzelijst is.
• aria-expanded: voeg dit attribuut toe aan het invoerveld om de status van de suggestielijst aan te geven. Stel aria-expanded="true" in als de lijst zichtbaar is en aria-expanded="false" als deze verborgen is.
• er zijn meer attributen die nodig zijn om dit element toegankelijk te maken. Zie https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ .

Deze attributen helpen hulpsoftware om de zoekbalk correct te herkennen en te gebruiken als een keuzelijst.

List heeft een overbodig rolmenu

Op deze pagina staan naast de kruimelpad knoppen met pictogrammen voor delen en downloaden. Deze knoppen hebben submenu’s. Deze submenu’s hebben role="menu" op het ul-element en role="menuitem" op de li-elementen. Deze ARIA-rollen zijn in deze context onnodig en mogelijk problematisch.

Er zou veel moeten worden aangepast om het kloppend te krijgen, terwijl de lijst op zichzelf al toegankelijk is, zonder deze rol. Zo moeten de links op het eerste niveau nu role="menubar" krijgen, en de submenu’s role="menu". Doordat de submenu’s nu niet deze rol hebben, gaat er ook iets mis met de links in het submenu. De li-elementen hebben namelijk nu wel role="menuitem", maar het ul-element van het submenu heeft niet role="menu". Daardoor heb je nu een ul-element zonder li-elementen. Van de li-elementen is de standaard rol van ‘lijst item’ nu namelijk veranderd in menuitem.

Oplossing:

Het is beter om role="menu" en role="menuitem" hier achterwege te laten. Die zijn bedoeld voor andere, meer complexe toepassingen en niet voor een standaard menu op een website of een klein uitklapbaar element.

Een betere oplossing is om hier gewoon een geneste lijst (ul) te gebruiken. Bij de links met een uitklapmenu moet wel aria-haspopup="true" worden gebruikt. Als het uitklapmenu open is kan aria-expanded="true" gebruikt worden. Dit attribuut moet op false worden gezet als het menu gesloten is.

Op https://www.w3.org/WAI/ARIA/apg/patterns/menu/ staat wat er nodig is om een toepassing met role="menubar" te bouwen.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op onzichtbare interactieve elementen vóór de elementen in de footer. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Oplossing:

Zorg dat alleen elementen die zichtbaar zijn toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch is.

Volgorde toetsenbordfocus is niet logisch

Op deze pagina opent de knop “Meer info” extra informatie. De toetsenbordfocus verplaatst zich niet naar deze informatie, maar naar de downloadknop. Deze volgorde van toetsenbordfocus is niet logisch.

Als bezoekers met het toetsenbord door de website navigeren, moeten interactieve elementen zoals knoppen en links op een logische volgorde toetsenbordfocus krijgen. Logisch betekent dat het aansluit op de volgorde die de elementen hebben in de visuele vormgeving. Anders kunnen bezoekers die alleen een toetsenbord gebruiken, minder makkelijk door de pagina navigeren. Het gaat dan bijvoorbeeld om mensen met een motorische of visuele beperking of een leesstoornis.

Oplossing:

Zorg dat het activeren van de knop de toetsenbordfocus verplaatst naar het volgende logische element in de reeks.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

Op deze pagina bevindt zich in elke grafiek een knop met een pictogram van een vergrootglas. Deze knop opent een dialoogvenster. Dit dialoogvenster mist zowel een correcte ARIA-rol als een toegankelijke naam.

Schermlezers kunnen hierdoor niet doorgeven dat het om een dialoogvenster gaat, en wat de inhoud ervan is.

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Bezoekers die inzoomen tot 200% kunnen niet meer alle functies gebruiken

Wanneer de tekst op deze pagina tot 200% wordt ingezoomd, is de knop met het vergrootglaspictogram in de grafieken niet zichtbaar.

Oplossing:

Zorg dat alles nog werkt als een bezoeker inzoomt tot 200% op een scherm van 1280 bij 1024 pixels.

Interactieve elementen zijn niet toegankelijk met het toetsenbord

Op deze pagina zijn interactieve elementen in de kaart niet toegankelijk via het toetsenbord. De kaart kan zich bevinden onder “Kaartviewer bereikbaar” of “Kaartviewer lucht”.

Voorbeelden hiervan zijn een tooltip naast “Staat van Rijnmond lucht”, een zoekbalk en knoppen om door de kaart te navigeren. Toetsenbordgebruikers kunnen deze elementen niet bereiken of ermee interageren.

Oplossing:

Zorg ervoor dat de interactieve elementen ook toegankelijk zijn voor bezoekers die met het toetsenbord navigeren.

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina hebben interactieve elementen op de kaart toegankelijke namen in het Engels.

Deze labels worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Oplossing:

Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Knoppen hebben niet de juiste toegankelijke rol

Op deze pagina hebben interactieve elementen in de kaart niet de juiste toegankelijke rol, bijvoorbeeld de knoppen voor inzoomen, afdrukken en verplaatsen.

Elk HTML-element heeft standaard een rol. Dit betekent dat het element bepaalde eigenschappen en functies heeft om informatie aan de bezoeker te geven of om informatie van de bezoeker te ontvangen. De rol bepaalt dus wat het element doet. Schermlezers en andere hulpmiddelen moeten de correcte rol van elk element op een webpagina kennen. Zo kunnen ze op een slimme manier met het element omgaan en aan de bezoeker uitleggen wat het element doet.

Oplossing:

Zorg dat de knop de juiste toegankelijke rol heeft. Gebruik bij voorkeur het button-element.

Link naar pagina: https://staatvanrijnmond.nl/

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina verwijst de link “Ga naar thema” onder de kop “Gezonde regio” naar https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio.

Onder de kop “Klimaatbestendige regio” en onder de volgende koppen in de sectie “Thema’s” is een link met dezelfde linktekst aanwezig, maar deze verwijst naar een andere bestemming. Dit geldt voor alle links in deze sectie met dezelfde linktekst.

Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

Linktekst is niet duidelijk genoeg

Op deze pagina bevatten meerdere links onder “Nieuws” de vage linktekst “Lees verder”. Deze tekst beschrijft de bestemming van de link niet duidelijk genoeg, wat verwarring kan veroorzaken, vooral voor gebruikers met cognitieve beperkingen of gebruikers van schermlezers.

Linkteksten die meerdere keren op een pagina voorkomen of nietszeggend zijn (zoals ‘lees meer’), geven de bezoeker geen duidelijke aanwijzingen over hun bestemming.

Oplossing:

Zorg dat duidelijk is waar een link naartoe leidt, bijvoorbeeld door een tekst als ‘lees meer’ aan te vullen met de paginatitel. Als visueel duidelijk is bij welk onderdeel de link hoort, kan deze aanvullende tekst visueel verborgen worden. Bijvoorbeeld: ‘lees meer (over het project)’ of ‘lees meer (in onze blog)’.

Link naar pagina: https://staatvanrijnmond.nl/rapportages

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina opent de link “Download het rapport” onder de kop “CO2 Monitor Rotterdam 2023” een pdf-bestand. Onder de volgende kop “Uitleg scope benaderingen voor CO2-uitstoot” opent een link met dezelfde tekst een ander pdf-bestand. Hetzelfde geldt voor de volgende links “Download het rapport” op deze pagina.

Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn. In dit geval heeft elke link een uniek title-attribuut, maar de toegankelijke naam wordt berekend op basis van de inhoud van de link.

Link naar pagina: https://staatvanrijnmond.nl/content/over-staat-van-rijnmond

Problemen in de header en andere algemene knelpunten zijn al beschreven onder "Algemene knelpunten"

Link naar pagina: https://staatvanrijnmond.nl/news/Help-ons-Staat-van-Rijnmond-te-verbeteren!/34

Problemen in de header en andere algemene knelpunten zijn al beschreven onder "Algemene knelpunten"

Link naar pagina: https://staatvanrijnmond.nl/mosaic/moi-dashboard/lucht

Problemen in de header en andere algemene knelpunten zijn al beschreven onder "Algemene knelpunten"

Link naar pagina: https://staatvanrijnmond.nl/mosaic/moi-dashboard/bereikbare-regio

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina heeft de decoratieve afbeelding op de achtergrond van de sectie “Bereikbare regio” het tekstalternatief “afbeelding_bereikbare regio”.

Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Je kunt dit op verschillende manieren bereiken:

• Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
• Voor svg-elementen zorg je dat ze óf een leeg title-element hebben, óf verborgen zijn via aria-hidden=”true”.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Deze pagina bevat kleurcombinaties van tekst en achtergrond met onvoldoende contrast. Zie de witte tekst op de gele achtergrond (#F1A33C) in de sectie “Toekomstbestendig laadplekken” (contrastverhouding van 2,1:1); de witte tekst op de blauwe achtergrond (#0087AC) in de secties “Beleid” en “Verkeersveiligheid en hinder als opgave” (contrastverhouding van 4,1:1); en de blauwe linkteksten (#0000EE) op de blauwe achtergrond onder “Beleid” (contrastverhouding van 2,3:1).

Oplossing:

Voor grote tekst moet de contrastverhouding minimaal 3,0:1 zijn, en voor normale tekst minimaal 4,5:1. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

In legenda bij grafiek is alleen kleur gebruikt

Op deze pagina staan interactieve infographics. In deze slides wordt kleur als enige manier gebruikt om informatie over te brengen. Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden, zie je welke balk / lijn bij welke categorie in de legenda hoort. Dit probleem komt vaker voor in andere grafieken, bijvoorbeeld op pagina’s https://staatvanrijnmond.nl/mosaic/moi-dashboard/verkeersveiligheid, https://staatvanrijnmond.nl/content/handleiding en https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio.

Oplossing:

Je lost dit op door naast kleur bijvoorbeeld ook datalabels of verschillende soorten arcering te gebruiken.

Het type content in het iframe is niet beschreven in het title-attribuut

Deze pagina bevat een iframe met het title-attribuut "geen beschrijving beschikbaar".

Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

Verander de tekst van het title-attribuut zodat duidelijk is welk type inhoud het iframe bevat, en waar het inhoudelijk over gaat.

Link naar pagina: https://staatvanrijnmond.nl/mosaic/moi-dashboard/verkeersveiligheid

Kleurcontrast tussen lijnen of balken in grafiek is niet voldoende

Op deze pagina staan grafieken. De grijze balk (#D7D7D7) heeft onvoldoende contrast met de witte achtergrond. De contrastverhouding is 1,4:1. De felgroene kleur (#90BE23) en de blauwe kleur (#00A9B5) in de grafiek “Verkeersongevallen binnen/buiten bebouwde kom” hebben ook onvoldoende contrast met de achtergrond. De contrastverhouding is 2,2:1 bij de groene kleur en 2,9:1 bij de blauwe kleur. Deze kleuren kunnen ook in andere grafieken voorkomen. Als er daarnaast ook een getal zichtbaar is, wordt die informatie beschouwd als een toegankelijke alternatieve weergave.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een grafiek minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.

Link naar pagina: https://staatvanrijnmond.nl/news/Nieuwe-indicatoren-in-2022/28

Gegevenstabel heeft geen kopcellen

Op deze pagina staat aan het einde van het artikel een gegevenstabel. De juiste opmaak ontbreekt.

Een gegevenstabel heeft een rij of kolom met koppen die gerelateerd zijn aan gegevens in de tabel. Alleen met de juiste opmaak kunnen schermlezers deze relatie aan de gebruiker overbrengen.

Oplossing:

Zet de koppen in th-elementen en de gegevens in td-elementen.

Link naar pagina: https://staatvanrijnmond.nl/faq/Algemeen

Huidige pagina alleen visueel aangegeven

Op deze pagina heeft in het menu onder “Veelgestelde vragen” de actieve link (naar de huidige pagina) een duidelijke visuele aanduiding, maar deze aanduiding is niet aanwezig in de code. Bezoekers die de pagina laten voorlezen, hebben daardoor geen toegang tot deze informatie.

Oplossing:

Zorg voor een andere manier om deze informatie over te dragen, zodat ook slechtziende of blinde bezoekers dit kunnen begrijpen. Voeg bijvoorbeeld aria-current="true" toe aan de actieve link. Andere opties zijn een h1-kop met dezelfde tekst als het menu-item, of het gebruik van de paginatitel (title).

Link naar pagina: https://staatvanrijnmond.nl/content/handleiding

De woorden ‘links’ of ‘rechts’ zijn gebruikt om een locatie op de pagina aan te duiden

Op deze pagina wordt in een instructie de term “links” of “rechts” gebruikt om de locatie van een element aan te geven. Voor bezoekers die de website in een indeling met één kolom bekijken, kunnen dergelijke instructies verwarrend of nutteloos zijn, omdat de visuele locatie van de elementen verschilt per schermgrootte of indeling.

Oplossing:

Vermijd in instructies het gebruik van termen die een locatie aangeven zoals ‘links’ en ‘rechts’ als de lay-out van de pagina kan veranderen. Gebruik in plaats daarvan meer context-specifieke beschrijvingen, zoals ‘boven de afbeelding’ of ‘onder de kop’, of geef alternatieve instructies voor andere weergaves.

Alternatieve tekst van een informatieve afbeelding is leeg

Op deze pagina staat onder het kopje 'Dashboard' een informatieve afbeelding met een leeg alt-attribuut.

Afbeeldingen die informatie overdragen moeten een tekstalternatief hebben. De alternatieve tekst mag dus niet leeg zijn. Hierdoor kan een schermlezer de informatie uit de afbeelding overbrengen aan een blinde bezoeker.

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut.

Link naar pagina: https://staatvanrijnmond.nl/mosaic/participanten-dashboard/basisinformatie

Contrast tussen focusindicator en achtergrond is te laag

Op deze pagina, onder “Bevolkingsdichtheid”, krijgen de zoom- en downloadknoppen een zwarte focusrand wanneer ze met het toetsenbord worden geselecteerd. Het contrast tussen deze focusrand en de blauwe achtergrond is 1,3:1.

Momenteel is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om de focus te zien.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Er is een toetsenbordval

Wanneer een bezoeker met het toetsenbord achterwaarts navigeert vanuit de footer, kan deze vast komen te zitten binnen de link “Meldingen” en het zoommenu in de sectie “Vertrek”. Toetsenbordgebruikers kunnen niet uit dit menu navigeren naar andere interactieve elementen op de pagina.

Door deze toetsenbordval kunnen bezoekers die alleen een toetsenbord gebruiken niet meer vrij door de pagina navigeren. Het gaat bijvoorbeeld om mensen met een motorische of visuele beperking. Dit maakt de website minder bruikbaar en minder toegankelijk.

Oplossing:

Zorg ervoor dat het altijd mogelijk is om met het toetsenbord de focus weer van deze elementen weg te halen.

Link naar pagina: https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio

Problemen in de header, grafieken en andere algemene kwesties zijn al beschreven onder ‘Algemene knelpunten’. Problemen met contrast en achtergrondafbeeldingen zijn beschreven in andere hoofdstukken.

Link naar pagina: https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio

Link naar PDF: generated on the page https://staatvanrijnmond.nl/mosaic/moi-dashboard/gezonde-regio

Decoratieve afbeeldingen hebben automatisch gegenereerde alt-tekst

In dit pdf-document is de decoratieve afbeelding op de achtergrond van de sectie “Gezonde Regio” onjuist getagd als figuur met de automatisch gegenereerde beschrijving “Afbeelding_gezonde regio”. Deze beschrijving voegt niets toe aan de pagina, want de afbeelding is decoratief. Daarom mag je hier niet de Figure-tag voor gebruiken.

Oplossing:

Verander de afbeeldingen in een artefact.

Informatieve afbeelding is als achtergrondafbeelding geplaatst

Pagina's 1 en 2 van dit pdf-document bevatten grafieken als artefacten.

Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen moeten via een Figure-tag worden geplaatst en een alternatieve tekst krijgen die de afbeelding duidelijk beschrijft.

Voor complexe afbeeldingen, zoals grafieken, infographics of diagrammen met veel informatieve inhoud, is alleen een alternatieve tekst niet voldoende; er is een lange tekstalternatief nodig.

Oplossing:

Voeg de afbeeldingen toe met de Figure-tag en geef ze een alternatieve tekst. Een korte beschrijving (alt-tekst) moet worden toegevoegd om de aanwezigheid en locatie van een meer gedetailleerde, lange beschrijving aan te geven. De lange beschrijving kan als tekst op dezelfde pagina worden geplaatst, maar ook op een andere pagina of in een downloadbaar bestand.

Grafieknummers zijn gemarkeerd als geïsoleerde waarden zonder context

Op pagina’s 1 en 2 van dit pdf-document staan grafieken. Elk getal in de grafiek (bijvoorbeeld 147, 109, 52) is afzonderlijk opgemaakt met div-tags, zonder logische samenhang, labels of context voor schermlezers.

Oplossing:

Zorg ervoor dat alle waarden uit de grafiek programmatisch worden gekoppeld aan hun betekenis en context voor schermlezers, of verberg ze in de code en neem ze op in de korte of lange beschrijving van de afbeelding.

Informatieve afbeeldingen hebben geen alt-tekst

Op pagina 2 van dit pdf-document, onder “Mate waarin de omgeving uitnodigt tot bewegen”, staat een informatieve afbeelding zonder tekstalternatief (alt-tekst).

Afbeeldingen die met de Figure-tag zijn geplaatst, moeten altijd een beschrijving (alt-tekst) hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen. Schermlezers lezen de alt-tekst voor, zodat blinde bezoekers ook alle informatie tot zich kunnen nemen. Omdat de alternatieve tekst nu ontbreekt, lezen schermlezers alleen “afbeelding” voor. Blinde bezoekers kunnen hierdoor het gevoel krijgen dat ze inhoud missen.

Voor complexe afbeeldingen zoals grafieken, infographics of diagrammen met veel informatieve inhoud is alleen een tekstalternatief (alt-tekst) niet voldoende; een lange beschrijving is nodig.

Oplossing:

Voeg alternatieve tekst en een uitgebreide beschrijving toe aan deze informatieve afbeelding.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat witte tekst die begint met “Waarom DCMR is opgericht: van crisis naar verbetering” op een oranje achtergrond (#F1A33C). De kleurcontrastverhouding is te laag: 2,1:1.

Oplossing:

Voor grote tekst moet de contrastverhouding minimaal 3,0:1 zijn, voor normale tekst minimaal 4,5:1.

Alleen kleur gebruikt in legenda bij grafiek

In dit pdf-document wordt op pagina’s 1 en 2 kleur als enig middel gebruikt om informatie over te brengen. Zie de legenda en de balken in de grafiek.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Kleurcontrast tussen lijnen of balken in grafiek is niet voldoende

In dit pdf-document wordt op pagina’s 1 en 2 in de grafieken een grijze kleur (#D7D7D7) gebruikt voor de balken. Het contrast tussen deze kleur en de witte achtergrond is onvoldoende. De contrastverhouding is 1,4:1.

Oplossing:

Zorg dat het contrast tussen informatieve elementen van een grafiek minimaal 3,0:1 is, zodat bezoekers ze van elkaar kunnen onderscheiden. Controleer of alle kleuren in de grafiek voldoende contrast hebben.

Link naar pagina:< https://staatvanrijnmond.nl/rapportages>

Link naar PDF: https://staatvanrijnmond.nl/handlers/ballroom.ashx?function=download&id=16

PDF-document heeft geen titel

Dit pdf-document heeft geen titel in de bestandseigenschappen.

Zelfs als er een titel op de eerste pagina staat, moet je in de PDF-instellingen ook een documenttitel instellen. Als je een pdf opent in een pdf-lezer (zoals Adobe Acrobat of een browser), zie je de bestandsnaam meestal bovenaan in de titelbalk, bijvoorbeeld document123.pdf. Maar als je een documenttitel in de pdf-metadata instelt, dan wordt die titel in plaats van de bestandsnaam getoond. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen. Zij kunnen dan snel en gemakkelijk zien of het document relevant is.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Beschrijving.
4. Vul in het veld Titel een beschrijvende titel in, bijvoorbeeld: "Rapport: Bevolkingscijfers 2023".
5. Klik op OK en sla het bestand op.

Structuur van pdf-document is niet in codes vastgelegd

Dit pdf-document bevat geen codes, waardoor de inhoud niet toegankelijk is voor schermlezers.

Bovendien kunnen wij de pdf hierdoor niet volledig onderzoeken. Het gaat om alle succescriteria die met de pdf-codelaag te maken hebben, zoals semantische koppen en alternatieve teksten bij afbeeldingen. Als je dit oplost, is het dus mogelijk dat er nieuwe toegankelijkheidsproblemen ontstaan die nu nog niet aan het licht zijn gekomen.

Oplossing:

Voeg codes toe aan het document die de structuur van het document weergeven.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat op pagina’s 1 en 2 groene tekst ( #77B82D) op een witte achtergrond. De kleurcontrastverhouding is te laag: 2,4:1.

Oplossing:

Voor grote tekst moet de contrastverhouding minimaal 3,0:1 zijn, voor normale tekst minimaal 4,5:1.

Alleen kleur gebruikt in legenda bij grafiek

In dit pdf-document wordt op pagina’s 3, 4, 9, 11, 13 en 14 in de grafieken kleur gebruikt om informatie over te brengen. Zie de legenda en de balken in de grafieken.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Link naar pagina: https://staatvanrijnmond.nl/contact

De kleur van de rand van het invoerveld heeft niet genoeg contrast

Op deze pagina staat een formulier met invoervelden. De contrastverhouding tussen de grijze rand (#D6D6D6) van deze velden en de achtergrond van de pagina is 1,5:1.

Oplossing:

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

Foutmelding is een instructie in plaats van een uitleg over de fout

Op deze pagina verschijnt in het formulier een foutmelding met de tekst “Een e-mailadres is verplicht” wanneer het formulier wordt verzonden zonder dat er inhoud is ingevuld.

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit.

Wanneer een bezoeker wel iets invoert in het e-mailveld, maar geen geldig e-mailadres, verschijnt de melding “Vul een geldig e-mailadres in, bijvoorbeeld john.smith@example.com”. Dit is echter een instructie in plaats van een foutmelding. Hetzelfde geldt voor andere invoervelden in dit formulier.

Oplossing:

Pas de foutmelding aan, zodat de bezoeker weet wat er fout is.

Link naar pagina: https://staatvanrijnmond.nl/search/

Problemen in de header en andere algemene knelpunten zijn al beschreven onder "Algemene knelpunten"

Link naar pagina: https://staatvanrijnmond.nl/news

Problemen in de header en andere algemene knelpunten zijn al beschreven onder "Algemene knelpunten"