Audit digitale toegankelijkheid van website veenweidenkrimpenerwaard.nl

#1 - Contrast van onderstreping is te laag

In het hoofdmenu heeft de huidige link een onderstreping met onvoldoende kleurcontrast. De witte onderstreping tegen de lichtgroene (#DEDD26) achtergrond heeft een contrastverhouding van 1,5:1, wat lager is dan de aanbevolen minimumwaarde van 3,0:1 voor visuele aanduidingen zoals onderstrepingen.

Hetzelfde probleem doet zich voor in het bovenste menu, waar de omgekeerde kleurcombinatie wordt gebruikt: een lichtgroene onderstreping op een witte achtergrond.

Oplossing:

Zorg dat de onderstreping van de huidige link minimaal een contrast van 3,0:1 heeft met de achtergrond.

#2 - Invoerveld heeft geen toegankelijke naam

Op deze pagina hebben het invoerveld onder het label “Beveiligingsvraag” geen toegankelijke naam. Hierdoor is het voor blinde of slechtziende bezoekers die een schermlezer gebruiken niet duidelijk wat zij in moeten vullen.

Oplossing:

Dit los je op door het invoerveld een toegankelijke naam te geven, bijvoorbeeld door een label-element aan het veld te koppelen.

#3 - CAPTCHA-afbeeldingen hebben geen tekstalternatief

Op deze pagina wordt CAPTCHA gebruikt in het formulier. Deze CAPTCHA bestaat uit een afbeelding met tekst die verandert bij het vernieuwen van de pagina. De alternatieve tekst van de afbeelding is alleen “Beveiligingsvraag:” en deze tekst blijft de hele tijd hetzelfde.

Deze widget is dus volledig afhankelijk van visuele informatie (gebaseerd op een zintuig). En is niet toegankelijk voor bezoekers die deze CAPTCHA met een schermlezer benaderen. Daarnaast ontbreekt de mogelijkheid om de CAPTCHA over te slaan. Het is belangrijk om deze CAPTCHA toegankelijk te maken voor alle bezoekers. Een betere oplossing is geen CAPTCHA te gebruiken.

Op deze pagina wordt een CAPTCHA gebruikt. Er is geen alternatief voor de afbeeldingen in de CAPTCHA. Daarnaast biedt de website momenteel geen toegankelijke alternatieve methode voor de CAPTCHA als geheel. Om die reden moet de captcha zelf volledig toegankelijk zijn. Dat is op dit moment niet zo. De tekst “Beveiligingsvraag:” is niet voldoende.

Oplossing:

Ons advies is om helemaal geen CAPTCHA te gebruiken, omdat het altijd een drempel vormt. Bekijk de Engelstalige pagina https://www.w3.org/TR/turingtest/ voor meer informatie en eventuele alternatieven.

#4 - Kleurcontrast van tekst is te laag (tekst groter dan 24px)

Op deze pagina wordt een CAPTCHA gebruikt. De tekst in de CAPTCHA is geel (#E9E939) op een bruine achtergrond. De kleurcontrastverhouding verschilt per meetpunt, maar is in de meeste gevallen onvoldoende, bijvoorbeeld 1,8:1.

Oplossing:

Deze tekst is groter dan 24px, daarom moet het contrast minimaal 3,0:1 zijn. Op deze pagina staat een instructie die uitlegt hoe je kleurcontrast kunt testen: https://properaccess.nl/hoe-test-ik-kleurcontrast/.

#5 - Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op een onzichtbaar interactief element na de link “Deelgebieden”.

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

Oplossing:

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

#6 - Elementen die toetsenbordfocus krijgen zijn bedekt door sticky header

Op deze pagina wordt een deel van de inhoud door de sticky header bedekt wanneer de website met het toetsenbord van onder naar boven wordt genavigeerd. Terwijl interactieve elementen zoals “Het plan” en “Deelgebieden” nog steeds toetsenbordfocus ontvangen, is de focusindicator verborgen achter de sticky header. Hierdoor kunnen bezoekers die met het toetsenbord navigeren niet zien waar de toetsenbordfocus zich bevindt.

Oplossing:

Zorg ervoor dat de sticky header of footer geen interactieve elementen of hun focusindicatoren bedekt. Je moet hiervoor bijvoorbeeld de z-index aanpassen of elementen herpositioneren.

#7 - Beschrijving van complexe afbeelding ontbreekt of onvolledig

Op deze pagina staat in de sectie onder “Deelgebieden” een complexe afbeelding met als tekstalternatief “2024-09-18 - Gebied-WP24-v1”.

Complexe afbeeldingen zoals infographics en schema’s bevatten veel informatie die niet toegankelijk is voor iemand die de afbeelding niet kan zien.

Een vergelijkbaar probleem doet zich voor bij dezelfde afbeelding onder de kop “Twaalf deelgebieden” op pagina https://veenweidenkrimpenerwaard.nl/plan/.

Oplossing:

Deze informatie kan gegeven worden via een uitgebreide alt-tekst of een uitgeschreven tekst die op de pagina zelf geplaatst kan worden, maar deze mag ook op een andere pagina of in een downloadbaar bestand staan. Als auteur van de pagina weet u zelf het beste welke informatie u aan de lezer wilt presenteren: alle gegevens uit deze kaart of alleen de projectfasen in grote lijnen.

#8 - Verwijzing naar kleur

Op de homepagina staat onder het kopje “Deelgebieden” de volgende tekst “De groen gekleurde gebieden zijn gerealiseerde projecten. De geel gekleurde gebieden realiseren we..”. In deze tekst wordt verwezen naar kleur. Deze informatie is niet toegankelijk voor een bezoeker die de kleuren niet kan zien of onderscheiden.

Oplossing:

Onder deze tekst staat een lijst met gebieden. Geef in tekst aan wanneer elk gebied is gerealiseerd.

#9 - Alleen kleur gebruikt in legenda bij kaart

Op deze pagina wordt in de kaart onder “Deelgebieden” uitsluitend kleur gebruikt om informatie over te brengen — om de verschillende gebieden van elkaar te onderscheiden.

Alleen als je de kleuren kunt zien en van elkaar kunt onderscheiden zie je welke regio bij welke categorie in de legenda hoort.

Een vergelijkbaar probleem doet zich voor bij dezelfde afbeelding onder de kop “Twaalf deelgebieden” op pagina https://veenweidenkrimpenerwaard.nl/plan/.

Dit is slechts een advies omdat kaarten onder de uitzondering vallen.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering of datalabels in tekst.

#10 - Onvoldoende contrast van informatieve elementen

Op deze pagina staat een afbeelding van een kaart met projectfasen. Sommige kleurcombinaties van aangrenzende gebieden hebben onvoldoende contrast. Zo hebben de gele (#FCEE15) en oranje (#F5A64A) gebieden een contrastverhouding van 1,7:1.

Een vergelijkbaar probleem doet zich voor bij dezelfde afbeelding onder de kop “Twaalf deelgebieden” op pagina https://veenweidenkrimpenerwaard.nl/plan/.

Dit is slechts een advies omdat kaarten onder de uitzondering vallen.

Oplossing:

Het contrast van informatieve elementen ten opzichte van aangrenzende gebieden moet minimaal 3,0:1 zijn, zodat gebruikers ze goed van elkaar kunnen onderscheiden. Controleer alle kleuren in deze kaart.

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

Deze pagina bevat iframes met beschrijvende title-attributen, maar deze geven niet aan welk type inhoud erin staat.

Iframes moeten een duidelijke beschrijving hebben meestal via het title-attribuut. Hierin moet staan welk type inhoud het is (bijvoorbeeld een podcast of video) en waar het inhoudelijk over gaat. Deze beschrijving moet uniek en betekenisvol zijn, zodat bezoekers met hulpsoftware kunnen bepalen of ze de inhoud willen verkennen.

Oplossing:

Voeg aan het title-attribuut een woord toe dat beschrijft welk type inhoud het iframe bevat en waar deze over gaat. Bijvoorbeeld “Video: Het ontwerp en de inrichting”.

<iframe title=”Video …”>

#12 - Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina bevatten alle video’s aan het begin enige tekst en het logo “Veenweiden Krimpenerwaard”. Er wordt echter geen media-alternatief en geen audiodescriptie aangeboden. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Voor succescriterium 1.2.3 kan dit worden opgelost met een geschreven tekst (media-alternatief). Voor succescriterium 1.2.5 is dat echter niet genoeg. Hiervoor moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

strong- en em-element is gebruikt voor opmaak

Op deze pagina worden de strong- en em-elementen misbruikt voor opmaakdoeleinden in de tekst die begint met “U kunt meeliften met de ‘natuurontheffingen’...”.

De elementen strong en em hebben een semantische waarde: ze geven een bepaalde betekenis aan de tekst die ze bevatten. Beide elementen geven aan dat de tekst extra nadruk moet krijgen. Om die reden mag je deze elementen niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt of cursief). Gebruik hiervoor CSS.

Oplossing:

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

#13 - PDF document heeft geen titel

Dit PDF document heeft ook geen titel. De instructie voor het instellen van de titel in de documenteigenschappen is beschreven in de vorige sectie.

#14 - Informatieve afbeelding is als achtergrondafbeelding geplaatst

Op alle pagina’s van dit PDF document staan dezelfde twee logo’s bovenaan, maar ze zijn als artefacten gemarkeerd. Afbeeldingen die als artefact zijn toegevoegd, zijn niet zichtbaar voor schermlezers. De informatie in deze afbeeldingen is daardoor niet toegankelijk voor bezoekers die de tekst laten voorlezen. Informatieve afbeeldingen (logo's) moeten via een Figure-tag worden geplaatst en een alternatieve tekst krijgen die de afbeelding duidelijk beschrijft.

Oplossing:

Voeg de logo’s toe met de Figure-tags en geef ze beschrijvende alternatieve teksten. Het is voldoende om ze alleen op de eerste pagina van de PDF toe te voegen.

#15 - De taal is verkeerd ingesteld

In de metadata van dit PDF document is de taal ingesteld op “Engels” (en).

Dit klopt niet: de taal van het document is Nederlands. Schermlezers lezen de tekst nu voor met de uitspraakregels van het Engels. Dat maakt het al snel onbegrijpelijk voor een blinde bezoeker.

Oplossing:

Verander de code in “nl”.

#16 - Koppen zijn niet als kop gemarkeerd

In dit PDF document zijn de koppen niet als koppen gemarkeerd. Zie bijvoorbeeld “Omgang met Wet natuurbescherming bij inrichting door zelfrealisatoren”, “Aanleiding”, “Wettelijk belang en alternatievenafweging” en andere.

Op deze manier verschilt de visuele informatiestructuur van de structuur van het document in de tags.

Oplossing:

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

Je kunt het nabewerken in Adobe Acrobat.

1. Open de codelaag.
2. Klik met de rechtermuisknop naast de code die je wilt veranderen en kies voor “Nieuwe code”.
3. Voeg een kop-tag toe.
4. Versleep de tekst uit de P-tag in de nieuwe kop-tag en verwijder de lege P.

#17 - PDF document heeft geen titel

Dit PDF document heeft geen titel ingesteld in de bestandseigenschappen.

Zelfs als er een titel op de eerste pagina staat, moet in de PDF-instellingen ook een documenttitel worden ingesteld. Bij het openen van een pdf in een pdf-lezer (zoals Adobe Acrobat of een browser) wordt meestal de bestandsnaam bovenaan in de titelbalk getoond, bijvoorbeeld document123.pdf. Wanneer in de pdf-metadata echter een documenttitel is ingesteld, wordt deze titel in plaats van de bestandsnaam weergegeven. Dit maakt het document toegankelijker voor bezoekers met verschillende beperkingen, omdat zij dan snel en gemakkelijk kunnen bepalen 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.

#18 - Structuur van PDF document is niet in codes vastgelegd

Dit PDF document bevat geen tags, waardoor de inhoud ontoegankelijk 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.

Opslaan als getagde PDF in Word (Windows)

Ga naar Bestand. Kies Opslaan als Adobe PDF (als je Acrobat hebt) of ga naar Meer → Exporteren → PDF/XPS-document maken. In het venster dat opent, klik je op Opties. Zet een vinkje bij Documentstructuurtags voor toegankelijkheid en bij Bladwijzers maken met koppen. Op deze manier kunnen gebruikers met het toetsenbord snel van sectie naar sectie springen. Dit werkt alleen wanneer echte kopstijlen zijn gebruikt.

Opslaan als getagde PDF in Word (Mac)

Ga naar Bestand → Opslaan als, kies PDF in het keuzemenu en selecteer Best voor elektronische distributie en toegankelijkheid, dat gebruikmaakt van Microsoft online service. Op Mac worden bladwijzers automatisch op basis van de koppen gegenereerd, zonder dat hiervoor instellingen hoeven te worden aangepast.

#19 - Kleurcontrast van tekst is te laag

In dit PDF document wordt vaak de combinatie van groen en wit of lichtgroen gebruikt, maar de kleurcontrastverhouding is onvoldoende. Zo heeft de groene tekst (#009A45) “Balans tussen natuur, recreatie en landbouw” op een lichtgroene achtergrond (#C0E0CB) een contrastverhouding van 2,6:1. Witte tekst, beginnend met “In Naturalis is sinds kort de tentoonstelling ‘Het bos van Suriname’...”, op een groene achtergrond (#009A45) heeft een contrastverhouding van 3,7:1. Groene tekst (#029A45) op een lichtgroene achtergrond (#D6EADD) heeft een contrastverhouding van 2,9:1. Controleer ook andere teksten in het document

Oplossing:

Zorg ervoor dat de contrastverhoudingen voldoen aan de minimaal vereiste waarden: voor tekst met een lettergrootte tot 24 px of vetgedrukt moet dit minimaal 4,5:1 zijn, en voor grote tekst vanaf 24 px of vetgedrukt minimaal 3,0:1.

#20 - Contrast van onderstreping is te laag

Op deze pagina heeft de huidige link, boven en onder de zoekresultaten, een onderstreping met onvoldoende kleurcontrast. De witte onderstreping tegen de lichtgroene (#DEDD26) achtergrond heeft een contrastverhouding van 1,5:1, wat lager is dan de aanbevolen minimumwaarde van 3,0:1 voor visuele aanduidingen zoals onderstrepingen.

Een vergelijkbaar probleem doet zich voor bij soortgelijke elementen op pagina https://veenweidenkrimpenerwaard.nl/nieuws/.

Oplossing:

Zorg dat de onderstreping van de huidige link minimaal een contrast van 3,0:1 heeft met de achtergrond.