Issue nr. 1 - Knoppen zonder toetsenbordbediening

In de header van de website zijn de volgende knoppen niet met het toetsenbord te bedienen: de knop met het deel-icoon met aria-label="Deel", de knop met het vlag-icoon met aria-label="Kies taal" en de knoppen in het taal-submenu, zoals de knop met aria-label="en".

De knoppen zijn niet bereikbaar via het toetsenbord. Daardoor worden de knoppen overgeslagen wanneer bezoekers met het toetsenbord navigeren. Interactieve elementen moeten volledig met het toetsenbord zijn te bedienen.

Oplossing:

Zorg ervoor dat de knoppen met het toetsenbord kunnen worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 2 - Submenu’s zonder toetsenbordbediening

In de header van de website tonen de links “Meetpunten” en “Data” submenu’s bij hover. Deze submenu’s verschijnen niet bij bediening met het toetsenbord.

Oplossing:

Zorg ervoor dat de extra content ook met het toetsenbord kan worden geopend.

Issue nr. 3 - Hover-content niet sluitbaar

Wanneer met de muis over de links “Meetpunten” en “Data” in het hoofdmenu wordt bewogen, verschijnt extra content die over de bestaande paginacontent valt.

Oplossing:

Zorg ervoor dat deze extra content kan worden gesloten zonder gebruik van de muis en zonder dat de toetsenbordfocus hoeft te worden verplaatst. Ondersteun bijvoorbeeld het sluiten met de Escape-toets.

Issue nr. 4 - ‘aria-expanded’ ontbreekt bij submenu

In de header van de website hebben de links “Meetpunten” en “Data” submenu’s. Wanneer een gebruiker van een schermlezer het menu opent, wordt niet doorgegeven of het submenu open of gesloten is.

Wanneer een submenu aanwezig is, moet het element dat het submenu opent aangeven of het submenu zichtbaar of verborgen is.

Oplossing:

Gebruik het ‘aria-expanded’-attribuut op de knop of link die het submenu opent.

Issue nr. 5 - Groepering links ontbreekt in HTML

In de header van de website hebben de links “Meetpunten” en “Data” submenu’s. In deze submenu’s worden links visueel als groep gepresenteerd, maar deze groepering is niet vastgelegd in de HTML-structuur.

Wanneer voor ziende bezoekers duidelijk is dat links bij elkaar horen, moet deze structuur ook in de HTML-code aanwezig zijn.

Oplossing:

Plaats de gegroepeerde links in een ul-element.

Issue nr. 6 - Huidige pagina niet in code vastgelegd

In het hoofdmenu heeft de actieve link een afwijkende visuele weergave. Dit onderscheid is niet vastgelegd in de code. Daardoor is voor gebruikers van een schermlezer niet duidelijk welke pagina actief is.

Oplossing:

Zorg ervoor dat in de code wordt vastgelegd welke pagina actief is. 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).

Issue nr. 7 - Onlogische focusvolgorde

In de header wordt bij het activeren van de links in het hoofdmenu de bijbehorende content getoond. De toetsenbordfocus verplaatst zich daarna niet naar deze nieuw geopende content, maar naar het volgende interactieve element in de header. Daardoor ontstaat een onlogische focusvolgorde.

Oplossing:

Zorg ervoor dat de toetsenbordfocus bij het openen van content naar de nieuw getoonde content wordt verplaatst en dat de focusvolgorde aansluit op de visuele volgorde van de pagina.

Issue nr. 8 - title-element niet dynamisch bijgewerkt

Op deze website verandert de inhoud van pagina’s dynamisch, maar de tekst in het <title>-element verandert niet mee. Daardoor komt de paginatitel niet overeen met de actuele inhoud van de pagina. Daarnaast is de titel "Luchtmeetnet.nl" geen goede beschrijving van de inhoud van de pagina.

Gebruikers van een schermlezer gebruiken de paginatitel vaak om te begrijpen waar de pagina over gaat. Wanneer de titel niet overeenkomt met de actuele inhoud van de pagina, kan dit verwarrend zijn.

Dit probleem komt onder andere voor op:

• https://www.luchtmeetnet.nl/
• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/stations.

Een vergelijkbaar probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/informatie/download-data/tijdnotatie
• https://www.luchtmeetnet.nl/informatie/download-data/download-statistieken
• https://www.luchtmeetnet.nl/informatie/metingen/keuze-meetlocaties

Oplossing:

Zorg ervoor dat de tekst in het <title>-element automatisch wordt bijgewerkt wanneer de inhoud van de pagina dynamisch wijzigt.

Zorg er daarnaast voor dat het <title>-element van elke pagina uniek is en de inhoud van de betreffende pagina nauwkeurig beschrijft, bij voorkeur aangevuld met de naam van de organisatie.

Issue nr. 9 - Kop niet gemarkeerd in code

Wanneer de pagina’s van deze website op een klein scherm worden bekeken, zijn er teksten die niet als kop zijn gemarkeerd waaronder:

• https://www.luchtmeetnet.nl/ - de tekst "Luchtmeetnet"
• https://www.luchtmeetnet.nl/meetpunten - de tekst "Meetpunten"
• https://www.luchtmeetnet.nl/nieuws - de tekst "Publicaties"

Voor bezoekers die hulpsoftware gebruiken, is tekst die visueel als kop is vormgegeven maar niet als kop is gemarkeerd in de code niet bruikbaar. Zij navigeren via koppen om de inhoud te scannen of snel naar een specifieke sectie te gaan. Dit is alleen mogelijk wanneer koppen ook in de code als kop zijn vastgelegd.

Wanneer koppen uitsluitend visueel zijn vormgegeven, bijvoorbeeld door vetgedrukte tekst, wijkt de informatiestructuur in de code af van de visuele structuur van de pagina.

Op deze pagina staat een instructie om de koppenstructuur van een webpagina te testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Oplossing:

Markeer koppen met het juiste HTML-element en gebruik daarbij het correcte kopniveau (h1 tot en met h6).

Issue nr. 10 - Functie knop ontbreekt

Bovenaan de website staat, wanneer deze op een klein scherm wordt bekeken, een aanklikbaar icoon met drie horizontale lijnen. Dit element werkt als een knop, maar heeft niet de juiste toegankelijke rol. Het icoon heeft ook geen tekstalternatief.

Wanneer een knop alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie van de knop beschrijven. Dit probleem komt ook voor bij de afbeeldingen van vlaggen in dit menu, die werken als knoppen om de taal van de pagina te wijzigen.

Oplossing:

Zorg ervoor dat de knop de juiste toegankelijke rol heeft. Gebruik hiervoor het <button>-element. Voeg een tekstalternatief toe dat de functie van de knop beschrijft. Dit kan door een tekstalternatief bij het icoon te gebruiken of door een aria-label toe te voegen aan de knop.
Wanneer het icoon wordt geactiveerd, verandert het in een kruis en wijzigt de functie van de knop naar het sluiten van het menu. Zorg ervoor dat het tekstalternatief mee wijzigt met deze functie.

Issue nr. 11 - Status menuknop ontbreekt

Op een klein scherm staat een menuknop met drie horizontale lijnen om het mobiele navigatiemenu te openen. De knop geeft geen informatie over de toestand van het menu (open of gesloten) aan bezoekers die dit niet kunnen zien, zoals gebruikers van een schermlezer.

Oplossing:

Zorg ervoor dat de status van het menu ook in de code beschikbaar is. Gebruik hiervoor bijvoorbeeld het aria-expanded-attribuut op de menuknop. Zet dit attribuut "true" wanneer het menu is geopend en op “false" wanneer het menu is gesloten.

Issue nr. 12 - Menuknop zonder toetsenbordbediening

Op een klein scherm staat een menuknop met drie horizontale lijnen om het mobiele navigatiemenu te openen. Deze knop is niet met het toetsenbord te bedienen.

De knop is niet bereikbaar via het toetsenbord. Daardoor wordt de knop overgeslagen wanneer bezoekers met het toetsenbord navigeren. Interactieve elementen moeten volledig met het toetsenbord te bedienen zijn.

Dit probleem staat ook in dit menu bij de knoppen die worden gebruikt om de taal van de pagina’s te wijzigen.

Oplossing:

Zorg ervoor dat een knop met het toetsenbord kan worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 13 - Focus verplaatst niet naar mobiele menu

Op een klein scherm staat een menuknop met drie horizontale lijnen om het mobiele navigatiemenu te openen. Wanneer het menu opent, verplaatst de toetsenbordfocus zich niet naar het mobiele menu.

Daarnaast kunnen interactieve elementen op de onderliggende pagina nog steeds toetsenbordfocus krijgen terwijl het menu is geopend. Deze elementen zijn op dat moment niet zichtbaar, omdat het menu eroverheen ligt.

Oplossing:

Zorg ervoor dat de toetsenbordfocus bij het openen van het menu naar het mobiele menu wordt verplaatst. Zolang het menu is geopend, moet de focus in het menu blijven en niet op de onderliggende pagina terechtkomen.

Op deze pagina staat een instructie om zelf focusvolgorde te testen: https://properaccess.nl/hoe-test-ik-focusvolgorde/.

Issue nr. 14 - Focusindicator ontbreekt

Op deze pagina krijgt het element met role="application" en aria-label="Kaart" toetsenbordfocus. Er is geen zichtbare focusindicator aanwezig wanneer dit element focus heeft.

Oplossing:

Zorg ervoor dat de toetsenbordfocus zichtbaar is op focusbare elementen, zodat bezoekers weten wanneer zij een knop kunnen indrukken.

Issue nr. 15 - Onjuiste rol bij accordeonknoppen

Op deze pagina mist in de onderdelen met verborgen content “Legenda” en “Selecteer component” het element dat de verborgen content opent en sluit de rol van knop.

De teksten waarmee deze accordeononderdelen worden geopend en gesloten functioneren als knoppen, maar zijn niet als zodanig gemarkeerd. Daarnaast dienen deze teksten als kop voor de bijbehorende content, maar zijn zij niet als kop vastgelegd in de code.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI.

Oplossing:

Gebruik een kop-element met daarbinnen een button-element, bijvoorbeeld: <h2><button>Titel van de sectie</button></h2>.

Issue nr. 16 - Status accordeon ontbreekt in code

Op deze pagina is de open of gesloten toestand van de accordeons “Legenda” en “Selecteer component” visueel zichtbaar, maar deze is niet in de code vastgelegd. Het pijlicoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Daardoor is voor gebruikers van een schermlezer niet duidelijk of een sectie is geopend of gesloten.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI.

Oplossing:

Pas aria-expanded-attribuut toe op de knoppen waarmee de secties worden geopend en gesloten, of voeg visueel verborgen tekst toe die de staat van de sectie beschrijft.

Issue nr. 17 - Accordeon zonder toetsenbordbediening

Op deze pagina zijn de accordeononderdelen “Legenda” en “Selecteer component” niet met het toetsenbord te bedienen.

Bezoekers die alleen met het toetsenbord navigeren, moeten alle klikbare onderdelen van de website gewoon kunnen gebruiken. Daaronder vallen: links, knoppen, formulieren, keuzelijsten, tabbladen, sliders en accordeons.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Oplossing:

Zorg ervoor dat alle aanklikbare onderdelen kunnen worden bediend met het toetsenbord.

Op deze pagina staat een instructie om zelf toegankelijke accordeons te bouwen: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/.

Issue nr. 18 - Keuzelijst zonder toegankelijke naam

Op deze pagina staat in het onderdeel met verborgen content dat wordt geopend met “Selecteer component” een keuzelijst (<select>-element) met het label “Selecteer component”. De toegankelijke naam van dit element ontbreekt.

Daardoor is de keuzelijst niet toegankelijk voor gebruikers van een schermlezer. Ook bezoekers die spraaksoftware gebruiken kunnen het element niet bedienen, omdat de zichtbare tekst niet voorkomt in de toegankelijke naam.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten - in het onderdeel dat wordt geopend met “Selecteer component” een keuzelijst met het label “Selecteer component”.
• https://www.luchtmeetnet.nl/meetpunten - staan <select>-elementen met de labels “Selecteer waarde” en “Selecteer periode” in het paneel dat wordt geopend door het activeren van de ronde markeringen op de kaart.
• https://www.luchtmeetnet.nl/verwacht - staan de <select>-elementen met de labels “Selecteer provincie”, “Selecteer dag” en “Selecteer tijd” in het verborgen onderdeel dat wordt geopend met “Filter”.

Oplossing:

Geef het <select>-element een toegankelijke naam.

Zorg ervoor dat de toegankelijke naam de zichtbare tekst bevat, bij voorkeur aan het begin. De toegankelijke naam mag ook gelijk zijn aan de zichtbare tekst.

Issue nr. 19 - Alleen kleur gebruikt op kaart

Op de kaart wordt informatie alleen met kleur overgebracht. De markeringen op de kaart worden uitsluitend onderscheiden op basis van kleur, zoals de gele en blauwe cirkels.

Wanneer bezoekers de kleuren niet kunnen zien of niet van elkaar kunnen onderscheiden, is niet duidelijk welke kleur bij welke categorie hoort.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI - Op de kaarten wordt informatie alleen met kleur overgebracht, bijvoorbeeld met de gele en blauwe delen in het tabblad “Luchtkwaliteit”.

Oplossing:

Gebruik naast kleur ook een andere visuele aanduiding, zoals arcering of tekstuele labels.

Issue nr. 20 - Onvoldoende kleurcontrast op kaart

Op de kaart staan ronde markeringen in verschillende kleuren, bijvoorbeeld geel en blauw. Deze kleuren hebben een onvoldoende contrastratio ten opzichte van de achtergrond. Zo heeft de gele (#FFF855) markering op de lichtgrijze (#DCDCDC) achtergrond van de kaart een contrastratio van 1,2:1. De blauwe (#4AB7E9) kleur op de witte achtergrond van de kaart heeft een contrastratio van 2,3:1.

Dit probleem komt ook voor op pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Daarnaast komt hetzelfde probleem voor in de legenda. De blauwe (#96C8FF) markering op een witte achtergrond heeft bijvoorbeeld een contrastratio van 1,8:1. Ook de gele en oranje kleuren hebben onvoldoende kleurcontrast.

De legenda met dit probleem staat op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Een vergelijkbaar probleem met de legenda in grafieken komt voor op pagina’s:

• https://www.luchtmeetnet.nl/meetpunten - de grafieken staan in het paneel dat wordt geopend door het activeren van de ronde markeringen op de kaart.
• https://www.luchtmeetnet.nl/componenten - de legenda staat in grafieken wanneer de filters zijn toegepast.

Oplossing:

Zorg ervoor dat het contrast tussen de informatieve elementen op de kaart en in de legenda en de achtergrond minimaal 3,0:1 is. Controleer of alle markeringen op de kaart en in de legenda voldoende contrast hebben ten opzichte van hun achtergrond.

Issue nr. 21 - Onvoldoende kleurcontrast bij tekst

Op de kaart staan grijze (#B4B4B4) teksten, zoals “Noordzee” en “Markermeer”, op een lichtgrijze (#F3F3F3) achtergrond. De contrastratio is 1,9:1 en daarmee te laag.

Een vergelijkbaar probleem komt voor bij teksten zoals “Aalsmeer”, “Amstelveen”, “Nes aan de Amstel” op een grijze of witte achtergrond. Zo heeft de grijze (#969696) tekst op een lichtgrijze (#EBEBEB) achtergrond een contrastratio van 2,5:1.

Oplossing:

Omdat deze tekst kleiner is dan 24px en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 22 - De kleurmarkeringen in de legenda hebben geen tekstalternatief

Op deze pagina bevat de legenda gekleurde vierkante markeringen die de kleuren op de kaart weergeven. Deze kleurmarkeringen worden gebruikt om informatie over te brengen, maar hebben geen tekstalternatief dat de kleuren zelf benoemt. Hierdoor kunnen bezoekers die hulpsoftware gebruiken, zoals schermlezers, de informatie die met de kleuren wordt overgebracht niet waarnemen.

Daarnaast wordt de relatie tussen de kleurmarkeringen en de bijbehorende categorieën alleen visueel weergegeven en is deze niet programmatisch te bepalen. Hierdoor wordt aan bezoekers die hulpsoftware gebruiken niet doorgegeven welke kleur bij welke categorie hoort.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/verwacht?component=LKI https://www.luchtmeetnet.nl/mijn-locatie.
• https://www.luchtmeetnet.nl/meetpunten - in de legenda van de grafieken in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd.
• https://www.luchtmeetnet.nl/componenten - in de legenda van de grafieken die worden getoond wanneer filters zijn toegepast.

Oplossing:

Zorg voor een tekstalternatief voor de kleurmarkeringen, zodat de betekenis beschikbaar is in de code. Bijvoorbeeld via visueel verborgen tekst voor bezoekers die hulpsoftware gebruiken.

Issue nr. 23 - Naam van knop beschrijft niet wat knop doet

Op deze pagina bevat de kaart meerdere ronde markeringen die werken als knoppen. Deze knoppen openen panelen met gedetailleerde informatie over een geselecteerde meetlocatie op de pagina “Meetpunten”. Alle knoppen hebben dezelfde toegankelijke naam: “Marker”. Deze naam beschrijft de functie van de knoppen niet duidelijk.

Daarnaast wordt de locatie-informatie, die zichtbaar is wanneer je met de muis over de knop beweegt, alleen aangeboden via aria-describedby. Deze informatie maakt geen onderdeel uit van de toegankelijke naam.

Daardoor kunnen bezoekers die hulpsoftware gebruiken de verschillende knoppen niet goed van elkaar onderscheiden.

Oplossing:

Zorg ervoor dat de toegankelijke naam aansluit bij de actie van de knop, zodat knoppen met verschillende functies ook verschillende toegankelijke namen hebben.

Issue nr. 24 - Knoppen zonder toetsenbordbediening

Op deze pagina zijn de ronde markeringen op de kaart die als knoppen functioneren niet met het toetsenbord te bedienen.

Daardoor kunnen bezoekers die met het toetsenbord navigeren de knoppen niet activeren.

Oplossing:

Zorg ervoor dat de knoppen met het toetsenbord kunnen worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 25 - Onjuiste rol bij knop

Op deze pagina heeft de knop met pijlen naast de tekst “Laatste update” niet de juiste toegankelijke rol.

Daardoor kunnen hulptechnologieën niet correct bepalen dat dit element als knop functioneert.

Oplossing:

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

Issue nr. 26 - Toetsenbordbediening ontbreekt

Op deze pagina is de knop met pijltjes naast de tekst 'Laatste update' niet toegankelijk via het toetsenbord.

Oplossing:

Zorg ervoor dat de knop kan worden bediend met zowel de spatiebalk als de Enter-toets.

Issue nr. 27 - Statusmelding niet automatisch voorgelezen

Op deze pagina toont de kaart meetgegevens die kunnen worden vernieuwd met de knop met pijlen naast de tekst “Laatste update”. Wanneer deze knop wordt geactiveerd, worden de kaartgegevens bijgewerkt en verandert de tekst met de datum en tijd van de laatste update (bijvoorbeeld “Laatste update: 05-02-26 13:56”). Dit is een statusmelding.

Deze wijziging wordt niet automatisch aangekondigd door schermlezers. Daardoor worden gebruikers van een schermlezer niet geïnformeerd dat de gegevens zijn bijgewerkt of wanneer de update heeft plaatsgevonden.

Oplossing:

Zorg ervoor dat dit type melding automatisch wordt voorgelezen als statusbericht, zonder dat de gebruiker ernaartoe hoeft te navigeren. Dit kan door role="status" toe te voegen aan het element van de melding. Meer informatie hierover is te vinden op: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19.

Issue nr. 28 - Functionaliteiten niet bruikbaar bij inzoomen

Wanneer deze pagina wordt ingezoomd tot 200%, is de informatie “Laatste update:” niet zichtbaar. Ook de knop met pijlen om de kaartgegevens te vernieuwen en de knoppen om in en uit te zoomen zijn dan niet zichtbaar en niet bedienbaar.

Dit probleem treedt ook op wanneer de pagina word bekeken met een schermresolutie van 1280 bij 1024 pixels en is ingezoomd tot 400%.

Dit probleem komt ook voor op de pagina: https://www.luchtmeetnet.nl/meetpunten.

Oplossing:

Zorg ervoor dat alle informatie en functies beschikbaar en bedienbaar blijven wanneer wordt ingezoomd tot 200% en 400% op een scherm van 1280 bij 1024 pixels.

Issue nr. 29 - Functie icoonknop ontbreekt

Op deze pagina staan, wanneer deze op een klein scherm wordt bekeken, aanklikbare iconen die de submenu’s voor de legenda en filters openen. Deze iconen hebben niet de juiste toegankelijke rol en geen tekstalternatief.

Daardoor is voor bezoekers die hulpsoftware gebruiken niet duidelijk wat de functie van deze knoppen is.

Dezelfde problemen komen voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Zie ook hetzelfde probleem bij het “X”-icoon in het submenu “Legenda”.

Oplossing:

Zorg ervoor dat de knop de juiste toegankelijke rol heeft. Gebruik hiervoor het <button>-element.
Voeg een tekstalternatief toe dat de functie van de knop beschrijft, bijvoorbeeld via een tekstalternatief bij het icoon of een aria-label op de knop.

Issue nr. 30 - Status menuknop ontbreekt

Op deze pagina staan, wanneer deze op een klein scherm wordt bekeken, knoppen die de submenu’s voor de legenda en filters openen. Deze knoppen geven geen informatie over de toestand van het submenu (open of gesloten).

Dezelfde problemen komen voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Oplossing:

Zorg ervoor dat de status van het menu ook in de code beschikbaar is. Gebruik hiervoor bijvoorbeeld het aria-expanded-attribuut op de menuknop. Zet dit attribuut "true" wanneer het menu is geopend en op “false" wanneer het menu is gesloten.

Issue nr. 31 - Submenuknoppen zonder toetsenbordbediening

Op deze pagina zijn, wanneer deze op een klein scherm wordt bekeken, de knoppen die de submenu’s voor de legenda en filters openen niet met het toetsenbord te bedienen.

Daardoor kunnen bezoekers die met het toetsenbord navigeren deze knoppen niet activeren.

Deze problemen komen voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI
• https://www.luchtmeetnet.nl/mijn-locatie

Zie ook hetzelfde probleem bij de “X”-knop in het submenu “Legenda”.

Oplossing:

Zorg ervoor dat een knop met het toetsenbord kan worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 32 - Tekst niet leesbaar bij 400% zoom

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en is ingezoomd tot 400% (320px breedte), verdwijnt een deel van de content in het submenu van de legenda.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/meetpunten
• https://www.luchtmeetnet.nl/verwacht?component=LKI

Oplossing:

Zorg ervoor dat alle content beschikbaar en leesbaar blijft wanneer wordt ingezoomd tot 400%.

Issue nr. 33 - Onlogische focusvolgorde

Op deze pagina openen meerdere ronde markeringen op de kaart panelen met gedetailleerde informatie over een geselecteerde meetlocatie op de pagina “Meetpunten”. De toetsenbordfocus verplaatst zich niet naar het nieuw geopende paneel, maar gaat verder naar de knoppen op de kaart die daarachter liggen. Daardoor komt de toetsenbordfocus terecht op interactieve elementen die niet zichtbaar zijn, omdat zij achter het geopende paneel liggen. De focusvolgorde sluit hierdoor niet aan op de visuele structuur van de pagina.

Het paneel met gedetailleerde informatie bedekt een deel van de pagina content. Interactieve elementen op de onderliggende pagina kunnen nog steeds toetsenbordfocus krijgen, terwijl de focusindicator niet zichtbaar is.

Oplossing:

Verplaats bij het activeren van de knop de toetsenbordfocus naar het volgende logische element.

Houd de toetsenbordfocus binnen het paneel totdat het wordt gesloten via de sluitknop of met de ESC-toets. Onderliggende interactieve elementen mogen geen toetsenbordfocus krijgen zolang het paneel is geopend.

Issue nr. 34 - Onjuiste rol bij interactieve elementen

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart een paneel met gedetailleerde informatie. In dit paneel staan interactieve elementen die niet de juiste toegankelijke rol hebben. Het gaat om het element met het “X”-icoon, het element met het deel-icoon en de elementen met de teksten “Meer informatie” en “Bekijk alle metingen van deze component”.

Daardoor kunnen hulptechnologieën niet correct bepalen of het om een knop of een link gaat.

Oplossing:

Zorg ervoor dat de interactieve elementen de juiste toegankelijke rol hebben. Gebruik het <button>-element voor knoppen en het <a>-element voor links.

Issue nr. 35 - Sluitknop zonder toegankelijke naam

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart een paneel met gedetailleerde informatie. Dit paneel bevat een “X”-icoon om het te sluiten. Dit icoon heeft geen tekstalternatief waardoor het interactieve element geen toegankelijke naam heeft.

Daardoor is voor bezoekers die hulpsoftware gebruiken niet duidelijk wat de functie van deze knop is.

Oplossing:

Voeg een tekstalternatief aan het icoon of gebruik een ‘aria-label’ op het interactief element om de functie te beschrijven.

Issue nr. 36 - Interactieve elementen zonder toetsenbordbediening

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart een paneel met gedetailleerde informatie. Dit paneel bevat meerdere interactieve elementen die niet met het toetsenbord zijn te bedienen. Het gaat om het element met het “X”-icoon, het element met de tekst “Meer informatie”,het element met het deel-icoon en het element met de tekst “Bekijk alle metingen van deze component”.

Daardoor kunnen bezoekers die met het toetsenbord navigeren deze elementen niet activeren.

Oplossing:

Zorg ervoor dat interactieve elementen met het toetsenbord kunnen worden bediend, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 37 - Tabbladen onjuist gemarkeerd

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart een paneel met gedetailleerde informatie. In dit paneel staat een onderdeel dat eruitziet en werkt als tabs, zoals interactieve elementen waarmee kan worden gewisseld tussen stoffen NO₂, NO en O₃. Wanneer een tab wordt geactiveerd, verschijnt nieuwe content. De vereiste rollen en attributen ontbreken.

Een vergelijkbaar probleem komt voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/verwacht?component=LKI – bij de interactieve elementen “Luchtkwaliteit”, “Stikstofdioxide”, “Ozon” en andere
• https://www.luchtmeetnet.nl/rapportages – bij interactieve elementen zoals “DCMR”, “GGD”, “ODRA” en andere
• https://www.luchtmeetnet.nl/mijn-locatie – de interactieve elementen met de teksten “Air quality”, “Nitrogen dioxide”, “Ozone” en andere zijn gemarkeerd als radioknoppen, terwijl het onderdeel eruitziet en werkt als tabs

Oplossing:

Voeg de juiste rollen en attributen toe. Meer informatie hierover is te vinden op: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/.

Issue nr. 38 - Beschrijving grafieken ontbreekt

Op deze pagina staan grafieken in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd. Deze grafieken zijn complexe afbeeldingen en hebben geen betekenisvol tekstalternatief.

Onder de grafieken staat tekst en een tabel onder “Gemeten concentraties” waarin de gegevens in tekstvorm worden gepresenteerd. De grafieken hebben geen kort tekstalternatief dat aangeeft dat het om grafieken gaat of dat er een meer uitgebreide tekstuele beschrijving beschikbaar is.

Daardoor worden bezoekers die hulpsoftware gebruiken niet geïnformeerd over de aanwezigheid van de grafieken of over waar de bijbehorende tekstuele informatie is te vinden.

Oplossing:

Voeg aan elke grafiek een kort tekstalternatief toe waarin wordt aangegeven dat het om een grafiek gaat en dat de gedetailleerde gegevens beschikbaar zijn in de tekst en tabel onder “Gemeten concentraties”.

Issue nr. 39 - Informatie grafiek alleen via kleur

In de grafieken wordt alleen kleur gebruikt om informatie over te brengen, zoals de gele, oranje en blauwe kleuren in de legenda.

Wanneer bezoekers de kleuren niet kunnen zien of niet van elkaar kunnen onderscheiden, is niet duidelijk welke kleur bij welke categorie hoort.

Dit probleem komt ook voor op de pagina:
https://www.luchtmeetnet.nl/componenten in de grafieken die worden getoond wanneer filters zijn toegepast.

Oplossing:

Gebruik naast kleur ook andere visuele aanduiding, zoals arcering of tekstuele labels

Issue nr. 40 - Links onvoldoende herkenbaar

Op deze pagina staat in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd een alinea met links, zoals “disclaimer”. Deze links zijn alleen te onderscheiden van de omringende tekst door een kleurverschil.

Daardoor is niet voor alle bezoekers duidelijk dat het om links gaat.

Dit probleem komt ook voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/componenten
• https://www.luchtmeetnet.nl/rapportages
• https://www.luchtmeetnet.nl/informatie

Oplossing:

Kleur mag worden gebruikt om links van statische tekst te onderscheiden mits ze aan deze twee voorwaarden voldoen:

• het contrast tussen de linktekst en de omringende tekst minimaal 3:1 is;
• er een extra visuele indicator aanwezig is, zoals een onderstreping of een wijziging bij hover of focus.

Issue nr. 41 - Onvoldoende kleurcontrast bij kleine tekst

Op deze pagina staat in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd een alinea met links, zoals "disclaimer". De blauwe (#4082FF) linktekst staat op een witte achtergrond. De contrastratio is te laag: 3,6:1.

Dit probleem komt ook voor op de pagina:
https://www.luchtmeetnet.nl/componenten. De blauwe linktekst, zoals “disclaimer” en “Meer informatie over ontbrekende metingen.” staat daar op een lichtgrijze (#FAFBFF) achtergrond. De contrastratio is te laag: 3,5:1.

Zie ook andere pagina’s met een vergelijkbaar probleem.

Oplossing:

Omdat deze tekst kleiner is dan 24 pixels en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn.

Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 42 - Gegevenstabel onjuist gemarkeerd

Op deze pagina staat in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd een gegevenstabel. Deze tabel is niet als tabel gemarkeerd in de HTML-structuur.

Daardoor kan een schermlezer de relatie tussen de cellen niet bepalen. De inhoud wordt onjuist of onvolledig voorgelezen.

Dit probleem komt ook voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/stations – bij de tabel die wordt getoond wanneer provincie en uren zijn geselecteerd
• https://www.luchtmeetnet.nl/rapportages – bij de tabel die wordt getoond wanneer filters zijn toegepast
• https://www.luchtmeetnet.nl/nieuws – bij de tabellen in de content die opent na het activeren van items in het zijmenu

Oplossing:

Zorg ervoor dat gegevenstabellen met de juiste HTML-elementen worden gemarkeerd.

Meer informatie over het correct opbouwen van toegankelijker tabellen is te vinden op: https://www.w3.org/WAI/tutorials/tables/.

Issue nr. 43 - Functie pijl-iconen ontbreekt

Op deze pagina staat in het paneel dat opent wanneer de ronde markeringen op de kaart worden geactiveerd een tabel onder “Gemeten concentraties”. In deze tabel staan aanklikbare pijl-iconen zonder tekstalternatief.

Daardoor hebben deze knoppen geen toegankelijke naam en is voor bezoekers die hulpsoftware gebruiken niet duidelijk wat de functie van de knoppen is.

Dit probleem komt ook voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/mijn-locatie
• https://www.luchtmeetnet.nl/stations – in de tabel die wordt getoond wanneer provincie en uren zijn geselecteerd

Oplossing:

Voeg een tekstalternatief toe dat de functie van de knop beschrijft, bijvoorbeeld een tekstalternatief bij het icoon te gebruiken of door een aria-label toe te voegen aan de knop.

Issue nr. 44 - Accordeonknop niet correct gemarkeerd

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart, wanneer deze op een klein scherm wordt bekeken, een paneel met gedetailleerde informatie. In dit paneel staat een onderdeel met verborgen content “Filter”. Het element dat deze content opent en sluit heeft niet de rol van knop.

Daarnaast dient de tekst waarmee dit accordeononderdeel wordt geopend en gesloten als kop voor de bijbehorende content, maar deze tekst is niet als kop gemarkeerd in de code.

Dezelfde problemen komen voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Oplossing:

Gebruik een kop-element met daarbinnen een button-element, bijvoorbeeld: <h2><button>Titel van de sectie</button></h2>.

Issue nr. 45 - Status accordeon ontbreekt in code

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart, wanneer deze op een klein scherm wordt bekeken, een paneel met gedetailleerde informatie. De open of gesloten toestand van dit onderdeel is visueel zichtbaar, maar niet vastgelegd in de code. Ook het pijl-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Daardoor is voor bezoekers die een schermlezer gebruiken niet duidelijk of de sectie is in- of uitgeklapt.

Dezelfde problemen komen voor op de pagina’s:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Oplossing:

Pas het aria-expanded-attribuut toe op de knop waarmee de sectie wordt geopend en gesloten. De waarde moet wijzigen afhankelijk van de toestand van de sectie. Een alternatief is het toevoegen van visueel verborgen tekst die de toestand van de sectie beschrijft.

Issue nr. 46 - Accordeon zonder toetsenbordbediening

Op deze pagina opent bij het activeren van de ronde markeringen op de kaart, wanneer deze op een klein scherm wordt bekeken, een paneel met gedetailleerde informatie. In dit paneel staat een onderdeel met verborgen content “Filter”.

Het element waarmee deze content wordt geopend en gesloten is niet met het toetsenbord te bedienen. Daardoor kunnen bezoekers die met het toetsenbord navigeren dit onderdeel niet gebruiken.

Dezelfde problemen komen voor op de volgende pagina’s:

• https://www.luchtmeetnet.nl/stations
• https://www.luchtmeetnet.nl/componenten

Oplossing:

Zorg dat het element waarmee de verborgen content wordt geopend en gesloten volledig met het toetsenbord te bedienen is.

Issue nr. 47 - Onvoldoende kleurcontrast kleine tekst

Op deze pagina hebben de teksten “Selecteer provincie” en “Selecteer uur” boven de keuzelijsten een grijze (#70757F) kleur op een lichtgrijze (#FAFBFF) achtergrond. De contrastratio is te laag: 4,4:1.

Dit probleem komt voor op::

• https://www.luchtmeetnet.nl/componenten (bij teksten boven keuzelijsten zoals “Selecteer provincie” en bij teksten zoals “Stikstofdioxide (NO2)” onder “Componenten”);
• https://www.luchtmeetnet.nl/rapportages (bij teksten boven keuzelijsten zoals “Selecteer component”, bij de tekst “tot” tussen invoervelden onder “Selecteer periode” en bij grijze tekst onder de tabel met resultaten, zoals “Eenheid = microgram/m3”).
• en ook op andere pagina’s.

Oplossing:

Zorg dat het contrast van deze tekst minimaal 4,5:1 is. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 48 - Kop niet gemarkeerd in code

Op deze pagina is de tekst “Componenten” visueel als kop vormgegeven, maar niet als kop gemarkeerd in de code.

Daardoor kunnen bezoekers die hulpsoftware gebruiken niet via koppen door de pagina navigeren. Wanneer koppen alleen visueel worden vormgegeven en niet als kop zijn vastgelegd in de HTML, wijkt de structuur in de code af van de visuele structuur van de pagina.

Op deze pagina staat een instructie om de koppenstructuur van een webpagina te testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/nieuws (bij “Publicaties”);
• https://www.luchtmeetnet.nl/informatie (bij “Informatie”);
• https://www.luchtmeetnet.nl/contact (bij “Contact”).

Oplossing:

Markeer koppen met het juiste HTML-element (h1 tot en met h6) en pas het juiste kopniveau toe.

Issue nr. 49 - Onjuist gebruik van kopelement

Op deze pagina wordt de tekst “Geen data beschikbaar” getoond wanneer er geen filters zijn toegepast. Deze tekst is gemarkeerd met een <h4>-element, maar functioneert niet als kop.

De tekst introduceert geen onderliggende inhoud en geeft geen structuur aan de pagina. Het kopelement wordt hier gebruikt voor visuele opmaak in plaats van voor structuur.

Daardoor wijkt de structuur in de code af van de werkelijke informatiestructuur van de pagina.

Oplossing:

Verwijder het <h4>-element en gebruik een passend element, zoals een <p>-element. Pas de visuele opmaak toe met CSS.

Op deze pagina staat een instructie om koppen op een webpagina te testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Issue nr. 50 - Onjuiste rol bij interactieve elementen

Op deze pagina staat onder "Componenten" een zijmenu. De interactieve elementen in dit zijmenu hebben geen juiste toegankelijke rol.

Daardoor herkennen schermlezers en andere hulpsoftware de elementen niet als interactieve onderdelen. Ook is niet duidelijk welke functie zij hebben, wat correcte bediening belemmert.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/nieuws (onder “Publicaties”)
• https://www.luchtmeetnet.nl/informatie (onder “Informatie”)
• https://www.luchtmeetnet.nl/contact (onder “Contact”)

Oplossing:

Zorg ervoor dat de interactieve elementen de juiste rol krijgen.

Issue nr. 51 - Interactieve elementen zonder toetsenbordbediening

Op deze pagina staat onder "Componenten" een zijmenu. De interactieve elementen in dit zijmenu zijn niet met het toetsenbord te bedienen.

Daardoor kunnen bezoekers die met het toetsenbord navigeren de interactieve elementen niet activeren.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/nieuws (onder “Publicaties”)
• https://www.luchtmeetnet.nl/informatie (onder “Informatie”)
• https://www.luchtmeetnet.nl/contact (onder “Contact”)

Oplossing:

Zorg ervoor dat interactieve elementen volledig met het toetsenbord zijn te bedienen, bijvoorbeeld met de Enter-, Return- of spatiebalktoets.

Issue nr. 52 - Onvoldoende kleurcontrast bij zijmenu

Op deze pagina staat onder "Componenten" een zijmenu. Het actieve (geselecteerde) item heeft een blauwe (#1B6BFF) kleur op een lichtgrijze (#FAFBFF) achtergrond. De contrastratio is te laag: 4,4:1.

Dit probleem komt ook voor op de pagina’s:

• https://www.luchtmeetnet.nl/nieuws (onder “Publicaties”)
• https://www.luchtmeetnet.nl/informatie (onder “Informatie”)
• https://www.luchtmeetnet.nl/contact (onder “Contact”)

Oplossing:

Zorg dat het contrast van deze tekst minimaal 4,5:1 is. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 53 - Grafiek zonder beschrijving

Op deze pagina worden, wanneer filters zijn toegepast, grafieken getoond. Deze grafieken zijn complexe afbeeldingen en hebben geen kort tekstalternatief en geen uitgebreide beschrijving.

Daardoor is de informatie uit de grafieken niet beschikbaar voor bezoekers die de afbeelding niet kunnen zien.

Oplossing:

Voeg een korte beschrijving toe bij de grafiek en bied daarnaast een uitgebreide tekstuele beschrijving aan. Deze beschrijving kan op de pagina zelf staan of beschikbaar worden gesteld via een aparte pagina of een downloadbaar bestand.

Issue nr. 54 - Status accordeon ontbreekt in code

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een knop die een onderdeel met verborgen content opent. De zichtbare tekst op de knop is in eerste instantie “Stikstofdioxide (NO2)”.

De open of gesloten toestand van dit onderdeel is visueel zichtbaar, maar niet vastgelegd in de code. Ook het pijl-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Daardoor is voor gebruikers van een schermlezer niet duidelijk of de sectie is in- of uitgeklapt.

Dit probleem komt ook voor op de pagina:
https://www.luchtmeetnet.nl/contact - bij de knop die in eerste instantie is gelabeld als “Algemeen Luchtmeetnet”).

Oplossing:

Pas het aria-expanded-attribuut toe op de knop waarmee de sectie wordt geopend en gesloten, zodat de waarde wijzigt afhankelijk van de toestand. Een alternatief is het toevoegen van visueel verborgen tekst die de toestand van de sectie beschrijft.

Issue nr. 55 - Accordeonknop heeft onjuiste rol

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een onderdeel met verborgen content. De zichtbare tekst is in eerste instantie “Luchtkwaliteit”. Het element waarmee deze verborgen content wordt geopend en gesloten heeft niet de rol van knop.

Daardoor wordt het element niet herkend als interactief onderdeel.

Oplossing:

Gebruik een kop-element met daarbinnen een button-element.

Issue nr. 56 - Status accordeon ontbreekt in code

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een onderdeel met verborgen content. De zichtbare tekst is in eerste instantie “Luchtkwaliteit”.

De open of gesloten toestand is visueel zichtbaar, maar niet vastgelegd in de code. Ook het pijl-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Daardoor is voor bezoekers die een schermlezer gebruiken niet duidelijk of de sectie is in- of uitgeklapt.

Oplossing:

Pas het aria-expanded-attribuut toe op de knop waarmee de sectie wordt geopend en gesloten, zodat de waarde wijzigt afhankelijk van de toestand. Een alternatief is het toevoegen van visueel verborgen tekst die de toestand van de sectie beschrijft.

Issue nr. 57 - Functies niet bruikbaar bij 400% zoom

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd is tot 400% (320px breedte), zijn in het submenu van de filters de keuzelijst “Selecteer dag” en de knop “Toon selectie” niet zichtbaar en niet bedienbaar.

Oplossing:

Zorg ervoor dat interactieve elementen zichtbaar en bruikbaar blijven bij 400% zoom op een scherm van 1280 bij 1024 pixels.

Issue nr. 58 - Linktekst niet uniek

Op deze pagina opent het activeren van de items in het zijmenu content met tabellen. In deze tabellen staan links met dezelfde linktekst, zoals “Download” wanneer “Algemeen Luchtmeetnet” is geactiveerd en “Website” wanneer “DCMR (Rijnmond)” is geactiveerd, terwijl de bestemming van de links verschillend is.

Op basis van de linktekst is daardoor niet duidelijk waar een link naartoe leidt. Dit kan verwarrend zijn voor bezoekers, met name voor gebruikers van een schermlezer die links los van hun context bekijken.

Oplossing:

Maak in de linktekst duidelijk waar de link naartoe verwijst. Links met verschillende bestemmingen moeten een verschillende linktekst hebben.

Issue nr. 59 - Skiplink ontbreekt

Op deze pagina ontbreekt een oplossing om blokken met herhalende content over te slaan. De pagina bevat een zijmenu. Door het activeren van de items in dit menu wordt nieuwe content geopend, maar er is geen skiplink aanwezig om de navigatie in de header over te slaan.

Daarnaast is er geen toetsenbordmechanisme beschikbaar om de herhalende items in het zijmenu te omzeilen. Daardoor moeten bezoekers die met het toetsenbord navigeren op elke geopende pagina eerst door dezelfde navigatielinks tabben voordat zij de hoofdcontent bereiken.

Oplossing:

Zorg ervoor dat bezoekers vaste onderdelen van de pagina kunnen overslaan en direct naar de hoofdinhoud kunnen gaan, bijvoorbeeld met een skiplink.

Een skiplink moet de eerste link op de pagina zijn. Deze mag standaard verborgen zijn, maar moet zichtbaar worden zodra deze toetsenbordfocus krijgt.

Issue nr. 60 - Accordeonknop heeft onjuiste rol

Op deze pagina staat een zijmenu. In dit menu bevatten onderdelen met verborgen content een element waarmee de content wordt geopend en gesloten. Dit element heeft niet de rol van knop.

Daardoor wordt het element niet herkend als interactief onderdeel.

Oplossing:

Gebruik een kop-element met daarbinnen een button-element, bijvoorbeeld: <h2><button>Titel van de sectie</button></h2>.

Issue nr. 61 - Pijl-iconen accordeon zonder tekstalternatief

Op deze pagina staan in het zijmenu onderdelen met verborgen content. Het pijl-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Daardoor is voor bezoekers die een schermlezer gebruiken niet duidelijk dat het onderdeel kan worden geopend of gesloten.

Oplossing:

Zorg dat de functie en de status van het accordeononderdeel in de code beschikbaar zijn. Dit kan bijvoorbeeld door:

• het toevoegen van een tekstalternatief aan het icoon;
• het gebruik van een ‘aria-expanded’-attribuut’ op het interactieve element;
• het toevoegen van visueel verborgen tekst die de status beschrijft.

Issue nr. 62 - Keuzelijst (<select>-element) heeft geen label, omdat eerste optie als label is gebruikt

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een <select>-element zonder label. De eerste optie in het element wordt gebruikt als label, maar deze verdwijnt zodra een andere optie wordt geselecteerd.

Daardoor is niet duidelijk waar de keuzelijst over gaat.

Dit probleem komt ook voor op:

• https://www.luchtmeetnet.nl/informatie/download-data/download-statistieken
• https://www.luchtmeetnet.nl/informatie/metingen/keuze-meetlocaties
• https://www.luchtmeetnet.nl/informatie/verwachting/verwacht
• https://www.luchtmeetnet.nl/informatie/overige/validatie-data

Oplossing:

Voorzie het <select>-element van een zichtbaar en blijvend label.

Issue nr. 63 - Groepering invoervelden ontbreekt

Op deze pagina staat een groep invoervelden met daarboven de tekst “Selecteer periode”. Deze velden zijn visueel gegroepeerd, maar deze relatie is niet vastgelegd in de HTML.

Daardoor is de samenhang tussen de invoervelden niet duidelijk in de code.

Oplossing:

Plaats de invoervelden in een <fieldset>-element en gebruik een <legend>-element om de groep een naam te geven, bijvoorbeeld “Selecteer periode”.

Issue nr. 64 - Invoervelden zonder toegankelijke naam

Op deze pagina hebben de invoervelden onder "Selecteer periode" geen toegankelijke naam.

Daardoor is het voor gebruikers van een schermlezer niet duidelijk wat zij moeten invullen in het invoerveld.

Oplossing:

Geef elk invoerveld een toegankelijke naam door een <label>-element aan het veld te koppelen.

Issue nr. 65 - Onvoldoende kleurcontrast bij kleine tekst

Wanneer de filters niet zijn toegepast, staan onder “Download” grijze (#A3ABBC) teksten “PDF” en “CSV”. Op de lichtgrijze (#F1F3F6) achtergrond is de contrastratio te laag: 2,1:1.

Daarnaast staan er grijze (#6C7996) teksten zoals “DCMR” en “GGD” op een witte achtergrond. De contrastratio is 4,4:1 en voldoet daarmee niet aan de norm.

Oplossing:

Omdat deze tekst kleiner is dan 24 pixels en niet vetgedrukt, moet het contrast minimaal 4,5:1 zijn. Op deze pagina staat een instructie om kleurcontrast te testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Issue nr. 66 - Onduidelijk linkdoel

In de content die opent bij het activeren van “ODRA (Regio Arnhem)” in het zijmenu, staat onder de kop “Contact” het webadres “www.odregioarnhem.nl”. Dit webadres is opgesplitst in twee aparte links: “www.” en “.nl”. De tekst “odregioarnhem” maakt geen deel uit van de link.

Daardoor wordt het volledige webadres niet als één duidelijke link aangeboden aan hulpsoftware. De losse delen worden apart aangekondigd, waardoor het doel van de link onduidelijk is.

Oplossing:

Implementeer het volledige webadres als één link. Plaats de volledige URL binnen één <a>-element, zodat deze als één duidelijke link wordt aangekondigd en geactiveerd.

Issue nr. 67 - Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt, in de content die opent bij het activeren van “ODZL (Limburg)” in het zijmenu, de toetsenbordfocus terecht op niet-zichtbare interactieve links onder de kop “Contact”.

De toetsenbordfocus mag niet terechtkomen op interactieve elementen die niet zichtbaar zijn. Als dit wel gebeurt, kan een bezoeker een element onbedoeld activeren en wordt de navigatie onvoorspelbaar.

Oplossing:

Zorg ervoor dat alleen zichtbare elementen toetsenbordfocus kunnen krijgen en dat de focusvolgorde logisch en voorspelbaar blijft.

Issue nr. 68 - Link zonder toegankelijke naam

Op deze pagina staan in de content die opent bij het activeren van “ODZL (Limburg)” in het zijmenu twee niet-zichtbare links onder de kop “Contact”. Deze links zijn wel beschikbaar voor schermlezers, maar hebben geen toegankelijke naam.

Daardoor is voor gebruikers van een schermlezer niet duidelijk wat het doel of de bestemming van de links is. Dit hangt samen met succescriterium 2.4.4, omdat links een duidelijk doel moeten hebben.

Oplossing:

Geef de link een toegankelijke naam, bijvoorbeeld met een zichtbare linktekst of een aria-label.

Op deze pagina staat een instructie om toegankelijke namen te testen: https://www.properaccess.nl/blog/sc-4-1-2-wat-betekent-naam-rol-waarde/.

Issue nr. 69 - Onjuiste taalinstelling pagina

Als de Engelse taal is gekozen met een taalswitch, wordt de primaire taal van de pagina Engels, maar de taalcode in het lang-attribuut van het html-element blijft ingesteld in het Nederalnds (lang="nl").

Wanneer de taal van de pagina niet correct is vastgelegd, wordt de inhoud met onjuiste uitspraakregels voorgelezen. Daardoor is de tekst lastiger te begrijpen voor gebruikers van een schermlezer.

Oplossing:

Zorg ervoor dat de taal van de pagina is ingesteld op Engels (lang="en"), zodat hulpsoftware de inhoud op de juiste manier kan voorlezen.

Issue nr. 70 - Functie knop ontbreekt

Op deze pagina staat in het onderdeel ”Forecast for your location” een aanklikbaar afspeelicoon zonder tekstalternatief. Wanneer een knop alleen uit een afbeelding bestaat, moet het tekstalternatief de functie van de knop beschrijven. Dat is hier niet het geval.

Oplossing:

Voorzie de knop van een tekstalternatief dat de functie beschrijft, bijvoorbeeld via een aria-label of een tekstalternatief wanneer het icoon een <img>-element is.

Wanneer de knop wordt geactiveerd en verandert in een pauze-icoon, moet het tekstalternatief mee veranderen met de functie van de knop.

Issue nr. 71 - Invoerveld zonder toegankelijke naam

Op deze pagina heeft de slider in het onderdeel “Forecast for your location” geen toegankelijke naam.

Daardoor is het voor gebruikers van een schermlezer niet duidelijk wat het doel van de slider is en welke waarde wordt aangepast.

Oplossing:

Geef de slider een toegankelijke naam in de code, bijvoorbeeld door een -element aan het invoerveld koppelen of door gebruik te maken van een passend aria-label of aria-labelledby-attribuut.

Issue nr. 72 - Onvoldoende kleurcontrast sliderbalk

Op deze pagina staat onder het onderdeel “Forecast for your location” een slider. De de lichtgrijze (#E3E7ED) sliderbalk heeft op de witte achtergrond een contrastratio van 1,2:1. Dit is lager dan de vereiste minimale contrastratio van 3,0:1 voor grafische elementen.

Oplossing:

Zorg ervoor dat de sliderbalk een contrastratio van minimaal 3,0:1 heeft ten opzichte van de achtergrond.

Issue nr. 73 - Accordeonknop heeft onjuiste rol

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een onderdeel met verborgen content “Filter”. Het element dat deze content opent en sluit heeft niet de rol van knop.

De tekst waarmee het accordeononderdeel wordt geopend en gesloten functioneert als knop en moet daarom als knop zijn gemarkeerd in de code.

Oplossing:

Gebruik een kop-element met daarbinnen een button-element.

Issue nr. 74 - Status accordeon ontbreekt in code

Op deze pagina staat, wanneer deze op een klein scherm wordt bekeken, een onderdeel met verborgen content “Filter”. De open of gesloten toestand is visueel zichtbaar, maar niet vastgelegd in de code.

Daardoor krijgen schermlezers geen informatie over de status van het accordeononderdeel. Ook het pijl-icoon dat aangeeft dat er verborgen content aanwezig is, heeft geen tekstalternatief.

Oplossing:

Gebruik het aria-expanded-attribuut op de knop die het onderdeel opent en sluit. Een andere mogelijkheid is om visueel verborgen tekst toe te voegen die de staat van de sectie beschrijft.

Issue nr. 75 - PDF zonder documenttitel

Dit PDF-document heeft geen documenttitel in de bestandseigenschappen.

Wanneer een documenttitel ontbreekt, wordt in de titelbalk van de PDF-lezer meestal alleen de bestandsnaam getoond, bijvoorbeeld document123.pdf. Daardoor is niet direct duidelijk wat de inhoud van het document is.

Een documenttitel moet daarom worden ingesteld in de PDF-metadata, ook wanneer er op de eerste pagina al een zichtbare titel staat.

Dit probleem komt ook voor bij het PDF-document op: https://s3-eu-central-1.amazonaws.com/luchtmeetnet-public-acc/07d6e2e4-14f1-413f-905e-3ffc2daf410f/D084E589-1AFD-42C7-AED6-58D738A2297C.pdf.

Oplossing (in Adobe Acrobat):

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

Issue nr. 76 - Lijststructuur ontbreekt in tags

In dit PDF-document staat op pagina 8 onder “2024-12-17 Veranderd” een lijst met drie items. In de tags is deze lijst onjuist gemarkeerd met twee L-tags.

Content die eruitziet als een lijst, moet ook als lijst zijn gemarkeerd in de tags. Daardoor wordt de juiste structuur doorgegeven aan schermlezers en kunnen deze het aantal items correct aankondigen.

Oplossing:

Markeer de lijst met een L-tag en gebruik voor elk lijstitem een Li-tag.

Issue nr. 77 - Afbeeldingen zonder tekstalternatief

Dit PDF-document bevat op pagina 1 een afbeelding zonder tekstalternatief.

Afbeeldingen die met een Figure-tag zijn gemarkeerd, moeten altijd een tekstalternatief hebben. Zonder dit tekstalternatief lezen schermlezers alleen “afbeelding” voor.

Oplossing:

Voeg een passend tekstalternatief toe aan de informatieve afbeeldingen in de tags van het PDF-document.

Issue nr. 78 - Koppen niet als kop gemarkeerd

In dit PDF-document staan meerdere koppen die niet als kop zijn gemarkeerd in de tags, zoals “Datavalidatie luchtkwaliteit WWW.LUCHTMEETNET.NL”, “Datavalidatie luchtkwaliteit”, “De datavalidatie is in te delen in 4 stappen:” en “Negatieve waarden”.

Daardoor wijkt de structuur in de tags af van de visuele structuur van het document.

Oplossing:

Vervang de P-tag door een passende H1- tot en met H6-tag, zodat de tagstructuur overeenkomt met de visuele structuur.

Issue nr. 79 - Lijst onjuist gemarkeerd

In dit PDF-document staat onder “De datavalidatie is in te delen in 4 stappen:” een lijst met vier items. In de tags is deze lijst gemarkeerd met meerdere L-tags.

Daardoor komt de structuur van de lijst niet overeen met de visuele structuur van het document.

Oplossing:

Markeer de lijst met één L-tag en per item een Li-tag.