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

Op alle pagina’s staat in de cookiebanner een link met blauwe tekst (#0093D6) op een lichtgele achtergrond (#FFF7C5). De contrastratio is te laag: 3,2: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/.

Cookiebanner krijgt niet als eerste toetsenbordfocus

De eerste keer dat een bezoeker de website opent, verschijnt er een cookiebanner. Deze banner krijgt echter niet als eerste de toetsenbordfocus, terwijl dat wel zou moeten. De banner bedekt de inhoud van de pagina, en als de toetsenbordfocus er niet meteen naartoe gaat, kunnen bezoekers die alleen met het toetsenbord navigeren het bericht niet sluiten. Om deze banner te sluiten, moet de bezoeker helemaal naar de onderkant van de pagina tabben.

Oplossing:

Zorg dat de focus als eerste naar de cookiebanner gaat.

Toegankelijke namen zijn in het Engels geschreven

Op alle pagina’s is er een dialoogvenster voor cookies. De toegankelijke naam van dit dialoogvenster is in het Engels “Cookie Notice”, en wordt toegevoegd via een aria-label. Deze labels worden door schermlezers voorgelezen volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Hetzelfde probleem komt voor op een klein scherm bij de knop voor het mobiele menu “Toggle mobile menu”.

Oplossing:

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

Knop heeft niet de juiste toegankelijke rol

Op alle pagina’s staat in de cookiebanner een knop met een pictogram van een “x”. Deze knop heeft 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. Dit probleem hangt ook samen met succescriterium 2.1.1, omdat deze knop niet met het toetsenbord bediend kan worden.

Oplossing:

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

Toetsenbordfocus is niet zichtbaar

Op alle pagina’s is in de cookiebanner de toetsenbordfocus niet zichtbaar op de knoppen “Cookies toestaan” en “Cookies weigeren”. 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.

Focus niet meer zichtbaar omdat de cookiebanner bij inzoomen een deel van de pagina bedekt

Wanneer iemand de website voor het eerst bezoekt, verschijnt er een cookiebanner. Als de bezoeker vervolgens inzoomt tot 200% of 400% op een scherm met een resolutie van 1280 bij 1024 pixels, komt de toetsenbordfocus terecht op elementen die onder de banner verborgen zijn. Hierdoor is niet zichtbaar waar de focus zich bevindt.

Oplossing:

Zorg dat de cookiebanner meeschaalt bij inzoomen, zodat de focus zichtbaar is.

Kleurcontrast van tekst is te laag

Op alle pagina’s staat lichtblauwe tekst (#0093D6) op een witte achtergrond of andersom, bijvoorbeeld bij links in het hoofdmenu (“Initiatieven”), op de hoofdpagina (“Bijentuin Plantasia”) en andere. De contrastratio is te laag: 3,4:1.

Oplossing:

Voor tekst kleiner dan 24px en niet vetgedrukt moet het contrast minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet het contrast 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 alle pagina’s staat lichtgroene tekst (#95C11F) op een witte achtergrond of andersom, bijvoorbeeld op de homepage bij de kop “Kennis en inspiratie”. De contrastratio is te laag: 2,1:1. Dit probleem komt ook bij sommige links voor als deze met de muis worden aangewezen (hover), bijvoorbeeld op pagina https://platform.groenkapitaal.nl/toekomstversnellers/ bij de links “hier” en “aanmeldingsformulier”.

Oplossing:

Voor tekst kleiner dan 24px en niet vetgedrukt moet het contrast minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet het contrast 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/.

Staat van submenu niet doorgegeven aan schermlezer

Op deze pagina heeft de hoofdmenulink “Initiatieven” een submenu, maar een blinde bezoeker krijgt geen informatie over of het submenu open of gesloten is. Als er een link is die een submenu kan tonen of verbergen, dan moet hulpsoftware de staat van dat submenu (zichtbaar of verborgen) kunnen bepalen.

Oplossing:

Je kunt hiervoor het aria-expanded-attribuut gebruiken.

Link heeft geen correcte toegankelijke rol

Op alle pagina’s hebben in de footer de links met de tekst “Groen Kapitaal” en “Netwerk” niet de juiste toegankelijke rol.

Elk HTML-element heeft standaard een bepaalde 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. Dit probleem hangt ook samen met succescriterium 2.1.1, omdat deze links niet met het toetsenbord bediend kunnen worden.

Oplossing:

Zorg dat de link de juiste rol heeft door een van de onderstaande oplossingen toe te passen:

1. Het a-element gebruiken: als dit nog niet zo is, gebruik dan het a-element om de link te maken. Dit element heeft standaard al de rol van link.
2. role=”link” toevoegen: als er een ander element voor de link is gebruikt (meestal niet aan te raden), voeg dan het attribuut role=”link” toe om de rol van dit element expliciet te definiëren. Let er in dit geval dan ook op dat ervoor wordt gezorgd dat het element te bedienen is met het toetsenbord.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op alle pagina’s staat in de footer een groep links, “Privacyverklaring” en “Proclaimer”, die visueel als een groep worden weergegeven, maar deze groepering is niet terug te zien in de HTML-structuur. 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.

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.

Geneste lijsten zijn onjuist gemarkeerd

Op alle pagina’s met lijsten is de lijststructuur onjuist. Geneste lijsten zijn gemarkeerd als afzonderlijke lijsten in plaats van als geneste lijsten binnen een listelement. Hierdoor lezen schermlezers deze informatie niet als één lijst met een geneste lijst, maar als meerdere afzonderlijke lijsten. Dit maakt het voor schermlezergebruikers moeilijk om te begrijpen hoe de informatie in de lijst eigenlijk is opgebouwd.

Zie bijvoorbeeld de pagina https://platform.groenkapitaal.nl/toekomstversnellers/ onder de kop “Deelnamecriteria”, en de pagina https://platform.groenkapitaal.nl/netwerk/ onder de tekst “Ondertekenaars verklaring Groen Kapitaal”. 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:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Link naar pagina: https://platform.groenkapitaal.nl

Link heeft geen toegankelijke naam

Op deze pagina mist de link “Jouw initiatief wordt werkelijkheid!” een toegankelijke naam. Datzelfde probleem komt ook voor bij de links “Alle initiatieven” en “Verhalen bibliotheek”. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de link is.

Dit probleem hangt ook samen met succescriterium 2.4.4, omdat deze link geen duidelijk doel heeft, en met succescriterium 2.5.3, omdat de zichtbare tekst van de link niet voorkomt in de toegankelijke naam, waardoor bezoekers geen spraakbesturing kunnen gebruiken.

Oplossing:

Dit kan worden opgelost door een toegankelijke naam toe te voegen met behulp van linktekst, aria-labels of een andere methode die de zichtbare linktekst bevat. In deze situatie kan de zichtbare tekst, bijvoorbeeld “Jouw initiatief wordt werkelijkheid”, ook binnen de link geplaatst worden. De link staat nu in de code los van de tekst, wat dit probleem veroorzaakt.

Kop-element gebruikt voor tekst die geen kop is

De teksten “Alle initiatieven” en “Verhalen bibliotheek” op deze pagina zijn geen koppen, maar ze zijn onterecht gemarkeerd met een h4-element om de lettergrootte te vergroten.

Het kop-element (h4) is niet betekenisvol gebruikt, maar alleen om een visueel effect te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h4-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h4-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen. 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/.

De beschrijving in het title-attribuut van het iframe beschrijft de inhoud niet

Op deze pagina staat onder de kop “Jouw initiatief wordt werkelijkheid!” een iframe met een video. Het title-attribuut daarvan is “YouTube video player 1”. Iframes moeten een goede beschrijving hebben. Die zet je meestal in het title-attribuut van het iframe. Er moet in staan welk type inhoud het is (bijvoorbeeld een podcast of video), en waar het inhoudelijk over gaat. Deze beschrijving van de inhoud moet uniek en betekenisvol zijn. Door de beschrijving kunnen bezoekers met hulpsoftware beslissen of het de moeite waard is om de inhoud van het iframe te verkennen.

Oplossing:

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

Logo heeft geen alternatieve tekst

Op deze pagina staat onder de kop “Partners” een slider met logo’s zonder tekstalternatieven. Als het alt-attribuut van een afbeelding leeg is (alt=""), negeren schermlezers de afbeelding. Door de alt-tekst niet in te vullen, zeg je eigenlijk: deze afbeelding is puur decoratief, geeft geen informatie. Er wordt dan dus niets voorgelezen. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven. Datzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/netwerk/.

Oplossing:

Voeg een alt-tekst toe die de volledige tekst van het logo bevat.

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina staat onder de kop “Partners” een slider met pijltjestoetsen. De toegankelijke namen daarvan zijn in het Engels en worden toegevoegd via een aria-label, bijvoorbeeld “Previous slide”. Deze labels worden voorgelezen door schermlezers volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Datzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/netwerk/.

Oplossing:

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

Bewegende content kan niet gestopt, gepauzeerd of verborgen worden

Op deze pagina staat onder de kop “Partners” een slider die om de paar seconden nieuwe logo’s toont. Deze slider 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. Hetzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/netwerk/.

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.

Toetsenbordfocus is niet zichtbaar

Op deze pagina is onder de kop “Initiatieven die onze biodiversiteit stimuleren” de toetsenbordfocus niet zichtbaar op links met afbeeldingen, bijvoorbeeld “Bijentuin Plantasia”. Datzelfde probleem komt verderop voor bij de kop “Natuurinclusief bouwen – Een zeer informatieve longread”, evenals bij de links “Alle initiatieven” en “Verhalen bibliotheek”. 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.

Hetzelfde probleem komt voor

• op pagina https://platform.groenkapitaal.nl/initiatieven/ bij links met afbeeldingen,
• op pagina https://platform.groenkapitaal.nl/netwerk/ bij een link met een afbeelding en de link “Heb jij een duurzaam initiatief en kan je hulp gebruiken?”,
• op pagina https://platform.groenkapitaal.nl/greenspots/ bij links met afbeeldingen en pictogrammen, en op andere pagina’s.

Oplossing:

Zorg dat de toetsenbordfocus zichtbaar is op de genoemde elementen.

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

Op deze pagina staat een link met witte tekst “Alle initiatieven” op een roze achtergrond (#E91E63). De contrastratio is te laag: 4,3:1.

Hetzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/netwerk/, bijvoorbeeld bij “Aanmelden als partner”, en op de pagina https://platform.groenkapitaal.nl/greenspots/, bijvoorbeeld bij “Ontdek de Greenspots”.

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/.

De Youtube-video’s gebruiken letters als sneltoetsen

Op deze pagina staat onder de kop “Jouw initiatief wordt werkelijkheid!” een YouTube-videospeler waarin sneltoetsen met één teken gebruikt worden. De Youtube-speler gebruikt sneltoetsen, zoals de ‘k' om de video te starten of stoppen en de 'm' om het geluid uit te zetten. Deze sneltoetsen botsen met schermlezers. Ze zijn namelijk ook actief als de toetsenbordfocus op een ander element in de videospeler staat. Dit kan problemen geven voor mensen die met spraakbediening werken, omdat deze letters soms in de uitgesproken woorden zitten. Ook voor mensen die per ongeluk een toets op het toetsenbord indrukken is het onhandig.

Oplossing:

Je lost dit op door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML-code. Hiermee schakel je de sneltoetsen uit, terwijl toetsenbordbediening mogelijk blijft. Bekijk voor meer informatie https://developers.google.com/youtube/player_parameters#disablekb (Engels).

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina staat onder de kop “Jouw initiatief wordt werkelijkheid!” een video. In de video komen op verschillende momenten tekst en logo’s voor (bijvoorbeeld rond 0:43 en 3:22). Deze video bevat visuele informatie (tekst en logo’s) die niet toegankelijk is voor blinde gebruikers. Er is geen media-alternatief of audiobeschrijving beschikbaar. Bezoekers die blind of slechtziend zijn, missen hierdoor informatie. Dit probleem hangt ook samen met succescriterium 1.2.5, omdat er geen audiobeschrijving aanwezig is.

Oplossing:

Dit kan voor dit succescriterium (1.2.3) worden opgelost met een geschreven tekst (media-alternatief), maar om aan succescriterium 1.2.5 te voldoen, moet een audiobeschrijving worden toegevoegd die de visuele elementen in de video beschrijft, zoals namen, functies, logo’s en teksten.

SC 1.2.2 De automatisch gegenereerde ondertiteling heeft fouten

Op deze pagina staat onder de kop “Jouw initiatief wordt werkelijkheid!” een video met een voice-over. Hoewel er ondertiteling aanwezig is, is deze automatisch gegenereerd en daardoor onnauwkeurig. Video’s waarin gesproken wordt, moeten altijd goede ondertiteling krijgen. Zo krijgen bezoekers die de video niet (goed) kunnen horen ook alle informatie. Deze ondertiteling moet exact hetzelfde zijn als wat wordt gezegd. De automatisch gegenereerde ondertiteling voldoet hier niet aan, omdat er punctuatie ontbreekt en er fouten in kunnen zitten.

Oplossing:

Zorg dat de ondertiteling van hoge kwaliteit is en exact weergeeft wat wordt gezegd in de video.

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Op deze pagina, wanneer bezoekers tekstspatiëring toepassen zoals beschreven in dit succescriterium, wordt de tekst “Gezonde leefomgeving, Klimaatadaptatie, Groen als verbinder”, onder de kop “Natuurspeelplein Julianaschool Kwartellaan in Bussum”, 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.

Link naar pagina:< https://platform.groenkapitaal.nl/contact/>

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt bij een formulier met invoervelden voor persoonlijke gegevens (zoals achternaam, e-mailadres en telefoonnummer) 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.

label-element is niet gekoppeld aan invoerveld

Op deze pagina staat een formulier waarbij de label-elementen niet expliciet gekoppeld zijn aan de bijbehorende invoervelden en select-elementen, bijvoorbeeld “Voornaam”. label-elementen moeten gekoppeld zijn aan de bijbehorende invoervelden. Hierdoor krijgt het invoerveld een toegankelijke naam en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker.

Dit probleem hangt ook samen met succescriteria 2.5.3 en 4.1.2, omdat deze invoervelden en select-elementen geen toegankelijke naam hebben en het zichtbare label daarmee ook niet gebruikt kan worden met spraakbesturing.

Oplossing:

Koppel de label-elementen aan hun bijbehorende invoervelden door het for attribuut op het label-element te gebruiken. In dit attribuut zet je het id van het invoerveld waar het label bij hoort.

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

Op deze pagina tonen de meldingen na het versturen van het formulier de tekst “Dit veld 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.

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

Op deze pagina staat een formulier. Alle invoervelden hebben lichtgrijze randen (#D2D2D2) op een witte achtergrond. De contrastratio is te laag: 1,5:1.

Oplossing:

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

Toetsenbordfocus wordt alleen met kleur aangegeven

Op deze pagina staat in het formulier een reCAPTCHA. Wanneer het selectievakje van de reCAPTCHA toetsenbordfocus krijgt, verandert alleen de randkleur van het vakje van zwart naar blauw. Voor bezoekers met een visuele beperking of kleurenblindheid is zo’n subtiele kleurverandering vaak niet duidelijk genoeg. En ook mensen die met het toetsenbord navigeren moeten goed kunnen zien op welke plek van de pagina ze zijn. Daarvoor moet er een duidelijk zichtbare focusindicator zijn.

Oplossing:

Je kunt het beste een extra visuele aanduiding toevoegen. Denk aan een dikkere rand, een onderstreping of een verandering van achtergrond.

Toetsenbordfocus is niet zichtbaar

Op deze pagina staat een formulier. De toetsenbordfocus is niet zichtbaar op alle select-elementen. Datzelfde probleem komt voor bij de knoppen “Uploaden document”, “Uploaden video” en “Verzenden”.

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.

Link naar pagina: https://platform.groenkapitaal.nl/initiatief/groen-vitaal/

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “Groen Vitaal” het strong-element verkeerd gebruikt voor opmaakdoeleinden. De hele alinea “Landje van Groen Vitaal is een … diverse (bedrijfs)activiteiten” is in een strong-element geplaatst om deze vetgedrukt weer te geven. 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.

strong-element in plaats van kop-element

Op deze pagina is de volgende tekst onjuist gemarkeerd met strong in plaats van met een geschikt kopniveau-element: “Vitaliseren met de kracht van de natuur”.

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.

Oplossing:

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

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de volgende teksten niet als koppen gemarkeerd: “Initiatiefnemer”, “Contactpersoon” en andere. Visueel zien deze teksten er wel uit als kop en ze zeggen iets over de content eronder.

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.

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

Op deze pagina staat zwarte tekst (#333333), bijvoorbeeld “Corina Busman”, op een blauwe achtergrond (#2891E1). De contrastratio is te laag: 3,7: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/.

Link naar pagina: https://platform.groenkapitaal.nl/toekomstversnellers/

em-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “Toekomstversnellers, een korte uitleg” het em-element verkeerd gebruikt voor opmaakdoeleinden, bijvoorbeeld bij de tekst “De inschrijving is inmiddels … per PPLG-regio”.

Het em-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 (cursieve tekst).

Oplossing:

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

Links alleen door kleur te onderscheiden van gewone tekst

Op deze pagina bevat de alinea onder de kop “Toekomstversnellers, een korte uitleg” de link “hier”. Kleur is het enige verschil tussen de link en de statische tekst.

Datzelfde probleem komt verderop voor onder de kop “Deelnamecriteria” bij de link “aanmeldingsformulier”. Deze links zijn alleen te herkennen aan een kleurverschil met de gewone tekst. Dit kan een probleem zijn voor kleurenblinde of slechtziende bezoekers. Zij kunnen de kleuren mogelijk niet onderscheiden, en zien dan niet dat er een link in de tekst staat.

Het probleem komt voor

• op de pagina https://platform.groenkapitaal.nl/netwerk/ bij de link “Verklaring Groen Kapitaal”,
• op de pagina https://platform.groenkapitaal.nl/natuurinclusief-bouwen-een-zeer-informatieve-longread/ bijvoorbeeld bij “website bouw natuurinclusief”,
• op de pagina https://platform.groenkapitaal.nl/toolbox-voor-gemeenten-en-inwoners/ bijvoorbeeld bij “Netwerk Groenblauwe Gemeenten”, en op andere pagina’s.

Oplossing:

Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn die niet afhankelijk is van kleur. Bijvoorbeeld:

• Onderstrepen: geef de links een onderstreping.
• Rand: voeg een subtiele rand (kader) toe aan de links.
• Verhoogd contrast + hover-effect: verhoog het contrast tussen de kleur van de links en de omringende tekst tot minimaal 3,0:1, en voeg een tweede visuele indicator toe bij hover, zoals een onderstreping of verandering in de achtergrondkleur.

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop “PPLG” het strong-element verkeerd gebruikt voor opmaakdoeleinden, bijvoorbeeld bij “Natuur”. 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.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina komt de zichtbare linktekst “Genomineerden Toekomstversnellers” niet voor in de toegankelijke naam (“Aanmelden”), die wordt toegevoegd via een aria-label. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren. Het linkdoel is nu ook niet duidelijk, want de link gaat naar een pagina waar de genomineerden bekeken kunnen worden en niet naar een pagina waar iemand zich kan aanmelden.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval kun je het aria-label aanpassen, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Genomineerden Toekomstversnellers - Bekijk hier de genomineerden!”. Nog logischer zou zijn om het link-element om de zichtbare tekst heen te plaatsen, zodat deze automatisch overgenomen wordt. De losse link op de pijl kan dan ook verwijderd worden, hiervan is het linkdoel nu “Link to https://platform.groenkapitaal.nl/jury-van-toekomstversnellers-kiest-15-topideeen/”. Dit is niet goed leesbaar.

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de links “Genomineerden Toekomstversnellers” en “Aanmelden?”.

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.

Link naar pagina: https://platform.groenkapitaal.nl/natuurinclusief-bouwen-een-zeer-informatieve-longread/

Tekst foutief opgemaakt als kop en met strong-element

Op deze pagina is de hele alinea “Natuur in de stad? Daarvoor moet … het kan beter.”, “Noodzaak ÉN kans van natuurinclusief bouwen” met zowel het heading-element als het strong-element opgemaakt. Dit is geen koptekst, maar een inleidende alinea. Daarom mag dit niet als kop worden opgemaakt.

Bovendien heeft het strong-element een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Dit probleem komt ook voor op de pagina https://platform.groenkapitaal.nl/greenspots/ bij de inleidende alinea “Greenspots zijn plekken … wordt gestimuleerd”.

Oplossing:

Maak deze tekst op als gewone paragraaftekst en verwijder het strong-element. Gebruik CSS om de tekst een bepaalde visuele weergave te geven.

Beschrijving van complexe afbeelding ontbreekt

strong-element is gebruikt in koptekst

Op deze pagina staan de koppen “Wat is natuurinclusief bouwen?”, “Noodzaak ÉN kans van natuurinclusief bouwen”, “Ruimte voor biodiversiteit” en andere soortgelijke teksten. Deze koppen zijn opgemaakt met het strong-element.

Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Dit probleem komt ook voor op de pagina https://platform.groenkapitaal.nl/initiatief/van-bloemkoolland-naar-nieuwe-natuur/?portfolioCats=252 bij de koppen“Resultaten tot zover en volgende stappen”.

Oplossing:

Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.

Beschrijving van complexe afbeelding ontbreekt

Op deze pagina staat onder de kop “Verminderen van hitte in de stad” een complexe afbeelding zonder korte alternatieve tekst (leeg alt-attribuut). 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.

Kop-element gebruikt voor tekst die geen kop is

Op deze pagina is de tekst “Tekst: Floris de Rie, student Diermanagement, stagiair Groen Kapitaal | Fotografie: Rogier Reker, community management Groen Kapitaal” niet bedoeld als kop, maar deze is onterecht gemarkeerd met een h6-element om een bepaalde visuele weergave te bereiken. De tekst die als kop is gemarkeerd, is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h6-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Gebruik kop-elementen daarom niet alleen om een visueel effect te bereiken, zoals een grotere, schuin- of vetgedrukte tekst. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Hetzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/initiatief/van-bloemkoolland-naar-nieuwe-natuur/?portfolioCats=252 bij “Initiatiefnemers: burgeralliantie … Hoogkarspel”.

Oplossing:

Verwijder het h6-element en gebruik een ander element, zoals een p-element. De gewenste stijl kun je met CSS toevoegen. 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/.

Em-element is in plaats van kop-element gebruikt

Op deze pagina is de volgende tekst onjuist gemarkeerd met em-elementen in plaats van met een geschikt kopniveau-element: “Bronnen:”. Het em-element is bedoeld om woorden extra nadruk te geven. Het heeft daarmee een andere semantische waarde dan een kop. Dit element moet dan ook niet gebruikt worden voor koppen.

Oplossing:

Verwijder de em-elementen en markeer de tussenkopjes als h3-koppen (of een ander geschikt kopniveau).

Link naar pagina: https://platform.groenkapitaal.nl/greenspots/

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op deze pagina staan onder de tekst “Greenspots zijn plekken in Noord-Holland waar actief de lokale biodiversiteit wordt gestimuleerd” afbeeldingen en pijlpictogrammen die functioneren als links, maar er ontbreekt een tekstalternatief, waardoor de links niet toegankelijk zijn.

Dit probleem hangt ook samen met succescriterium 2.4.4, omdat de link geen duidelijk doel heeft, en met succescriterium 4.1.2, omdat de link geen toegankelijke naam heeft.

Oplossing:

Om deze link toegankelijk te maken, moet de afbeelding een tekstalternatief krijgen dat het linkdoel beschrijft. Zo weten bezoekers die schermlezers gebruiken waar de link naartoe leidt.

Zichtbare linktekst komt niet terug in toegankelijke naam

Op deze pagina staan onder de tekst “Greenspots zijn plekken in Noord-Holland waar actief de lokale biodiversiteit wordt gestimuleerd” links met afbeeldingen die zichtbare tekst bevatten, bijvoorbeeld “GREENSPOTS Stories”. De links hebben echter geen toegankelijke namen en kunnen daardoor niet met spraak worden bediend. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraakbediening worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. Bijvoorbeeld: aria-label=”GREENSPOTS Stories”.

Er zijn afbeeldingen die tekst bevatten

Op deze pagina staan onder de tekst “Greenspots zijn plekken in Noord-Holland waar actief de lokale biodiversiteit wordt gestimuleerd” links met afbeeldingen die zichtbare tekst bevatten, bijvoorbeeld “GREENSPOTS Stories”. Dit zijn afbeeldingen van tekst. Voor logo’s geldt een uitzondering voor dit succescriterium, deze tekst mag dus wel als afbeelding geplaatst worden. Voor de teksten onder het logo, bijvoorbeeld “Over Greenspots” en “Stories”, geldt dit niet.

Oplossing:

Plaats deze tekst als normale tekst op de pagina, in plaats van als afbeelding.

Link naar pagina: https://platform.groenkapitaal.nl/greenspots/ontdek-de-greenspots/

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Op deze pagina wordt, wanneer bezoekers de stijlkenmerken toepassen zoals in dit succescriterium beschreven, sommige teksten gedeeltelijk onzichtbaar en daarmee onleesbaar. Het gaat om de tekst “Greenspots” onder de koppen, bijvoorbeeld “Greenspot Bee Heroes Vijfhuizen”.

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.

Link naar pagina: https://platform.groenkapitaal.nl/initiatief/van-bloemkoolland-naar-nieuwe-natuur/?portfolioCats=252

Het kopelement is leeg

Advies. Het volgende is alleen een advies, maar het kan de toegankelijkheid van de website vergroten.

Op deze pagina staat boven de kop “Share dit via social media!” een lege h4-kop. Dit is verwarrend voor een blinde bezoeker wanneer hij van kop naar kop navigeert.

Oplossing:

Verwijder het element of voeg er inhoud aan toe.

Link naar pagina: https://platform.groenkapitaal.nl/toolbox-voor-gemeenten-en-inwoners/

Link heeft geen toegankelijke naam

Op deze pagina staan artikelen. Elk artikel bestaat uit twee links. Deze links hebben geen toegankelijke naam, bijvoorbeeld bij de kop “Klimaat-adaptatie”. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link.

Dit probleem hangt ook samen met succescriterium 2.4.4, omdat deze link geen duidelijk doel heeft, en met succescriterium 2.5.3, omdat de zichtbare tekst van de link niet voorkomt in de toegankelijke naam, waardoor bezoekers geen spraakbesturing kunnen gebruiken.

Oplossing:

Dit kan worden opgelost door de link (a-element) in de code om de tekst heen te plaatsen. Zo neemt deze de tekst automatisch over als linktekst.

Link naar pagina: https://platform.groenkapitaal.nl/toolbox-voor-gemeenten-en-inwoners/klimaatadaptatie/

strong-element is gebruikt voor opmaak

Op deze pagina staan onder de kop “Praktijkvoorbeelden” secties met verborgen inhoud, bijvoorbeeld “Groene lessen uit Diemen”. In deze secties wordt het strong-element verkeerd gebruikt voor opmaakdoeleinden, bijvoorbeeld bij “FRANK VAN LEEUWEN” en “Beleidsmedewerker bij de Gemeente Diemen”. 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.

Lijst is niet op de juiste manier gemarkeerd

Op deze pagina staat onder de kop “Tips & tricks klimaatadaptatie” een lijst met 2 items. In de HTML-code is deze lijst gemarkeerd als 2 afzonderlijke lijstelementen (ul). Inhoud die eruitziet als een lijst, moet ook in de tags zo zijn gemarkeerd. Zo krijgen blinde bezoekers dezelfde informatiestructuur door als ziende bezoekers. Een ander voordeel van het markeren van een lijst is dat schermlezers het aantal items dan aankondigen voordat ze gaan voorlezen. 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:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat naast de kop “Hoe kun je bewoners prikkelen om huis en tuin klimaatadaptiever in te richten?” een decoratieve afbeelding. De alternatieve tekst daarvan is “Screenshot_6”. 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.

Link naar pagina: https://platform.groenkapitaal.nl/begin-klein-op-eigen-terrein-hoe-bedrijven-vergroenen-dankzij-hun-eigen-medewerkers/

Geen nieuwe bevindingen.

Link naar pagina: https://platform.groenkapitaal.nl/natuurinclusief-bouwen-een-zeer-informatieve-longread/

Link naar PDF: https://platform.groenkapitaal.nl/wp-content/uploads/2021/12/Natuurinclusieve-tuin-Scoresheet.pdf

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”.

Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn alle koppen niet als koppen gemarkeerd. Zie bijvoorbeeld “Hoe Natuurinclusief is uw tuin?”, “Resultaat:” 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.

Informatieve afbeeldingen hebben geen alt-tekst

Dit pdf-document bevat een logo “Groen Kapitaal Provincie Noord-Holland” zonder alternatieve tekst (alt-tekst).

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

Oplossing:

Voeg een tekstalternatief toe aan deze informatieve afbeeldingen.

Informatieve afbeeldingen hebben geen alt-tekst

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

Oplossing:

Voeg een tekstalternatief toe aan deze informatieve afbeelding.

Er is een afbeelding die tekst bevat

In dit pdf-document staat een afbeelding van een tabel met ingesloten tekst. Een afbeelding met tekst erin is voor veel bezoekers ontoegankelijk. Het is beter om deze tabel met tekst in het document op te nemen als een gewone tabel. Dan kunnen mensen met een visuele beperking de teksteigenschappen aanpassen om het beter leesbaar te maken. Dat is nu niet mogelijk, omdat de tekst in een afbeelding staat.

Oplossing:

Voeg de tekst die nu in de afbeelding staat in het document in als een gewone tabel.

Decoratieve afbeeldingen zijn toegevoegd met figure-tags

In dit pdf-document staan decoratieve afbeeldingen die zijn toegevoegd via een Figure-tag met de alternatieve tekst (alt-tekst) “Paper sticky tape”. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen.

Oplossing:

Markeer deze afbeelding als artefact, zodat deze wordt verborgen voor schermlezers.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat witte tekst op een groene achtergrond (#1A9A1A), bijvoorbeeld “Kom er achter met de Groen Kapitaal natuurinclusieve tuin scoresheet!”. De contrastratio is te laag: 3,7:1.

Oplossing:

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

Link naar pagina: https://platform.groenkapitaal.nl/natuurinclusief-bouwen-een-zeer-informatieve-longread/

Link naar PDF: https://platform.groenkapitaal.nl/wp-content/uploads/2021/12/De-Natuurinclusieve-Tuin-Checklist-Nieuw.pdf

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”.

Koppen zijn niet als kop gemarkeerd

In dit pdf-document zijn alle koppen niet als koppen gemarkeerd. Zie bijvoorbeeld “DE NATUURINCLUSIEVE TUIN CHECKLIST”, “Verschillende Lagen Groen” 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.

Informatieve afbeeldingen hebben geen alt-tekst

Dit pdf-document bevat een logo “Groen Kapitaal Provincie Noord-Holland” zonder alternatieve tekst (alt-tekst).

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

Oplossing:

Voeg een tekstalternatief toe aan deze informatieve afbeelding.

Decoratieve afbeeldingen zijn toegevoegd met figure-tags

In dit pdf-document staan decoratieve afbeeldingen die zijn toegevoegd via een Figure-tag en geen beschrijving hebben. De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.

Oplossing:

Markeer deze afbeeldingen als artefact, zodat deze worden verborgen voor schermlezers.

Kleurcontrast van kleine tekst is te laag

In dit pdf-document staat op een lichtblauwe achtergrond (#38B6FF) tekst in verschillende kleuren: groene tekst (#008037), bijvoorbeeld “Verschillende Lagen Groen”, met een contrastratio van 2,2:1; lichtroze tekst (#FF5757), bijvoorbeeld “Een tuin voor mens én dier”, met een contrastratio van 1,4:1; en witte tekst, bijvoorbeeld “DE NATUURINCLUSIEVE TUIN CHECKLIST”, met een contrastratio van 2,3:1.

Oplossing:

Voor gewone tekst en tekst die niet vetgedrukt is, moet het contrast minimaal 4,5:1 zijn, en voor grote tekst moet het contrast minimaal 3,0:1 zijn.

Link naar pagina: https://platform.groenkapitaal.nl/initiatieven/

Kleurcontrast van tekst is te laag

Op deze pagina zijn de kop “Initiatieven” en de tekst “Je bent hier: Groen Kapitaal » Initiatieven” wit en geplaatst op een afbeelding. De achtergrond van de afbeelding is wisselend, bijvoorbeeld grijs (#CCCACD). De contrastratio is dan te laag: 1,6:1.

Datzelfde probleem komt voor

• op de pagina https://platform.groenkapitaal.nl/initiatief/groen-vitaal/,
• op de pagina https://platform.groenkapitaal.nl/toekomstversnellers/,
• op de pagina https://platform.groenkapitaal.nl/netwerk/ en op andere pagina’s.

Oplossing:

Voor tekst kleiner dan 24px en niet vetgedrukt moet het contrast minimaal 4,5:1 zijn, en voor tekst groter dan 24px moet het contrast 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/.

Onvoldoende linktekst in paginering

Op deze pagina ontbreekt bij de paginalinks voldoende context. Ziende gebruikers begrijpen dat “1”, “2”, “3” enzovoort paginanummers voorstellen, maar voor gebruikers met een visuele beperking of schermlezers is dit niet duidelijk. Voor ziende bezoekers is het duidelijk dat dit paginanummers zijn, maar voor slechtziende bezoekers en bezoekers 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”.

Relatie tussen links in een paginering is niet in de code vastgelegd

Op deze pagina zijn de paginalinks onder de zoekresultaten visueel gegroepeerd, maar deze groepering is niet aanwezig in de HTML-structuur. Als het voor een ziende bezoeker duidelijk is dat een groep links, zoals de paginering, bij elkaar hoort, dan moet die structuur ook in de HTML-code aanwezig zijn.

Oplossing:

Neem de links van de paginering bijvoorbeeld op in een <ul>, <ol> of <nav>-element, om de groep correct weer te geven in de code. Hierdoor begrijpt hulpsoftware de semantische relatie tussen de links.

Huidige pagina in paginering is alleen visueel aangegeven, maar niet in de code

Op deze pagina wordt in de paginering onder de zoekresultaten het huidige paginanummer visueel onderscheiden, maar dit onderscheid is niet aanwezig in de HTML-code. Hierdoor kan een schermlezer deze informatie niet doorgeven aan de bezoeker.

Oplossing:

Je maakt de informatie toegankelijk door:

• Verborgen tekst: voeg visueel verborgen tekst toe binnen de link van de huidige pagina die aangeeft dat dit de huidige pagina is. Bijvoorbeeld <span class=”sr-only”>Huidige pagina</span>.
• aria-current-attribuut: voeg aria-current=”page” toe aan het a-element van de link van de huidige pagina.

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

Op deze pagina staat onder de kop “Zoeken” een zoekveld. De contrastratio tussen de lichtgrijze rand (#D2D2D2) en de witte achtergrond van de pagina is 1,5:1. Placeholdertekst kan alleen een voldoende alternatief zijn als het contrast van de placeholdertekst minimaal 4,5:1 is.

Oplossing:

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

Het selecteren van filters zorgt zonder waarschuwing voor een contextwijziging

Op deze pagina zorgt interactie met filters (selectievakjes) voor een aanzienlijke contextwijziging: de pagina wordt opnieuw geladen en de focus verplaatst zich naar een andere locatie.

Oplossing:

Zorg dat de bezoeker van tevoren wordt gewaarschuwd over deze verandering. Je kunt ook een knop toevoegen waarmee de bezoeker zijn keuze kan bevestigen.

Toetsenbordfocus is niet zichtbaar

Op deze pagina zijn er filters met selectievakjes. De toetsenbordfocus is niet zichtbaar op deze selectievakjes.

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.

Informatie is niet meer leesbaar als tekstafstand wordt aangepast

Als bezoekers op deze pagina de tekstafstand aanpassen zoals beschreven in dit succescriterium, dan valt onder andere de tekst “Gezonde leefomgeving, Klimaatadaptatie, Groen als verbinder” onder de kop “Initiatieven” deels weg, waardoor deze onleesbaar wordt.

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.

Link naar de

Link naar pagina: https://platform.groenkapitaal.nl/netwerk/

Link heeft geen toegankelijke naam

Op deze pagina mist de link “Heb jij een duurzaam initiatief en kan je hulp gebruiken?” een toegankelijke naam. Datzelfde probleem komt verderop voor bij de link “Aanmelden als partner”. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie van de link is.

Dit probleem hangt ook samen met succescriterium 2.4.4, omdat deze link geen duidelijk doel heeft, en met succescriterium 2.5.3, omdat de zichtbare tekst van de link niet voorkomt in de toegankelijke naam, waardoor bezoekers geen spraakbesturing kunnen gebruiken.

Datzelfde probleem komt voor op de pagina https://platform.groenkapitaal.nl/greenspots/ bij de link “Ontdek de Greenspots”.

Oplossing:

Dit kan worden opgelost door een toegankelijke naam toe te voegen met behulp van linktekst, aria-labels of een andere methode die de zichtbare linktekst bevat. In deze situatie zou de meest logische oplossing zijn om het a-element (de link) om de zichtbare tekst heen te plaatsen, zodat deze automatisch ook de linktekst wordt.

Link heeft geen toegankelijke naam

Op deze pagina staat boven de tekst “Heb jij een duurzaam initiatief en kan je hulp gebruiken?” een link zonder toegankelijke naam. Het gaat hier om de link die om de afbeelding heen staat. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Dit probleem hangt ook samen met succescriterium 2.4.4, omdat deze link geen duidelijk doel heeft.

Oplossing:

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