Link naar pagina: https://plancapaciteit.nl/kaart

Kleurcontrast van tekst is niet voldoende bij toetsenbordfocus en/of als de muiscursor erover beweegt

Op deze pagina verandert in het hoofdmenu de tekst van de link “Inloggen” naar wit op een lichtgroene achtergrond (#59C216) wanneer de link wordt aangewezen met de muiscursor. De contrastratio van deze tekst is 2,3:1. Tekst van informatieve elementen zoals links en knoppen moet altijd voldoende contrast hebben, ook wanneer het element toetsenbordfocus krijgt of wanneer de bezoeker er met de muiscursor over beweegt (hover).

Oplossing:

Zorg dat de tekst ook als de muis overheen gaat minimaal een contrast van 4,5:1 heeft met de achtergrond. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Alleen kleur gebruikt in legenda bij kaart

Op deze pagina wordt alleen kleur gebruikt in de legenda en op de kaart om informatie over te brengen. Zie bijvoorbeeld de rode kleur in de legenda. Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden, kun je zien welke balk of lijn bij welke categorie in de legenda hoort.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Aangepaste focusindicator heeft onvoldoende kleurcontrast

Op deze pagina wordt een aangepaste toetsenbordfocus gebruikt, weergegeven door een gele rand (#FFBC40). Op witte, grijze (#EEEEEE) en blauwe (#0076D0) achtergronden heeft deze focus te weinig contrastratio: respectievelijk 1,7:1, 1,4:1 en 2,8:1, bijvoorbeeld bij de links in het hoofdmenu.

Op de site wordt niet de standaard focusindicator gebruikt, maar een aangepaste versie met een gekleurde rand die met CSS is toegevoegd. Voor de standaard focusindicator gelden in WCAG geen contrasteisen; die wordt dus altijd goedgekeurd voor dit succescriterium. Bezoekers kunnen een standaard focusindicator namelijk zelf aanpassen naar hun eigen wensen. Maar dat kan niet meer als de focusindicator met CSS is aangepast. Daarom gelden de contrasteisen in dat geval wél.

Oplossing:

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

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de link met het logo en op alle keuzerondjes, bijvoorbeeld “Gemeente”. De toetsenbordfocus moet altijd zichtbaar zijn op interactieve elementen zoals links, knoppen en invoervelden die met het toetsenbord focus kunnen krijgen. Bezoekers die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Anders weten ze niet op welk moment ze op Enter moeten drukken om een knop of link te bedienen.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen. Op deze pagina staat een instructie om zelf focuszichtbaarheid te testen: https://properaccess.nl/hoe-test-ik-focus-zichtbaarheid/.

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op een onzichtbaar interactief element op de kaart, na het laatste item in secties met verborgen inhoud. De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen zoals links, knoppen of 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.

Het is niet in code vastgelegd of secties van de accordeon open of dicht zijn

Op deze pagina zijn secties met verborgen inhoud aanwezig, bijvoorbeeld “Overzicht”. Voor bezoekers die de pagina kunnen zien, is het duidelijk of een sectie is in- of uitgeklapt. Maar voor blinde of slechtziende bezoekers die een schermlezer gebruiken, is dat niet duidelijk, omdat de open- of dichtgeklapte status niet programmatisch wordt meegedeeld.

Oplossing:

Je lost dit op door een aria-expanded-attribuut toe te voegen aan de knoppen waarmee je de secties opent en sluit, of door visueel verborgen tekst toe te voegen die de staat van de sectie aangeeft.

Kleurcontrast tussen lijnen of balken in kaart en legenda is niet voldoende

Op deze pagina staat een kaart met een legenda. Sommige kleuren hebben een laag kleurcontrast, bijvoorbeeld: op een witte achtergrond heeft lichtpaars (#FFB9FF) een contrastratio van 1,5:1, paars (#F053F0) 2,9:1, lichtoranje (#F7BE81) 1,7:1 en oranje (#FF8000) 2,5:1.

Oplossing:

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

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina zijn secties met verborgen inhoud aanwezig, bijvoorbeeld “Overzicht.” Elke sectie heeft een decoratief pijlpictogram. De tekstalternatief daarvan is “Chevron”. 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.

Sorteerknop heeft geen toegankelijke naam, rol en status

Op deze pagina staan tabellen waarvan de kolomkoppen kunnen worden gesorteerd in oplopende of aflopende volgorde. Deze kolomkoppen functioneren als knoppen, maar ze hebben niet de juiste rol en geven geen informatie over de huidige status (de sorteervolgorde). De sorteerstaat informeert de schermlezer over de volgorde waarin de gegevens zijn gesorteerd. Zonder de interactieve rol van een knop weet een blinde bezoeker niet dat het een knop is waarmee de gegevens kunnen worden gesorteerd.

Dit probleem hangt ook samen met succescriterium 2.1.1; deze tabellen kunnen niet met het toetsenbord worden gesorteerd.

Oplossing:

Voeg de rol button en het attribuut aria-sort toe.

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina staan op de kaart knoppen en links in het Engels, terwijl de primaire taal van de website Nederlands is. Bijvoorbeeld de knoppen “+” en “–”, met de toegankelijke namen “Zoom in” en “Zoom out” die via aria-label zijn toegevoegd. 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.

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Op deze pagina verdwijnt in het hoofdmenu de link “Home” volledig wanneer bezoekers tekstafstand toepassen zoals beschreven in dit succescriterium, en de link “Plannen en gegevens” wordt gedeeltelijk onzichtbaar en onleesbaar. Sommige bezoekers passen de weergave van de tekst aan, zodat zij de tekst beter kunnen lezen. Denk aan het vergroten van de afstand tussen regels, letters of woorden. Het gaat bijvoorbeeld om mensen met dyslexie. Als een bezoeker dit doet op de manier die in succescriterium 1.4.12 is beschreven, moet alles goed blijven werken. Bovendien moet de tekst leesbaar blijven.

Oplossing:

Je lost dit op door de hoogte en breedte van de containers van de tekst responsief te maken.

SC 1.3.1 De relatie tussen keuzerondjes is niet in de code vastgelegd

Op deze pagina staan in de sectie met verborgen inhoud “Overzicht” groepen keuzerondjes, voorafgegaan door de teksten “Indeling:” en “Thema:”. Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de HTML.

Oplossing:

Je lost dit op door de elementen in een fieldset-element te plaatsen. Een fieldset met interactieve inhoud moet een naam hebben. Hiervoor kun je het legend-element gebruiken. Plaats hierin de tekst “Indeling:” en “Thema:”.

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

Wanneer de tekst op deze pagina tot 200% of 400% wordt ingezoomd, wordt de inhoud van het mobiele menu bijna volledig bedekt door de kaart en is deze niet zichtbaar.

Oplossing:

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

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

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, raakt de tekst van het logo “Monitor plancapaciteit” gedeeltelijk weg.

Oplossing:

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

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

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en wordt ingezoomd tot 400%, zijn de tabellen in de sectie met verborgen inhoud “Overzicht” bijna volledig onzichtbaar en niet meer bedienbaar.

Oplossing:

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

Zoomen is niet mogelijk in oudere browsers door bepaalde code

Op alle pagina’s staat in het head-element van de HTML-code maximum-scale=1. Deze code zorgt ervoor dat een bezoeker niet kan inzoomen.

Oplossing:

Verwijder deze code.

De toetsenbordfocus verschijnt heel even en verdwijnt daarna weer

Op deze pagina staan op de kaart de knoppen “+” en “–” en een link voor lagen. De toetsenbordfocus op deze elementen verschijnt slechts een fractie van een seconde en verdwijnt daarna weer. Als de toetsenbordfocus even opflitst en verdwijnt, kan de bezoeker dat niet opmerken en niet begrijpen waar de toetsenbordfocus zich bevindt.

Oplossing:

Zorg ervoor dat de toetsenbordfocus voortdurend zichtbaar is en niet na een korte tijd verdwijnt.