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.

Kleurcontrast van tekst is te laag

Op de pagina’s van de website wordt de combinatie van de kleuren groen (#8CC63F) en wit gebruikt, die een onvoldoende contrastratio van 2,0:1 heeft. Zie bijvoorbeeld de links in de submenu’s die verschijnen wanneer met de muis over de links in het navigatiemenu wordt gegaan, de tekst “Bestanden” en de linktekst “Wachtwoord vergeten?” in het inlogformulier, en de tekst van links zoals “Nieuws” in de footer. Op pagina https://www.gwbeheergooi.nl/ staan groene teksten zoals “Complexe, omvangrijke verontreiniging Laarder Wasmeren opgenomen in grondwaterbeheer” op een witte achtergrond. Deze teksten zijn kleiner dan 24px en niet vetgedrukt. Op pagina https://www.gwbeheergooi.nl/contact staat de groene tekst “Contact”. Deze tekst is groter dan 24px.

Oplossing:

Als teksten kleiner zijn dan 24px en niet vetgedrukt, moet de contrastratio minimaal 4,5:1 zijn.

Als teksten groter zijn dan 24px, moet de contrastratio minimaal 3,0:1 zijn.

Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

Kleurcontrast van tekst is te laag

Op de pagina’s van de website wordt een blauwe kleur (#00AEEF) gebruikt, die een onvoldoende contrastratio heeft tegen de witte en lichtgrijze (#EBEAEA) kleuren. Tegen de witte kleur is de contrastratio 2,0:1. Tegen de lichtgrijze kleur is de contrastratio 2,1:1. Zie bijvoorbeeld de blauwe links in het navigatiemenu in de header en de witte tekst van de links op de blauwe achtergrond in de submenu’s die verschijnen wanneer met de muis over de links in het navigatiemenu wordt gegaan.

Op pagina https://www.gwbeheergooi.nl/ staan blauwe teksten zoals “9 februari 2023” op een witte achtergrond in de sectie “Nieuws”. Deze teksten zijn kleiner dan 24px en niet vetgedrukt.

Op pagina https://www.gwbeheergooi.nl/ staat ook de blauwe tekst “Nieuws” en de witte tekst van links zoals “Beheergebied” in de carrousel. Deze teksten zijn 24px en 32px en niet vetgedrukt.

Oplossing:

Als teksten kleiner zijn dan 24px en niet vetgedrukt, moet de contrastratio minimaal 4,5:1 zijn. Als teksten 24px en groter zijn, moet de contrastratio minimaal 3,0:1 zijn.

Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kan testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

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

Op de pagina’s van de website wordt de combinatie van de kleuren oranje (#8CC63F) en wit gebruikt, die een onvoldoende contrastratio van 2,5:1 heeft. Zie bijvoorbeeld de placeholdertekst “Zoek” in het zoekveld in de header. Op pagina https://www.gwbeheergooi.nl/ staat de oranje tekst “Meer hierover” binnen nieuwsartikelen en de witte tekst van de knop “Laad meer berichten” op de oranje achtergrond. Ook wordt de combinatie van lichtoranje (#F7931D) en wit gebruikt, die een onvoldoende contrastratio van 2,3:1 heeft.

Zie bijvoorbeeld op pagina https://www.gwbeheergooi.nl/ binnen de artikelen de lichtoranje tekst van de links, zoals “Artikel 1”, “Artikel 2”, “film.jpg”, “NHnieuws” en andere.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast 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/.

Er is geen skiplink aanwezig

Op de pagina’s van de website ontbreekt een 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.

Logo is een link, maar bestemming is onbekend

Op pagina’s van de website staat bovenaan een logo dat ook een link is. In het logo is de volledige tekst “Grondwater Beheer 't Gooi” zichtbaar, maar in het alt-attribuut staat alleen “logo”.

In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat. Hierdoor ontbreekt bij de link een beschrijvende tekst voor de bestemming, wat niet voldoet aan succescriterium 2.4.4. Dit maakt het voor bezoekers die hulpsoftware gebruiken lastig om te bepalen naar welke pagina of inhoud de link leidt.

Deze situatie voldoet ook niet aan succescriterium 2.5.3. De toegankelijke naam van de link komt namelijk niet overeen met de zichtbare tekst in het logo. Hierdoor werkt de link niet goed als die met stembediening wordt geactiveerd, omdat de naam die wordt uitgesproken niet herkend zal worden.

In de footer is een vergelijkbaar probleem te zien. Onder “Partners” staat een groep links waarvan de inhoud alleen uit logo’s bestaat. Deze logo’s hebben geen tekstalternatief, want de alt-attributen zijn leeg (alt="").

Oplossing:

Pas een van deze opties toe om de link meer context te geven:

• alt-tekst: verander de alt-tekst zodat de volledige tekst van het logo erin staat.
• aria-label: Voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming.
• Visueel verborgen tekst: voeg beschrijvende tekst toe binnen het a-element en verberg deze visueel met CSS, terwijl je de tekst toegankelijk houdt voor schermlezers.

Zorg dat de tekst die in het logo zichtbaar is voorkomt in de toegankelijke naam, het liefst vooraan. Het is nog beter als de toegankelijke naam gelijk is aan de zichtbare tekst.

Kop is niet gemarkeerd als koptekst

Op pagina’s van de website is in de header de tekst “Bestanden” boven het inlogformulier niet als kop gemarkeerd.

In de footer van de website is hetzelfde probleem te zien bij de tekst “Partners:”. Bezoekers die hulpsoftware gebruiken hebben niets aan een (tussen)kop die er wel uitziet als kop, maar niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

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

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Er is geen legend-element voor de fieldset

Oplossing:

Voeg een legend-element toe binnen de fieldset en vul het met een beschrijvend label om duidelijk het doel van de groep aan te geven.

Placeholdertekst wordt gebruikt als label voor een invoerveld

Op pagina’s van de website staat in de header een inlogformulier. De invoervelden met de placeholder “E-mail” en “••••••••••••” zijn aanwezig. Deze invoervelden hebben echter geen zichtbaar blijvend label; de placeholdertekst wordt gebruikt als label. Invoervelden moeten een label hebben dat altijd zichtbaar is. Je kunt hier dus niet een placeholdertekst voor gebruiken, want die verdwijnt zodra de bezoeker begint te typen.

Oplossing:

Voeg een permanent zichtbaar label toe bij het invoerveld.

Invoerveld heeft geen toegankelijke naam

Op pagina’s van de website staat in de header een inlogformulier. De invoervelden in dit formulier hebben geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Deze situatie voldoet ook niet aan succescriterium 2.5.3 voor het invoerveld “E-mail”. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, in dit geval de placeholdertekst, kunnen bezoekers die spraaksoftware gebruiken het element niet bedienen. Zij geven een commando door de zichtbare tekst hardop uit te spreken. Als deze tekst niet in de toegankelijke naam in de code voorkomt, werkt het commando niet.

Een vergelijkbaar probleem is te zien bij het zoekveld in de header. Dit invoerveld met de placeholdertekst “Zoek” heeft geen toegankelijke naam en is daardoor niet met spraak te bedienen.

Oplossing:

Dit kan worden opgelost door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element met de naam van het veld toe te voegen en dit te koppelen aan het veld.

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

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

Op pagina’s van de website staat in de header een inlogformulier. Een van de invoervelden heeft de groene placeholdertekst “E-mail” (#45943D) op een witte achtergrond. De contrastratio is 3,8:1. Dezelfde kleurcombinatie wordt gebruikt voor de waarde die door de bezoeker wordt ingevoerd.

Oplossing:

Zorg dat de teksten een contrast van minstens 4,5:1 tegen de achtergrond hebben.

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

Op pagina’s van de website staat in de header een inlogformulier. De contrastratio tussen de witte achtergrond van het invoerveld met de placeholdertekst “E-mail” en de groene achtergrond van het formulier (#8CC63F) is 2,0:1.

Een vergelijkbaar probleem is te zien bij het zoekveld met de placeholdertekst “Zoek”. De witte achtergrond van het veld tegen de groene achtergrond (#88C03D) heeft een contrastratio van 2,2:1.

Oplossing:

De achtergrond van het invoerveld moet een minimale contrastratio van 3,0:1 hebben ten opzichte van de achtergrond van het formulier.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op pagina’s van de website staat in de header een formulier met invoervelden voor persoonlijke gegevens (e-mail en wachtwoord). Bij deze invoervelden ontbreekt het autocomplete-attribuut.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

Tekst van de knop heeft te weinig contrast

Op pagina’s van de website staat in de header een inlogformulier. De knop met de tekst “Login” heeft een onvoldoende kleurcontrast. De witte tekst op de groene achtergrond (#5C990B) heeft een contrastratio van 3,5:1, wat lager is dan de vereiste minimale waarde van 4,5:1 voor standaardtekst.

Oplossing:

Zorg dat de tekst voldoende contrast heeft met de achtergrond. Dit moet minimaal 4,5:1 zijn.

Contrast van icoon op knop is te laag

Op pagina’s van de website staat in de header een zoekbalk. In deze zoekbalk staat een knop met een vergrootglasicoon. Dit groene icoon (#8CC63F) heeft een onvoldoende contrastratio van 2,0:1 tegen de witte achtergrond. Het icoon is daardoor niet voor iedereen zichtbaar.

Oplossing:

Zorg voor een minimaal contrast van 3,0:1.

Knop heeft geen toegankelijke naam

Op de website staat in de header een zoekbalk. In deze zoekbalk staat een knop met een vergrootglasicoon. Deze knop heeft geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de knop.

Oplossing:

Je kunt de toegankelijke naam geven via knoptekst, een aria-label of een andere techniek.

Menuknop geeft geen informatie over status

Op de website verschijnt op een klein scherm een menuknop in de header om het mobiele navigatiemenu te openen. Deze knop geeft geen informatie over de toestand van het menu (open of gesloten) aan bezoekers die het niet kunnen zien, zoals degenen die een schermlezer gebruiken.

Oplossing:

Voeg bijvoorbeeld een tekstuele uitleg toe (ingeklapt/uitgeklapt) die je voor ziende bezoekers met CSS verbergt. Of gebruik het aria-expanded-attribuut op de link van het mobiele menu. Dit attribuut moet de waarde "true" krijgen als het menu getoond wordt, en “false" als het menu verborgen is.

Mobiel menu werkt niet goed met toetsenbordfocus

Op pagina’s van de website is bovenaan een menuknop aanwezig wanneer de pagina op een klein scherm wordt bekeken. Deze knop opent een mobiel menu. Op dit moment kunnen bezoekers met het toetsenbord buiten het mobiele menu navigeren terwijl het menu nog open is. De toetsenbordfocus verplaatst zich dan naar de onderliggende pagina.

Dit probleem voldoet ook niet aan succescriterium 2.4.11. Wanneer het mobiele menu open is, overlapt het interactieve elementen op de onderliggende pagina. Deze onderliggende elementen kunnen nog steeds toetsenbordfocus ontvangen, ook al worden ze door het menu verborgen. Elementen die toetsenbordfocus krijgen, moeten altijd zichtbaar zijn. Is dat niet zo, dan kunnen bezoekers die met het toetsenbord of de schermlezer navigeren in de war raken.

Oplossing:

Bij dit soort menu’s moet de toetsenbordfocus goed worden ingesteld. Wanneer het menu actief is, moet de focus binnen het menu blijven en mag deze niet op de onderliggende pagina terechtkomen.

Je lost dit op een van de volgende manieren op:

1. Houd de focus binnen het menu: zorg dat de toetsenbordfocus binnen het menuvenster blijft totdat de bezoeker op de sluitknop heeft geklikt of op de ESC-toets heeft gedrukt.
2. Sluit het chatvenster automatisch: sluit het menuvenster automatisch op het moment dat de focus eruit gaat.

Het is cruciaal dat onderliggende interactieve elementen geen toetsenbordfocus krijgen zolang het mobiele menu open is.

Content die verschijnt bij hover moet makkelijk gesloten kunnen worden

Op pagina’s van de website verschijnt er extra inhoud wanneer met de muis over het hoofdmenu in de header wordt gegaan. Deze inhoud overlapt bestaande pagina-inhoud.

Oplossing:

De bezoeker moet deze content makkelijk kunnen sluiten zonder de muis te gebruiken of de toetsenbordfocus te verplaatsen. Bijvoorbeeld door de Escape-toets in te drukken. Zo kan de bezoeker snel de extra informatie verbergen en doorgaan met de belangrijkste onderdelen van de pagina.

Interactief element heeft niet de juiste toegankelijke rol

Op de website staat onderaan een interactief element met een pijlafbeelding waarmee naar boven wordt gescrold. Dit element heeft echter niet de juiste toegankelijke rol. 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 het interactieve element de juiste toegankelijke rol heeft.

Interactieve element kan niet bediend worden met spatiebalk en Enter-toets

Op de website staat onderaan een interactief element met een pijlafbeelding waarmee naar boven wordt gescrold. Dit element is echter niet toegankelijk via het toetsenbord. Wanneer een bezoeker met het toetsenbord navigeert, wordt dit interactieve element overgeslagen. Alle interactieve elementen, dus ook links, moeten met alleen het toetsenbord te bedienen zijn.

Oplossing:

Zorg dat alle interactieve elementen met de Enter-, Return- of spatietoetsen kunnen worden bediend.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op pagina’s van de website staat in de footer onder “Partners:” een groep links die visueel als een groep wordt gepresenteerd, maar deze groepering is niet zichtbaar in de HTML-structuur.

Hetzelfde probleem is te zien in de footer bij de groepen links onder “Grondwaterbeheer” en “Afkoop”.

Als het voor een ziende bezoeker duidelijk is dat een groep links bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

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

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

Op de website staat in de footer de grijze tekst “Partners” (#838383) op een witte achtergrond. De contrastratio is te laag: 3,8:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast 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/.

Koppen zijn niet gemarkeerd als koptekst

Op pagina’s van de website staan in de footer de links “Nieuws”, “Grondwaterbeheer” en “Afkoop”. Deze teksten fungeren als koppen omdat ze de inhoud eronder beschrijven. Deze hiërarchie ontbreekt in de HTML.

Oplossing:

Maak het voor de schermlezer duidelijk wat de relatie is tussen deze teksten en de lijsten die eronder staan. De makkelijkste oplossing is hier een heading-element te gebruiken.

De links zijn onjuist gegroepeerd als één lijstitem.

Op pagina’s van de website staan in de footer twee gerelateerde links “Disclaimer” en “Toegankelijkheid” die visueel als een groep worden gepresenteerd, maar deze groepering is onjuist weergegeven in de HTML-structuur. Het ul-element wordt gebruikt, maar beide links zijn geplaatst binnen één li-element. Hierdoor worden de links niet als aparte lijstitems weergegeven, wat de bedoelde structuur verbreekt en de lijstmarkering ineffectief maakt.

Oplossing:

De lijst moet op de juiste manier worden opgemaakt, waarbij elke link in een eigen li-element wordt geplaatst.

Onzichtbaar element krijgt toetsenbordfocus

Op verschillende pagina’s van de website staat een carrousel waarin links staan. De toetsenbordfocus komt terecht op een onzichtbaar interactief element in deze carrousel.

De toetsenbordfocus mag niet terechtkomen op onzichtbare interactieve elementen (links, knoppen, formuliervelden). Als dat wel gebeurt, kan een bezoeker ze onbedoeld activeren.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/, https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, en anderen.

Oplossing:

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

Link bestaat uit een afbeelding, linkdoel is onbekend

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/, https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, en anderen.

Oplossing:

Je lost dit op door de link te voorzien van toegankelijke, tekstuele inhoud. Dit kun je als volgt doen:

• Verborgen tekst aan de link toevoegen: voeg beschrijvende tekst toe in het a-element, die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only).
• aria-label gebruiken: voeg een aria-label-attribuut toe aan het a-element met een beknopte beschrijving van de bestemming van de link.

Contrast van icoon op knop is te laag

Op pagina’s van de website staan pagina’s met een carrousel. In deze carrousel hebben de navigatielinks met pijlen een onvoldoende contrastratio tussen het witte pijltje en de blauwe achtergrond (#00AEEF). De contrastratio van 2,5:1 is te laag. Het icoon is dus niet voor iedereen zichtbaar.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/, https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, en anderen.

Oplossing:

Zorg voor een minimaal contrast van 3,0:1.

De onderlinge relaties binnen de carrousel zijn niet goed te bepalen

Op verschillende pagina’s op de website staat een carrousel met daarin links naar andere pagina’s en links om de carrousel te bedienen: de pijlen voor vorige en volgende en bolletjes om naar een andere slide te gaan. Deze elementen zijn niet als geheel gegroepeerd door het overkoepelende element een rol te geven. Hierdoor is het voor gebruikers van hulpsoftware niet duidelijk dat hier een carrousel staat en dat er links zijn om deze te bedienen. De onderlinge relaties zijn daardoor niet goed te bepalen.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/, https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, en anderen.

Oplossing:

Om een toegankelijke carrousel te maken, moet gelet worden op verschillende aspecten. Zo moet het overkoepelende element een rol krijgen en moet het van elk element in de carrousel duidelijk zijn wat de functie ervan is. Zo zijn er nog meer eisen, zie de pagina https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ voor meer informatie hierover.

Welke link actief is, is niet vastgelegd in de code

Op pagina’s van de website staan pagina’s met een carrousel met navigatie via stippen. De actieve stip ziet er visueel anders uit dan de niet-actieve stippen. Deze informatie ontbreekt in de HTML. Een bezoeker met een schermlezer heeft daardoor geen toegang tot deze informatie.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/nieuws/41 en anderen.

Oplossing:

Je kunt dit oplossen met ARIA-technieken of een verborgen tekst.

Het actieve bolletje is alleen met kleur aangegeven

Op pagina’s van de website staan pagina’s met een carrousel. In deze carrousel wordt bij de navigatie met bolletjes kleur gebruikt om de actieve stip aan te geven. Dit kan een probleem veroorzaken voor gebruikers die kleuren niet goed kunnen onderscheiden. Het contrast tussen de actieve en niet-actieve stip is lager dan 3,0:1.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/nieuws/41 en anderen.

Oplossing:

Zorg dat het actieve bolletje duidelijk te onderscheiden is van de andere bolletjes. Dat kan als volgt:

• Verhoog het contrast: vergroot het contrast tussen de kleur van het actieve bolletje en niet-actief bolletje tot minimaal 3,0:1.
• Gebruik een extra aanwijzing: verander de vorm van het actieve bolletje. Je kunt het bijvoorbeeld iets groter maken dan de andere bolletjes, of omlijnd maken in plaats van ingevuld.

Het actieve bolletje in de carrouselnavigatie heeft te weinig contrast ten opzichte van de achtergrond.

Op pagina’s van de website staan pagina’s met een carrousel met navigatie door middel van stippen. De contrastratio tussen de actieve stip en de achtergrond is te laag. De blauwe stip (#00AEEF) op de groene achtergrond (#8CC63F) heeft een contrastratio van 1,2:1.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/nieuws/41 en anderen.

Oplossing:

Zorg dat het contrast tussen de links en de achtergrondkleur(en) minimaal 3,0:1 is.

Links in navigatie van carrousel zijn niet duidelijk genoeg

Op verschillende pagina’s staat een carrousel. Hierin is soms een mechanisme aanwezig om slides te wisselen. Dit wordt aangegeven met stippen. De linkdoelen van de links in deze stipnavigatie zijn niet duidelijk genoeg. De toegankelijke namen van deze links zijn: “1”, “2” en “3”. Voor ziende bezoekers is het duidelijk dat dit stippen zijn om naar een specifieke dia te gaan, maar voor slechtziende bezoekers en bezoekers die een schermlezer gebruiken is het niet altijd duidelijk dat deze links zijn naar een specifieke dia.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/nieuws/41 en anderen.

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "dia”. Er zijn ook andere oplossingen mogelijk.

strong-element in plaats van kop-element

Op pagina’s van de website staat een groep navigatielinks. Boven deze groep staat een tekst zoals “Grondwaterbeheer” of “Afkoop” die fungeert als kop voor de onderliggende inhoud. Deze tekst is echter onjuist gemarkeerd met een strong-element in plaats van met een juist kop-element.

Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/grondwaterbeheer/beheergebied, https://www.gwbeheergooi.nl/afkoop/vragen-en-antwoorden, en anderen.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-element om deze kop te markeren, zoals h2 of h3.

Decoratieve afbeelding is niet verborgen voor schermlezers

Op pagina’s van de website staat een groep navigatielinks. Bij deze links staan decoratieve pijlafbeeldingen. De alternatieve tekst van deze afbeeldingen herhaalt de aangrenzende tekst van de links. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/grondwaterbeheer, https://www.gwbeheergooi.nl/grondwaterbeheer/beheergebied, https://www.gwbeheergooi.nl/afkoop/vragen-en-antwoorden, en anderen.

Oplossing:

Je kunt dit op verschillende manieren bereiken:

• Voor img-elementen gebruik je een leeg alt-attribuut: alt=””.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

Toetsenbordfocus is niet zichtbaar voor alle bezoekers

Advies. Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten. Op pagina’s van de website verschijnt op kleine schermen het mobiele navigatiemenu wanneer dit wordt geopend. De links in dit menu ontvangen toetsenbordfocus van de browser. Wanneer de focus echter op de links “GRONDWATERBEHEER” en “AFKOOP” komt, is de focusindicator slechts gedeeltelijk zichtbaar in de hoeken van de link, in plaats van duidelijk de volledige link te omlijnen. Hierdoor kunnen niet alle bezoekers goed zien welke link de focus heeft.

Toetsenbordfocus moet altijd zichtbaar zijn voor alle bezoekers. Bezoekers die met het toetsenbord navigeren, moeten goed kunnen zien waar ze zich op de pagina bevinden. Anders weten zij niet wanneer ze op Enter moeten drukken om een knop of link te activeren. Hetzelfde probleem is te zien op pagina’s met een carrousel waarin links staan. Wanneer deze op een klein scherm worden bekeken, ontvangen de links in de carrousel toetsenbordfocus van de browser. De focusindicator is dan slechts gedeeltelijk zichtbaar in de hoeken van de link, in plaats van de volledige link duidelijk te omlijnen. Zie bijvoorbeeld op pagina's: https://www.gwbeheergooi.nl/ , https://www.gwbeheergooi.nl/contact, https://www.gwbeheergooi.nl/grondwaterbeheer, en anderen

Oplossing:

Zorg dat de toetsenbordfocus goed zichtbaar is op de genoemde elementen voor alle bezoekers.

Link naar pagina: https://www.gwbeheergooi.nl/

Bewegende content kan niet gestopt, gepauzeerd of verborgen worden

Op deze pagina staat bovenaan een header waarin om de paar seconden een nieuwe afbeelding verschijnt. Deze inhoud kan niet worden gestopt, gepauzeerd of verborgen. Bewegende content kan storend zijn voor mensen met een cognitieve beperking. De bewegende inhoud zorgt voortdurend voor afleiding terwijl ze de tekst op de pagina proberen te lezen.

Oplossing:

Zorg dat er een manier is waarmee bezoekers beweging kunnen stoppen, pauzeren of verbergen. Dit geldt voor alle bewegende, knipperende, scrollende of automatisch actualiserende content die tegelijk met andere informatie wordt getoond, automatisch start en langer dan 5 seconden speelt.

Alternatieve tekst zorgt voor herhaling van tekst

Op deze pagina staan onder de kop “Nieuws” artikelen met afbeeldingen. De tekstalternatieven van deze afbeeldingen herhalen de tekst van de kop. Zie bijvoorbeeld het artikel onder “Complexe, omvangrijke verontreiniging Laarder Wasmeren opgenomen in grondwaterbeheer”. Deze afbeeldingen dragen geen andere informatie over dan al in de kop teksten staan. Daarom kunnen ze als decoratief worden beschouwd.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staan onder de kop “Nieuws” artikelen. Binnen de artikelen staat de tekst “Meer hierover” met een decoratieve afbeelding. Het tekstalternatief van deze afbeelding is "arrow right".

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=””.
• Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers.

Onlogische leesvolgorde van artikelen

Op deze pagina is de volgorde van HTML-elementen binnen de artikelen onder de kop “Nieuws” niet logisch. De huidige volgorde is afbeelding, kop, tekst. Als je deze artikelen van boven naar beneden laat voorlezen door een schermlezer, is niet duidelijk welke inhoud (afbeelding en/of tekst) bij welke kop hoort. Dat komt doordat de koppen niet bovenaan staan in de code van elk artikel. Dat kan verwarrend zijn voor bezoekers die een schermlezer gebruiken.

Oplossing:

Je lost dit op door alle inhoud die bij een bepaalde kop hoort, in de code onder die kop te plaatsen. Dit zorgt voor een logische structuur. De visuele vormgeving mag wel afwijken.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op deze pagina staan onder de kop “Nieuws” nieuwsartikelen. In het artikel onder “Gooi- en Eemlander over Grondwaterbeheer” staat een groep links die visueel als een groep wordt gepresenteerd, maar deze groepering is niet zichtbaar in de HTML-structuur. Zie de links “Artikel 1” en “Artikel 2”.

Oplossing:

Neem de elementen op in een ul-element.

De navigatielinks in de carrousel zijn niet met het toetsenbord te bedienen

Op deze pagina staat een carrousel. Deze carrousel heeft links met daarop een pijl om tussen de dia’s te wisselen. Deze links zijn echter niet toegankelijk via het toetsenbord.

Oplossing:

Zorg dat alle links met de Enter-, Return- of spatietoetsen kunnen worden bediend.

Bij 400% zoom is een horizontale scrollbar aanwezig

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt er een scrollbar.

Horizontaal scrollen is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.

Oplossing:

Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.

Link naar pagina: https://www.gwbeheergooi.nl/contact

Informatieve elementen zijn verborgen

Op deze pagina staan in het formulier velden met een asterisk. In de code heeft dit teken een tekstalternatief in de vorm van de tekst “Vereist”. Het element met deze informatieve tekst heeft echter visibility:hidden. Hierdoor is het verborgen voor schermlezers.

Oplossing:

Een mogelijke oplossing is om de tekst “Vereist” zichtbaar te maken voor schermlezers zonder deze visueel weer te geven. De CSS-eigenschap visibility:hidden mag niet worden gebruikt, omdat deze de inhoud zowel visueel als voor schermlezers verbergt. Gebruik in plaats daarvan aria-hidden="true" voor het sterretje en voeg het element met de tekst “Vereist” toe met class="sr-only" of een vergelijkbare techniek om het visueel te verbergen maar toegankelijk te maken voor schermlezers. Op deze manier ontvangen bezoekers die hulpsoftware gebruiken dezelfde informatie als ziende bezoekers.

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina staat een formulier met invoervelden voor persoonlijke gegevens, zoals naam, e-mailadres en telefoonnummer. Bij deze invoervelden ontbreekt het attribuut autocomplete.

Invoervelden voor persoonlijke informatie zoals achternaam, e-mailadres of telefoonnummer moeten het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: https://www.w3.org/Translations/WCAG22-nl/#input-purposes.

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

Op deze pagina is in het formulier de contrastratio tussen de blauwe rand (#00ADEF) van de invoervelden en de witte achtergrond 2,6: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 worden in het formulier foutmeldingen weergegeven met berichten zoals “Het veld Naam is verplicht.”.

Dit is een instructie, geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Oplossing:

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

Foutmelding is niet gekoppeld aan invoerveld

Op deze pagina toont het formulier foutmeldingen zoals “Het veld Naam is verplicht.” boven het formulier. De relatie tussen de foutmeldingen en invoervelden is niet vastgelegd in de code. Daardoor kan hulpsoftware dit niet doorgeven aan de bezoeker.

Oplossing:

Je lost dit op door bij het input-element een aria-describedby-attribuut te gebruiken dat verwijst naar het id van de foutmelding.

HTML5 foutmeldingen worden getoond

Op deze pagina wordt in het formulier HTML5-validatie gebruikt, waarbij standaard HTML5-foutmeldingen worden getoond wanneer het formulier met onjuiste gegevens in het veld “E-mailadres” wordt verzonden.

Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen op een andere manier, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Daarnaast verdwijnen deze foutmeldingen na een tijdje. Er is dus een tijdslimiet ingesteld.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn die dit probleem hebben.

Link naar pagina: https://www.gwbeheergooi.nl/nieuws/55

Meerdere pagina’s hebben dezelfde title-tekst

Op deze pagina en op de pagina https://www.gwbeheergooi.nl/nieuws/41 staat dezelfde tekst in het title-element van de pagina: “Grondwater Beheer 't Gooi - Nieuws”. Dit is niet de bedoeling. In het title-element van elke pagina moet een unieke tekst staan die de inhoud van de pagina beschrijft, bij voorkeur gevolgd door de naam van de organisatie. Staat hier bij twee of meer pagina’s dezelfde tekst? Dan kan dit verwarrend zijn voor de bezoeker. De navigatie tussen pagina’s wordt dan ook lastiger.

Oplossing:

Verander de tekst in het title-element van de pagina’s, zodat deze op elke pagina uniek is en de inhoud van de pagina nauwkeurig beschrijft.

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “Relevante informatie” het strong-element onjuist gebruikt voor opmaakdoeleinden om de tekst vet te maken: “Complexe, omvangrijke verontreiniging Laarder Wasmeren opgenomen in grondwaterbeheer”.

Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Visueel meerdere alinea’s, in de code maar één

Op deze pagina is een tekstblok met meerdere alinea’s onjuist gemarkeerd met div- en br-elementen.

Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Link naar de homepagina

Link naar pagina: https://www.gwbeheergooi.nl/grondwaterbeheer

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element onjuist gebruikt voor opmaakdoeleinden om de tekst vet te maken.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Visueel meerdere alinea’s, in de code maar één

Op deze pagina is een tekstblok met meerdere alinea’s onjuist gemarkeerd als één p-element.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Bij 400% zoom is een horizontale scrollbar aanwezig

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt er een schuifbalk.

Oplossing:

Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.

Link naar pagina: https://www.gwbeheergooi.nl/grondwaterbeheer/beheergebied

Visueel meerdere alinea’s, in de code maar één

Op deze pagina is een tekstblok met meerdere alinea’s onjuist gemarkeerd als één p-element.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Alternatieve tekst van een informatieve afbeelding is leeg

Oplossing:

Voeg een beschrijvende alternatieve tekst toe aan het alt-attribuut. Zorg dat alle informatie uit de afbeelding beschikbaar is. Dit kan ook door de tekst boven de afbeelding aan te vullen en daar de verschillende deelplannen te benoemen.

Beschrijving van complexe afbeelding ontbreekt

Op deze pagina staat binnen de sectie onder “Het gebiedsbeheerplan” een complexe afbeelding met een leeg alt-attribuut. Zie de afbeelding van een kaart met legenda.

Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alternatieve tekst past. Die informatie maak je toegankelijk door twee tekstalternatieven te bieden: een korte en een lange beschrijving.

Oplossing:

De korte beschrijving, meestal de alternatieve tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kun je als tekst op de pagina zelf plaatsen, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Link naar pagina: https://www.gwbeheergooi.nl/grondwaterbeheer/verbeteren

Geen nieuwe bevindingen.

Link naar pagina: https://www.gwbeheergooi.nl/grondwaterbeheer/benutten

Geen nieuwe bevindingen.

Link naar pagina: https://www.gwbeheergooi.nl/grondwaterbeheer/monitoring

Alternatieve tekst van een informatieve afbeelding is leeg

Op deze pagina staat een informatieve afbeelding met een diagram dat een leeg alt-attribuut heeft. Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet binnen de 150 karakters van de alternatieve tekst past. Die informatie maak je toegankelijk door twee tekstalternatieven te bieden: een korte en een lange beschrijving.

Oplossing:

De korte beschrijving, meestal de alternatieve tekst, moet de locatie van de lange beschrijving aangeven. De lange beschrijving kun je als tekst op de pagina zelf plaatsen, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan.

Link naar pagina: https://www.gwbeheergooi.nl/afkoop/vragen-en-antwoorden

Onjuiste HTML-opmaak gebruikt voor de lijst

Op deze pagina staat onder de kop “Wat houdt afkoop in?” een lijst met twee items en een sublijst, maar deze is onjuist gemarkeerd. Elk hoofditem is verpakt in een eigen ol-element in plaats van onderdeel te zijn van één geordende lijst. De sublijst onder het eerste item is gemarkeerd met een apart ul-element, in plaats van correct genest te zijn binnen de hoofdstructuur van de lijst. Daardoor ervaren schermlezergebruikers de inhoud niet als één gestructureerde lijst met een sublijst.

Meer over lijsten en waarom ze belangrijk zijn lees je op deze pagina https://properaccess.nl/waarom-correcte-html-lijsten-het-verschil-maken-in-toegankelijkheid/.

Oplossing:

Gebruik een juiste lijstmarkering door de hoofditems in één ol-element te plaatsen en de sublijst als een genest ul-element binnen het betreffende lijstitem op te nemen.

Link naar pagina: https://www.gwbeheergooi.nl/afkoop/vragen-en-antwoorden

Geen nieuwe bevindingen.

Link naar pagina: https://www.gwbeheergooi.nl/

Link naar PDF: https://www.gwbeheergooi.nl/application/files/8517/2182/3377/20201218_REGIO_GHI_GHI001___HDC_1_190744_257388255.pdf

PDF-document heeft geen titel

In het PDF-document is in de bestandskenmerken geen titel ingesteld.

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.

De taal is niet ingesteld in de metadata

In de metadata van dit PDF-document is de taal niet ingesteld. Het is belangrijk om de taal in te stellen. Dan kan hulpsoftware de informatie uit het bestand met de juiste uitspraakregels voorlezen.

Los het op in Adobe Acrobat:

1. Open het pdf-document in Adobe Acrobat.
2. Ga naar Bestand > Eigenschappen.
3. Ga naar het tabblad Geavanceerd.
4. Selecteer in het veld Taal de juiste taal voor het document, bijvoorbeeld Nederlands (Dutch).
5. Klik op OK en sla het bestand op.

Structuur van pdf-document is niet in codes vastgelegd

In het PDF-document ontbreken 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.

Link naar pagina: https://www.gwbeheergooi.nl/afkoop/afgekochte-locaties

Link naar PDF: https://www.gwbeheergooi.nl/application/files/4617/2199/4850/20240501_Locatlijst_Website_GBG.pdf

Dit PDF-document heeft meerdere soortgelijke problemen als het PDF-document op https://www.gwbeheergooi.nl/application/files/8517/2182/3377/20201218_REGIO_GHI_GHI001___HDC_1_190744_257388255.pdf. Deze problemen hebben betrekking op de volgende succescriteria: 1.3.1 (het document mist codes), 2.4.2 (de titel is niet ingesteld), 3.1.1 (de taal is niet ingesteld).

Kleurcontrast van kleine tekst is te laag

In het PDF-document staat witte tekst op een blauwe achtergrond (#00B0F0). De contrastratio is te laag: 2,5:1. Daarnaast staat witte tekst op een groene achtergrond (#9BBB59) met een contrastratio van 2,2:1. De oranje tekst (#FA7D00) op de lichtgrijze achtergrond (#F2F2F2) heeft eveneens een te lage contrastratio van 2,3:1.

Oplossing:

Zorg dat het contrast minimaal 4,5:1 is.

Link naar pagina: https://www.gwbeheergooi.nl/zoekresultaat?search_paths[]=&query=water

Placeholdertekst wordt gebruikt als label voor een invoerveld

Op deze pagina staat boven de zoekresultaten een invoerveld met de placeholdertekst “Zoek …”. Dit veld heeft echter geen zichtbare blijvende label; de placeholdertekst wordt gebruikt als label.

Invoervelden moeten een label hebben dat altijd zichtbaar is. Je kunt hier dus niet een placeholder-tekst voor gebruiken, want die verdwijnt zodra de bezoeker begint te typen.

Oplossing:

Voeg een permanent zichtbaar label toe bij het invoerveld.

Invoerveld heeft geen toegankelijke naam

Op deze pagina heeft het invoerveld met de placeholdertekst “Zoek …” geen toegankelijke naam.

Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Dit probleem voldoet ook niet aan succescriterium 2.5.3. Als de toegankelijke naam van een element niet hetzelfde is als de zichtbare tekst, in dit geval de placeholdertekst, is het voor bezoekers die gebruikmaken van spraaksoftware niet mogelijk om het element te bedienen.

Oplossing:

Dit kan worden opgelost door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element met de naam van het veld toe te voegen en dit te koppelen aan het veld.

Zorg dat de toegankelijke naam de zichtbare tekst bevat, en zet deze tekst het liefst vooraan in de naam. De toegankelijke naam mag ook precies hetzelfde zijn als de zichtbare tekst.

Kleurcontrast van linktekst is te laag

Op deze pagina heeft in de zoekresultaten de grijze tekst van links, zoals “https://www.gwbeheergooi.nl/”, op een witte achtergrond een contrastratio van 2,8:1.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Onvoldoende linktekst in paginering

Op deze pagina zijn de links in de paginering niet duidelijk genoeg. Voor ziende bezoekers is het duidelijk dat “1”, “2”, “3”, “Volgende” en dergelijke verwijzen naar pagina’s, maar voor bezoekers met een visuele beperking of die een schermlezer gebruiken is het niet altijd duidelijk dat dit links naar volgende pagina’s zijn.

Oplossing:

Je verbetert dit door de linkteksten aan te vullen met het (visueel verborgen) woord "pagina”.

Bij 400% zoom is een horizontale scrollbar aanwezig

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, verschijnt er een schuifbalk.

Oplossing:

Controleer of het horizontaal scrollen nodig is. Als dit niet zo is, zorg dan dat horizontaal scrollen niet mogelijk is bij inzoomen.

De opmaak van zoektermen in de zoekresultaten zorgt voor gefragmenteerde en onnatuurlijke schermlezeruitspraken

Advies. Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten. Op deze pagina worden in de zoekresultaten de overeenkomende zoektermen in span-elementen geplaatst om visuele opmaak toe te passen. Hierdoor pauzeren sommige schermlezers of behandelen ze de tekst als afzonderlijke woorden. Wanneer de zoekterm in een langer woord voorkomt, zoals “Grondwaterbeheer”, wordt het woord in meerdere elementen gesplitst. Schermlezers lezen deze onderdelen dan mogelijk afzonderlijk voor, wat de leeservaring verstoort. Bijvoorbeeld, “Grondwaterbeheer” kan worden uitgesproken als “Grond … water … beheer”, wat verwarrend is en het moeilijker maakt om de inhoud te begrijpen voor gebruikers van schermlezers.

Oplossing:

Zorg dat gemarkeerde zoektermen geen woorden in afzonderlijke delen splitsen voor schermlezers.

Link naar pagina: https://www.gwbeheergooi.nl/toegankelijkheid

Geen nieuwe bevindingen.

Link naar pagina: https://www.gwbeheergooi.nl/nieuws/41

Deze pagina heeft dezelfde titel als de pagina op https://www.gwbeheergooi.nl/nieuws/55. De beschrijving van dit probleem is al opgenomen in de sectie die aan die pagina is gewijd.

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “Relevante informatie” het strong-element onjuist gebruikt voor opmaakdoeleinden om de tekst vet te maken: “Provincie Noord-Holland en Hilversum sluiten Package deal over verontreinigd grondwater”.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Visueel meerdere alinea’s, in de code maar één

Op deze pagina is een tekstblok met meerdere alinea’s onjuist gemarkeerd als één p-element.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Alternatieve tekst van informatieve afbeelding is niet betekenisvol

Op deze pagina staat een afbeelding met als tekstalternatief "MBF6923_11zon.jpg". Deze tekst beschrijft de afbeelding onvoldoende.

Afbeeldingen die informatie overdragen moeten een betekenisvolle alternatieve tekst hebben, waarin de belangrijke informatie uit de afbeelding wordt beschreven.

Oplossing:

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