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

Op de website wordt de blauwe kleur (#288FDF) gebruikt. In combinatie met wit is de contrastratio te laag: 3,5:1. Dit geldt voor teksten in de header zoals “Zoeken in alle artikelen”, “Provincie Noord-Holland” en “Contact”. In de footer geldt dit voor teksten zoals “Boer & Business in Balans is hèt …”, “Nieuws”, “Netwerk” en andere. Op de homepagina https://www.boerenbusinessinbalans.nl/ gaat het om teksten zoals “Naar nieuwsberichten”, “watch the English version here”, “Lees meer”, “Amstelland en Meerlanden” en andere.

In combinatie met donkergrijs (#3A3A3A) is de contrastratio ook te laag: 3,3:1. Dit geldt voor teksten in de footer zoals “Boer & Business in Balans”, “Navigatie” en “Volg ons online!”. In de header en de footer verandert de kleur van de linkteksten naar donkergrijs wanneer deze via het toetsenbord de focus krijgen. Dit geldt voor de links “Zoeken in alle artikelen”, “Provincie Noord-Holland” en “Contact” in de header en voor de links onder de kop “Navigatie” in de footer.

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

Focus komt buiten het cookievenster (lightbox)

Als een pagina op de website voor het eerst wordt geopend, verschijnt er onderaan de pagina een cookievenster. Dit is een lightbox. De focus dient dan direct op of binnen de lightbox te komen en mag deze niet verlaten totdat de lightbox gesloten is.

Oplossing:

Los dit op door ervoor te zorgen dat de focus direct binnen de lightbox valt en niet buiten de lightbox kan komen, zolang deze in beeld is.

Toetsenbordfocus is niet zichtbaar

Op de cookiebanner is de toetsenbordfocus niet zichtbaar op de knoppen: “Accept cookies”, “Deny” en “View preferences”.

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.

Taalwisseling ontbreekt op anderstalige content

Op de cookiebanner staat een tekst in een andere taal zonder een taalcode. Dit geldt voor de tekst “We use cookies to optimize our website and our service.” en de teksten op de knoppen: “Accept cookies”, “Deny” en “View preferences”. Wanneer de knop “View preferences” wordt geactiveerd, verschijnen er ook teksten in een andere taal zonder taalcode.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Interactieve elementen staan genest binnen het summary-element

Op de cookiebannerinstellingen zijn knoppen, zoals “Statistics”, opgemaakt met summary-elementen. Deze summary-elementen bevatten interactieve elementen zoals selectievakjes. Het plaatsen van interactieve elementen zoals selectievakjes binnen een summary is niet correct, omdat dit verwarrend kan zijn voor schermlezers of problemen kan veroorzaken bij het gebruik van het toetsenbord.

Oplossing:

Zorg dat het summary-element alleen platte tekst of niet-interactieve inhoud bevat.

Invoerveld heeft geen toegankelijke naam

Op de cookiebannerinstellingen staan selectievakjes. Deze input-elementen hebben 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.

Contrast van icoon op knop is te laag

Op de cookiebannerinstellingen staan selectievakjes. Wanneer deze in de uit-stand staan, heeft de witte schakelknop een onvoldoende contrastratio ten opzichte van de oranje achtergrond (#F56E28). De contrastratio van 2,9:1 is te laag.

Oplossing:

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

Informatie over de toestand van de menuknop verandert niet

In de header opent de link “Kennis” het submenu. Wanneer deze link toetsenbordfocus krijgt, wordt het submenu automatisch geopend. Het aria-expanded-attribuut op deze link wordt echter niet correct bijgewerkt om de toestand van het submenu weer te geven. Het blijft op “false” staan, ook wanneer het submenu geopend is.

Op kleine schermen komt hetzelfde probleem voor. In de header opent de knop met drie horizontale lijnen het navigatiemenu. In het geopende menu staat een knop met een “X”-icoon. Het aria-expanded-attribuut op deze knop blijft op “false” staan, ook al is het menu geopend.

Oplossing:

Dit attribuut zou de waarde “true” moeten krijgen als het submenu zichtbaar is en “false" als het gesloten is.

Verkeerd gebruik van aria-expanded op de link

Op kleine schermen in de header opent de knop met drie horizontale lijnen het navigatiemenu. In het geopende menu heeft de link “Kennis” een aria-expanded-attribuut, terwijl deze link geen inhoud opent of sluit. Dit attribuut is daarom overbodig en kan verwarring veroorzaken bij gebruikers van hulpsoftware.

Oplossing:

Verwijder het overbodige aria-expanded-attribuut van de link “Kennis” als deze geen uitklapbare inhoud aanstuurt.

Naam van de knop beschrijft niet wat de knop doet

Op kleine schermen in de header opent de knop met drie horizontale lijnen het navigatiemenu. In het geopende menu staat naast de link “Kennis” een knop met een pijltje. Deze knop heeft een toegankelijke naam: “Toggle menu”, afkomstig van het aria-label, en dient om het submenu onder “Kennis” te openen. De toegankelijke naam beschrijft de functie echter niet nauwkeurig.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

Link heeft geen code die aangeeft dat er een popup opent

In de footer opent de link met het label "Meld je aan" een dialoogvenster, maar deze functionaliteit wordt niet aangegeven in de code.

Oplossing:

• Voeg het attribuut aria-haspopup="dialog" toe aan de link. Hierdoor weet hulpsoftware dat je met de link een dialoogvenster opent.
• Met het aria-expanded-attribuut kun je de toestand van het dialoogvenster (open of gesloten) aangeven ("true" of "false”). Let op: dit attribuut werkt alleen als beide acties (openen en sluiten) door dezelfde link worden uitgevoerd.

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

In de footer verandert de tekstkleur van de links “Privacyverklaring”, “Proclaimer” en “Toegankelijkheid” naar wit wanneer deze toetsenbordfocus krijgen. De tekst staat dan op een witte achtergrond. De contrastratio is te laag: 1,0: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/.

Onvoldoende contrast van de knop voor cookie-instellingen

Op de website staat onderaan in de viewport altijd een knop waarmee bezoekers de cookie-instellingen kunnen beheren. Deze knop is zichtbaar door het lichtgrijze gebied (#F1F1F1). Wanneer dit element op de witte achtergrond staat, is de contrastratio 1,1:1. Dit is bijvoorbeeld het geval wanneer de knop focus krijgt. Hierdoor is de knop niet voor alle bezoekers goed zichtbaar.

Oplossing:

Zorg dat de contrastratio minimaal 3,0:1 is.

De tekst op de knop voor cookie-instellingen is alleen zichtbaar bij hover

Op de website staat onderaan in de viewport altijd een knop waarmee bezoekers de cookie-instellingen kunnen beheren. Wanneer bezoekers met de muis over deze knop bewegen, wordt de tekst “Manage consent” zichtbaar. Deze functionaliteit is echter niet beschikbaar voor toetsenbordgebruikers. De tekst wordt dan namelijk niet zichtbaar.

Dit werkt niet met het toetsenbord, waardoor deze informatie ontoegankelijk is voor bezoekers die geen muis gebruiken.

Oplossing:

Zorg dat de tekst “Manage consent” ook zichtbaar wordt als deze focus krijgt. Beter, maar niet verplicht is om de volledige knop permanent zichtbaar te laten zijn, zodat alle bezoekers altijd het doel van de knop kunnen herkennen.

Toetsenbordfocus is niet zichtbaar op de knop “Manage consent”

Op de website staat onderaan in de viewport altijd een knop waarmee bezoekers de cookie-instellingen kunnen beheren. Deze knop heeft geen zichtbare toetsenbordfocus-indicator.

Oplossing:

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

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

Wanneer op deze pagina tot 200% wordt ingezoomd, is de knop waarmee bezoekers de cookie-instellingen kunnen beheren niet zichtbaar en niet bedienbaar.

Ditzelfde wordt waargenomen wanneer de pagina’s van de website worden bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%.

Oplossing:

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

Content die verschijnt bij hover moet makkelijk gesloten kunnen worden

Wanneer met de muis over de knop wordt bewogen waarmee bezoekers de cookie-instellingen kunnen beheren, verschijnt de tekst “Manage consent”. Deze tekst kan overlappen met de bestaande inhoud van de pagina.

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.

Dialoogvenster heeft niet de juiste rol en geen toegankelijke naam

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. Dit dialoogvenster heeft geen correcte ARIA-rol en geen toegankelijke naam.

Het dialoogvenster is onjuist gemarkeerd met role="document". De ARIA-rol document wordt gebruikt voor elementen die alleen bedoeld zijn om gelezen of bekeken te worden. Dit dialoogvenster bevat echter zowel leesbare inhoud, zoals het bericht en de kop, als interactieve elementen, zoals knoppen en een invoerveld.

Daarnaast wordt aria-modal="true" gebruikt op dit element, maar dit is niet toegestaan in combinatie met role="document".

Oplossing:

Voeg twee attributen toe aan het dialoogvenster: een aria-label met een duidelijke beschrijving van de inhoud (aria-label="Beschrijving van de inhoud") en role="dialog".

Kop is niet gemarkeerd als koptekst

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is de tekst “Inschrijven” niet opgemaakt als kop.

Ditzelfde probleem wordt waargenomen bij de tekst “Bedankt!” nadat het formulier succesvol is verzonden door de bezoeker.

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.

label-element is niet gekoppeld aan invoerveld

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. Dit dialoogvenster bevat een formulier waarin het label-element met de tekst "E-mailadres" niet expliciet is gekoppeld aan het bijbehorende invoerveld.

Dit label-element moet gekoppeld zijn aan het bijbehorende invoerveld. Hierdoor krijgt het invoerveld een toegankelijke naam en heeft het label een groter klikgebied. Dit maakt het formulier toegankelijker.

Omdat het invoerveld op dit moment geen toegankelijke naam heeft, wordt hiermee ook niet voldaan aan succescriterium 4.1.2.

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.

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

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. Dit dialoogvenster bevat het veld "E-mailadres". De contrastratio tussen de grijze rand (#CCCCCC) en de witte achtergrond is 1,6:1.

Oplossing:

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

Invoerveld en link is niet met het toetsenbord te bedienen

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. Interactieve elementen in dit dialoogvenster, zoals het invoerveld met het label "E-mailadres", de link met de afbeelding en de knop “Gegevens opslaan”, zijn niet toegankelijk met het toetsenbord.

Oplossing:

Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.

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

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is een invoerveld aanwezig met het label "E-mailadres*". Het foutbericht voor dit invoerveld toont de melding "This field is required".

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.

Taalwisseling ontbreekt op anderstalige content

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is een invoerveld aanwezig met het label "E-mailadres". Het foutbericht voor dit invoerveld toont de melding "This field is required", die in een andere taal staat zonder taalcode.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element. Er kan natuurlijk ook voor worden gekozen om de foutmelding in het Nederlands te vertalen.

Foutmelding is niet gekoppeld aan invoerveld

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is een invoerveld aanwezig met het label "E-mailadres". Het foutbericht voor dit invoerveld toont de melding "This field is required".

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.

Blinde bezoekers krijgen geen bericht van de foutmelding

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is een invoerveld aanwezig met het label "E-mailadres". Wanneer er fouten worden gemaakt, verschijnt er een foutmelding. Deze melding krijgt geen focus en wordt niet aangekondigd door de schermlezer.

Als de foutmelding geen toetsenbordfocus krijgt op het moment dat deze verschijnt, krijgen mensen die blind zijn geen melding van hun schermlezer.

Oplossing:

Voeg aria-live="polite" aan de melding toe. Dan wordt de melding automatisch voorgelezen zodra deze verschijnt.

Foutmeldingen hebben te weinig contrast

In de footer opent de knop met het label "Meld je aan" een dialoogvenster. In dit dialoogvenster is een invoerveld aanwezig met het label "E-mailadres". De foutmelding heeft rode tekst (#FF0000) op een witte achtergrond. De contrastratio is 4,0:1.

Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.

Oplossing:

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

Relatie tussen de links in het kruimelpad is niet in de code vastgelegd

Op de website zijn er pagina’s met kruimelpaden. De structuur en de relatie tussen de elementen van de kruimelpadnavigatie zijn niet semantisch gedefinieerd in de HTML. Zie bijvoorbeeld de pagina https://www.boerenbusinessinbalans.nl/kennis/visie-lto-noord-op-toekomst-vezelteelten/.

Oplossing:

Plaats de links in een nav- of een ul-element.

Toetsenbordfocus is niet zichtbaar

Dit probleem is waarneembaar op pagina’s zoals

• https://www.boerenbusinessinbalans.nl/kennis/visie-lto-noord-op-toekomst-vezelteelten/,
• https://www.boerenbusinessinbalans.nl/netwerk/water-land-en-dijken-sterk-in-plattelandsnatuur/,
• https://www.boerenbusinessinbalans.nl/kennis/verdienen-met-natuurinclusief-melkveehouden/ en andere.

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.

Skiplink wordt niet zichtbaar bij focus

Op deze pagina blijft de skiplink onzichtbaar, ook wanneer deze toetsenbordfocus krijgt. Hierdoor komt de focus terecht op een onzichtbaar interactief element. Skiplinks kunnen standaard verborgen zijn, maar zichtbaar worden zodra ze toetsenbordfocus krijgen. Hierdoor kunnen bezoekers die met het toetsenbord navigeren de skiplink zien en gebruiken.

Oplossing:

Pas de CSS van de skiplink aan zodat deze zichtbaar wordt op het moment dat de toetsenbordfocus erop komt.

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

Let op: Op deze pagina opent de knop “Meld je aan” onder de kop “Wil je op de hoogte blijven?” het dialoogvenster “Inschrijven”. De toegankelijkheidsproblemen die zijn vastgesteld bij deze knop en het bijbehorende dialoogvenster zijn hetzelfde als die al eerder zijn beschreven voor de knop “Meld je aan” in de footer en zijn gedocumenteerd in de sectie “Op alle pagina’s”. Deze problemen hebben betrekking op de volgende succescriteria: 1.3.1, 1.4.11, 1.4.3, 2.1.1, 3.1.2, 3.3.1, 4.1.2 en 4.1.3.

Er staan twee kopregels van hetzelfde niveau direct onder elkaar

Op deze pagina wordt een kop van niveau 2 direct gevolgd door een andere kop van hetzelfde niveau. Het gaat om de koppen “Meer informatie over...” en “De Korte Keten”.

Als twee koppen van hetzelfde niveau direct onder elkaar staan zonder inhoud ertussen, dan is één van de koppen niet op de goede manier gebruikt. Direct onder het eerste h3-element mag een h4-element komen of andere content, maar niet nog een keer een h3-element of een h2-element.

Oplossing:

Pas dit aan, zodat de kopregelniveaus de structuur van de tekst correct weergeven. Op deze pagina staat een instructie hoe zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina verwijzen de links "Lees meer" onder de koppen "Meer informatie over…" en “De laatste artikelen” naar verschillende bestemmingen.

Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

Taalwisseling ontbreekt op anderstalige content

Op deze pagina staan onder de koppen “Toekomstbestendige voedselketens” en “Voedselvisie 2020 - 2030” links met tekst in een andere taal zonder taalcode: “watch the English version here” en “view the English version here”.

Deze tekst wordt nu voorgelezen volgens de uitspraakregels van de primaire taal van de pagina. Die is ingesteld in het lang-attribuut op het html-element, in dit geval op “nl”. De schermlezer zou juist op de taal van de zin moeten overschakelen. Dat bereik je door deze anderstalige inhoud een lokaal lang-attribuut te geven met de juiste waarde.

Oplossing:

Voeg een lang-attribuut met de juiste taalcode toe aan het html-element dat de tekst in een andere taal bevat. Als de tekst bijvoorbeeld in het Engels is, voeg je lang="en" toe aan het element.

Link met een afbeelding, linkdoel is onbekend

Op deze pagina fungeert de afbeelding van een laptop onder de kop "Een systeem in beweging" als link, maar het alt-attribuut is leeg (alt=""), waardoor de afbeelding verborgen blijft voor schermlezers.

Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam. Ditzelfde probleem wordt waargenomen bij links met afbeeldingen onder de kop “De laatste artikelen”.

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.
• Combineren met aangrenzende tekst: je kunt de link semantisch koppelen aan bestaande tekst die erboven of eronder staat. Dit kan vaak met een kop-element of een lijststructuur.

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

Deze pagina bevat een iframe onder de kop “Toekomstbestendige voedselketens” met het title-attribuut "Boer en Business in Balans".

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.

Het zelfde probleem wordt waargenomen bij het iframe onder de kop “Voedselvisie 2020 - 2030”. Het title-attribuut is “Jelle Beemsterboer over de Noord-Hollandse Voedselvisie”.

Oplossing:

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

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina wordt de video gepresenteerd onder de kop “Toekomstbestendige voedselketens”. In de video verschijnen op verschillende momenten teksten en logo’s, bijvoorbeeld rond 2:05. Er is echter geen media-alternatief of audiodescriptie beschikbaar. Deze video bevat visuele informatie die niet toegankelijk is voor blinde bezoekers.

Ditzelfde probleem wordt waargenomen bij de video onder de kop “Voedselvisie 2020 - 2030”. Teksten en logo’s verschijnen op verschillende momenten, bijvoorbeeld rond 0:01 en 1:40.

Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Dit kan voor het 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.

Onderliggend element heeft niet de juiste rol

Op deze pagina staat onder de kop “De laatste artikelen” een element met role="list". De bijbehorende child-rol ontbreekt.

Voor sommige ARIA-rollen is een combinatie van ouder- en kindrollen nodig. Dit is voor elke rol precies beschreven in WAI-ARIA. Als deze rollen niet (volledig) in de code staan, werken de elementen niet zoals de ontwikkelaar het bedoeld heeft. En als maar een deel van de verplichte rollen aanwezig is, heeft dat geen enkel (positief) effect op de toegankelijkheid.

Oplossing:

Zorg dat de rollen die nodig zijn volgens WAI-ARIA allemaal zijn toegevoegd. Bekijk voor meer informatie de pagina https://www.w3.org/TR/wai-aria-1.3/#list.

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staan in de artikelen onder de kop “De laatste artikelen” afbeeldingen met de alternatieve teksten "Foto van Toeleverancier" en “Foto van Boer”. Deze teksten beschrijven de afbeeldingen 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. Als de afbeeldingen puur decoratief zijn en geen informatief doel dienen, moeten ze verborgen worden voor schermlezers. Gebruik hiervoor bij img-elementen een leeg alt-attribuut: alt="".

Onlogische leesvolgorde van artikelen

Op deze pagina is de volgorde van HTML-elementen binnen de artikelen onder de kop “De laatste artikelen” niet logisch. Afbeeldingen en teksten staan boven de koppen. De huidige volgorde is: tekst, link met afbeelding, afbeelding, kop, tekst, link.

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.

Kop-element gebruikt voor tekst die geen kop is

Op deze pagina bevatten de artikelen onder de kop “De laatste artikelen” links met de tekst “Lees meer”. Deze teksten zijn geen koppen, maar zijn onjuist opgemaakt met een h4-element.

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 zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

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

Op deze pagina staat in de artikelen onder de kop “De laatste artikelen” grijze tekst (#ADADAD) op een witte achtergrond. De contrastratio is te laag: 2,2:1. Zie bijvoorbeeld “Toeleverancier 12-09-2025 1:27”.

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://www.boerenbusinessinbalans.nl/contact/

De relatie tussen keuzerondjes is niet in de code vastgelegd

Op deze pagina staat een groep keuzerondjes voorafgegaan door de tekst "Aanhef". Hoewel deze elementen visueel gegroepeerd zijn, is deze relatie niet gedefinieerd in de HTML.

Visueel vormen deze elementen een groep, maar die relatie is niet vastgelegd in de code.

Oplossing:

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

SC 1.3.5 Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina bevat een formulier invoervelden voor persoonlijke informatie, zoals achternaam, e-mailadres en telefoonnummer. Het attribuut autocomplete ontbreekt bij deze velden.

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.

Toetsenbordfocus is niet zichtbaar

Op deze pagina is de toetsenbordfocus niet zichtbaar op de volgende elementen: op de keuzerondjes onder “Aanhef”, op het selectievakje met de tekst die begint met “Ik ga ermee akkoord dat mijn gegevens worden opgeslagen in de netwerkmailinglijst…” en op de knop “Versturen”.

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.

HTML5 foutmeldingen worden getoond

Op deze pagina wordt in een formulier HTML5-validatie gebruikt, waarbij standaard HTML5-foutmeldingen worden weergegeven wanneer het formulier wordt verzonden met lege of onjuiste gegevens.

Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig.

Daarnaast wordt bij het verzenden van het formulier, wanneer het invoerveld “E-mail” onjuist is ingevuld, onder het veld de foutmelding “Dit veld is vereist.” getoond. Dit is een instructie en geen foutmelding. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt en geeft aan waar de fout zich bevindt. Vaak bevat een foutmelding een ontkenning. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld".

Oplossing:

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

Informatie van laad-icoon wordt niet automatisch voorgelezen door schermlezers

Op deze pagina activeert het klikken op de knop "Verstuur" een wachttijdanimatie. Deze animatie fungeert als statusmelding, maar is niet toegankelijk voor blinde bezoekers.

Dit soort berichten moet de juiste rol krijgen, zodat schermlezers de boodschap kunnen doorgeven aan een blinde bezoeker zodra het icoon verschijnt.

Oplossing:

Voeg om dit te bereiken bijvoorbeeld aria-live="polite" toe aan het icoon. Meer informatie over ARIA is te vinden op de pagina https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.

Foutmeldingen hebben te weinig contrast

Op deze pagina verschijnen na het verzenden van het formulier foutmeldingen in rode tekst (#D9534F) op een lichtgrijze achtergrond (#FAFAFA). De contrastratio is 3,8:1.

Foutmeldingen moeten net als andere teksten voldoen aan de minimale contrasteisen.

Oplossing:

Zorg dat het contrast tussen de kleur van de foutmelding en de achtergrond minimaal 4,5:1 is.

Link naar pagina: https://www.boerenbusinessinbalans.nl/kennis/visie-lto-noord-op-toekomst-vezelteelten/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Visie LTO Noord op toekomst vezelteelten” een afbeelding met de alternatieve tekst “Foto van Boer”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak. Hele zinnen zijn in een strong-element geplaatst om ze vet te maken. Zie de tekst die begint met “Vezelteelten, zoals vlas, hennep en miscanthus …”

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.

Link naar pagina: https://www.boerenbusinessinbalans.nl/kennis/verdienen-met-natuurinclusief-melkveehouden/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Verdienen met natuurinclusief melkveehouden?” een afbeelding met de alternatieve tekst “Foto van Boer”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina staat onder de kop "Pauze" een lijst met 3 items voorafgegaan door de tekst “Voorbeelden van de overige onderzoeksvragen:”. Deze lijst heeft geen correcte markering.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets).

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd. 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/.

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak. Hele zinnen zijn in een strong-element geplaatst om ze vet te maken. Zie de tekst die begint met: “Het schuurgesprek op 31 januari 2025 stond in het …”.

Oplossing:

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

em-element is gebruikt in koptekst

Op deze pagina staan koppen met de tekst “Verslag van schuurgesprek Natuurinclusief Melkveehouden”, “Pauze” en “Afsluiting”. In deze koppen zijn het heading-element en het em-element gebruikt.

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

Oplossing:

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

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina verwijzen de links met de tekst "Bekijk de dia’s" naar verschillende bestemmingen.

Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

Links in lopende tekst verschillen alleen in kleur

Op deze pagina staat onder de kop “Afsluiting” een alinea met de link "Marrit Rijkmans van VONK" die alleen door kleur wordt onderscheiden van 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.

Oplossing:

Zorg ervoor dat links in de tekst op zijn minst op één andere manier te herkennen zijn, bijvoorbeeld door ze onderstreept te maken, of door een kader toe te voegen.

• Onderstrepen: geef de links een onderstreping.
• Rand: voeg een subtiele rand (kader) toe aan de links.

Link naar pagina: https://www.boerenbusinessinbalans.nl/de-korte-keten/

Skiplink wordt niet zichtbaar bij focus

Op deze pagina blijft de skiplink onzichtbaar, ook wanneer deze via het toetsenbord de focus krijgt. Hierdoor komt de focus terecht op een onzichtbaar interactief element.

Skiplinks kunnen standaard verborgen zijn, maar zichtbaar worden zodra ze toetsenbordfocus krijgen. Hierdoor kunnen bezoekers die met het toetsenbord navigeren de skiplink zien en gebruiken.

Oplossing:

Pas de CSS van de skiplink aan zodat deze zichtbaar wordt op het moment dat de toetsenbordfocus erop komt.

strong-element is gebruikt voor opmaak

Op deze pagina wordt onder de kop "Wat is de korte keten?" het strong-element verkeerd gebruikt voor opmaak om de tekst vet te maken.

Oplossing:

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

Er zijn links met dezelfde tekst maar een andere bestemming

Op deze pagina verwijzen de links met de tekst "Lees meer" onder de kop "Welke projecten lopen er op dit thema?" naar verschillende bestemmingen.

Er zijn dus meerdere links aanwezig op de pagina met dezelfde tekst, maar een verschillend linkdoel. Dit kan verwarrend zijn voor bezoekers.

Oplossing:

Zorg dat links met dezelfde tekst ook naar dezelfde bestemming leiden. Als het om een andere bestemming gaat, moet de linktekst ook anders zijn.

Relatie tussen links in een groep is niet in HTML vastgelegd

Op deze pagina staat onder "Meer weten?" een groep links die visueel als een geheel wordt weergegeven, maar waarbij deze groepering niet is doorgevoerd 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.

Link naar pagina: https://www.boerenbusinessinbalans.nl/initiatieven/wat-doen-we-zelf/subsidie-voor-6-projecten-die-bijdragen-aan-duurzaam-voedselsysteem/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Zes projecten met subsidie van start” een afbeelding met de alternatieve tekst “Foto van Voedselketen”. 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. In case the image is purely decorative and serves no informational purpose, it should be hidden from screen readers. For img elements, use an empty alt attribute: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak om de volgende tekst vet te maken: “De provincie Noord-Holland heeft subsidie verleend aan 6 …”.

Oplossing:

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

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

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de volgende tekst deels buiten beeld: “Biodiversiteit op je Bord in Noord-Holland – Stichting Dutch Cuisine (regio Zaanstreek/Waterland/Amsterdam)”.

Oplossing:

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

Link naar pagina: https://www.boerenbusinessinbalans.nl/initiatieven/samen-eten-we-amsterdam-gezond-duurzaam-en-eerlijk/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “‘Samen eten we Amsterdam gezond, duurzaam en eerlijk’” een afbeelding met de alternatieve tekst “Foto van Voedselketen”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak om de volgende tekst vet te maken: “12 grote Amsterdamse organisaties ondertekenen …”.

Oplossing:

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

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op een onzichtbaar element in de sectie “Initiatief en ondersteuning”. Er zijn drie div-elementen die niet zichtbaar zijn op de pagina, maar toch toetsenbordfocus krijgen doordat tabindex="0" is toegepast.

Dit zorgt voor verwarring, onderbreekt de logische navigatie en kan voorkomen dat bezoekers begrijpen waar ze zich op de pagina bevinden.

Oplossing:

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

Link naar pagina: https://www.boerenbusinessinbalans.nl/initiatieven/greenbase-3-0/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “GreenBASE 3.0” een afbeelding met de alternatieve tekst “Foto van Boer”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak om de volgende tekst vet te maken: “Binnen GreenBASE wordt gewerkt aan een groen …”.

Oplossing:

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

Alinea’s tekst zijn onjuist opgemaakt in de code

Op deze pagina staat in de sectie onder de kop “Aan de slag” een tekstblok met meerdere alinea’s die onjuist zijn opgemaakt. Het volledige blok is geplaatst in een pre-element, dat bedoeld is voor vooraf opgemaakte tekst zoals code of poëzie. Bij gebruik voor gewone doorlopende tekst wordt de inhoud door hulpsoftware onjuist behandeld.

Voor de scheiding van alinea’s zijn regeleinden (br) gebruikt in plaats van correcte p-elementen.

De teksten “Wat is Groenblauwe Dooradering?” en “Wat zijn groenblauwe verbindingen?” zijn eigenlijk koppen, maar zijn niet opgemaakt met heading-elementen (h2–h6).

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.

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.

Logo heeft geen tekstalternatief

De logo’s onder de sectie “Aan de slag” hebben geen tekstalternatief. In plaats van de teksten die in de logo’s staan, horen schermlezers voor elk logo alleen “Geen bijschrift”.

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. Daarom moet je informatieve afbeeldingen zoals een logo altijd een alt-tekst geven.

Oplossing:

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

Link naar pagina: https://www.boerenbusinessinbalans.nl/kennis/slotaflevering-de-boer-op-provincie-lto-en-greenport-aan-tafel/

Op deze pagina staat onder de kop “Eerdere afleveringen beluisteren” een artikel “Podcast De Boer Op – over landbouwsystemen en toekomst”. De toegankelijkheidsproblemen die in dit artikel voorkomen, zijn dezelfde als eerder beschreven bij de vergelijkbare artikelen op de pagina https://www.boerenbusinessinbalans.nl/icoonproject/lerend-netwerk-texel/ onder de kop “Gerelateerde artikelen”. Deze problemen hebben betrekking op de volgende succescriteria: 1.1.1, 1.3.1, 1.4.3, 2.4.4 en 4.1.2..

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Slotaflevering De Boer Op: Provincie, LTO en Greenport aan tafel” een afbeelding met de alternatieve tekst “Foto van Boer”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak om de volgende tekst vet te maken: “De laatste aflevering van de podcastserie …”.

Oplossing:

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

Onzichtbaar element krijgt toetsenbordfocus

Op deze pagina komt de toetsenbordfocus terecht op een onzichtbaar element in de sectie “Slotaflevering bij de provincie”. Er zijn meerdere div-elementen die niet zichtbaar zijn op de pagina, maar toch toetsenbordfocus krijgen doordat tabindex="0" is toegepast.

Dit zorgt voor verwarring, onderbreekt de logische navigatie en kan voorkomen dat bezoekers begrijpen waar ze zich op de pagina bevinden.

Oplossing:

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

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

Geen nieuwe bevindingen.

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

Link naar PDF: https://www.boerenbusinessinbalans.nl/wp-content/uploads/2023/02/Uitvoeringsagenda-Voedselvisie-2023-2024.pdf

PDF-document heeft geen titel

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

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.

Decoratieve afbeeldingen zijn toegevoegd met figure-tags

In het PDF-document staat op pagina 1 een decoratieve afbeelding die is toegevoegd met een Figure-tag en geen beschrijving heeft.

De Figure-tag is alleen bedoeld voor informatieve afbeeldingen en heeft altijd een beschrijving nodig.

Oplossing:

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

Afbeeldingen zijn toegevoegd met figure-tags en hebben geen alt-tekst

In het PDF-document staan op pagina 2 en 3 afbeeldingen die zijn toegevoegd met een Figure-tag en geen beschrijving hebben.

Oplossing:

Als de afbeeldingen informatief zijn, moeten ze een beschrijving krijgen. Voeg in dat geval een tekstalternatief toe aan deze afbeeldingen. Wanneer de afbeeldingen decoratief zijn, markeer ze dan als artefact zodat ze verborgen worden voor schermlezers.

Koppen zijn niet als kop gemarkeerd

In het PDF-document zijn meerdere koppen niet opgemaakt als kop. Bijvoorbeeld op pagina 3 “Instrumenten” en “Toelichting op figuur 1. Instrumentenmix”, op pagina 4 “Mogelijk maken (subsidie)”, op pagina 5 “Ruimte geven ((ruimtelijke) kaders)” 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.

Tabel is onjuist opgemaakt

In dit PDF-document staat op pagina 4, 5 en 6 een tabel. Dit is één tabel, maar in de tags is deze met drie table-elementen opgemaakt. Schermlezers zien de inhoud hierdoor als drie verschillende tabellen in plaats van één, waardoor de relaties tussen rijen en kolommen moeilijker te begrijpen zijn.

Hetzelfde probleem doet zich voor bij de tabellen op pagina 6 en 7, 7 en 8, 8 en 9.

Oplossing:

Zorg dat de volledige tabel in de PDF-tags als één Table-tag wordt getagd, met alle rijen (TR), kopcellen (TH) en datacellen (TD) correct genest, ook als de tabel over meerdere pagina’s doorloopt.

Kleurcontrast van kleine tekst is te laag

In dit PDF-document staat op pagina 4 blauwe tekst (#2E76B5) in het diagram. Tegen de oranje achtergrond (#EBB794) is de contrastratio 2,7:1. Tegen de grijze achtergrond (#C9CBCE) is de contrastratio 3,0:1. Tegen de gele achtergrond (#F5D97C) is de contrastratio 3,5:1.

Oplossing:

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

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

Link naar PDF: https://www.boerenbusinessinbalans.nl/wp-content/uploads/2021/03/PNH_Voedselvisie_PNH_2020_2030_2021.pdf

PDF-document heeft geen titel

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

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.

Informatieve afbeeldingen hebben geen alt-tekst

In het PDF-document staat op pagina 1 een logo zonder tekstalternatief (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 tekst alternatief toe aan deze informatieve afbeeldingen.

Afbeeldingen zijn toegevoegd met figure-tags en hebben geen alt-tekst

In dit PDF-document staan afbeeldingen die zijn toegevoegd met een Figure-tag en geen beschrijving hebben. Dit komt voor op pagina 3, 5, 6 en andere.

Oplossing:

Als de afbeeldingen informatief zijn, moeten ze een beschrijving krijgen. Voeg in dat geval een tekstalternatief toe aan deze afbeeldingen. Wanneer de afbeeldingen decoratief zijn, markeer ze dan als artefact zodat ze verborgen worden voor schermlezers.

Koppen zijn niet als kop gemarkeerd

In dit PDF-document zijn meerdere koppen niet opgemaakt als kop. Bijvoorbeeld op pagina 1 “Boer & Business in Balans ‘naar een duurzaam voedselsysteem 2020-2030’”, op pagina 2 “INHOUD”, op pagina 3 “VOORWOORD”, op pagina 4 “INLEIDING”, op pagina 5 “VISIE, MISSIE EN SCHAKELS” en “2.1 Visie” 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.

Leesvolgorde van de tags is niet logisch

In dit PDF-document is de leesvolgorde niet logisch. Op pagina’s 8–16 staan tabellen met de kolommen “De schakel” en “Uitdagingen ketenschakel”. Deze tabellen zijn echter in de tags onder de inhoud van pagina 16 geplaatst.

Schermlezers lezen een pdf-document in de volgorde van de tags die in de codelaag staan. Als die niet logisch is, is de leesvolgorde dat dus ook niet en wordt het voor een blinde bezoeker moeilijk om de inhoud van het document te begrijpen.

Oplossing:

Zorg dat de volgorde van de tags logisch is.

De inhoud van de kolom “De schakel” staat niet in de juiste tabelcel in de tags

Op pagina 15 staat in de tabel onder “De schakel” een afbeelding met de tekst “Boer” en de link met afbeelding en tekst “filmpje uitdagingen hergebruikers”. In de tags is deze inhoud echter onder de tabel geplaatst en buiten de juiste tabelcel.

Daardoor gaat de relatie tussen de tabelkop “De schakel” en de bijbehorende gegevens verloren, wat de inhoud verwarrend en moeilijker te begrijpen maakt, vooral voor schermlezers.

Oplossing:

Zorg dat de inhoud in de kolom “De schakel” in de juiste TD-cel wordt geplaatst, zodat hulpsoftware de relatie tussen kop en gegevens correct kan aankondigen.

Tabelkoppen zijn niet gemarkeerd

In dit PDF-document staan meerdere datatabellen. De juiste markering ontbreekt.

Bij een datatabel moet je speciale tags toevoegen voor de tabelkoppen. Dan begrijpen schermlezers de relatie tussen de kop en onderliggende datacellen.

Oplossing:

Markeer de cellen in de koprij van de tabel met TH-tags en de datacellen met TD-tags.

Lijst is niet als lijst gemarkeerd

In dit PDF-document staan op pagina 20 lijsten onder “Om onderdeel uit te maken van de Voedselvisie geldt voor een project of activiteit in algemene zin dat:” en “In specifieke zin dat:”. De juiste markering ontbreekt.

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.

Hetzelfde probleem doet zich voor bij de lijst met 5 items op pagina 21.

Oplossing:

Markeer de lijst met een L- en Li-tags.

Kleurcontrast van grote tekst is te laag

In dit PDF-document wordt de blauwe kleur (#32A4DF) in combinatie met verschillende kleuren gebruikt. De contrastratio is te laag.

Op pagina 1 staat de witte tekst “Boer & Business in Balans ‘naar een duurzaam voedselsysteem 2020-2030’” op een blauwe achtergrond. Op pagina 4 staat de blauwe tekst “INLEIDING” op een witte achtergrond. In beide gevallen is de contrastratio te laag: 2,8:1.

Op pagina 2 staat de oranje tekst (#FEC823) “INHOUD” op een blauwe achtergrond. De contrastratio is te laag: 1,8:1.

Op pagina 3 staat de witte tekst “VOORWOORD” op een oranje achtergrond (#FEC823). De contrastratio is te laag: 1,6:1.

Oplossing:

Omdat het hier om grote tekst gaat, moet de contrastverhouding minimaal 3,0:1 zijn.

Kleurcontrast van kleine tekst is te laag

In dit PDF-document staat blauwe tekst (#32A4DF) op een witte achtergrond. Bijvoorbeeld op pagina 2 de tekst “Voedselvisie 2020-2030” en teksten zoals “5 2.1. Visie”, op pagina 5 teksten zoals “2.1 Visie” en andere.

Op pagina 29 staat witte tekst op een blauwe achtergrond. De contrastratio tussen blauw en wit is 2,8:1.

Verder staan in dit PDF-document op pagina’s 8–16 tabellen met twee kopcellen “De schakel” en “Uitdagingen ketenschakel”. In de kolom onder “De schakel” staat tekst met een te lage contrastratio ten opzichte van de witte achtergrond. Bijvoorbeeld op pagina 8 de lichtgroene (#9AB69A) tekst “Boer” met een contrastratio van 2,2:1 tegen de witte achtergrond.

Op pagina 24 staat in de grafiek onder “Figuur D | Maatschappelijke waardering A\F” grijze tekst op een witte achtergrond met een contrastratio van 2,7:1.

Oplossing:

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

Alleen kleur gebruikt in legenda bij grafiek

In het PDF-document staat op pagina 24 onder “Figuur D | Maatschappelijke waardering A\F” een staafdiagram. Hierin wordt kleur als enige manier gebruikt om informatie over te brengen.

Alleen mensen die de kleuren kunnen zien en van elkaar kunnen onderscheiden zien welke balk / lijn bij welke categorie in de legenda hoort. Dit kan opgelost worden door naast kleur bijvoorbeeld ook verschillende soorten arcering te gebruiken.

Oplossing:

Gebruik naast kleur bijvoorbeeld ook verschillende soorten arcering.

Link naar pagina: https://www.boerenbusinessinbalans.nl/nieuws/

Let op: Op deze pagina staan onder de kop “Uitgelicht nieuws” artikelen die ook links zijn. De toegankelijkheidsproblemen die bij deze artikelen zijn vastgesteld, zijn gelijk aan de eerder beschreven problemen bij soortgelijke artikelen op de homepagina https://www.boerenbusinessinbalans.nl/. Deze problemen hebben betrekking op de volgende succescriteria: 1.1.1, 1.3.1, 1.3.2, 1.4.3, 2.4.4 en 4.1.2.

Relatie tussen elementen in een groep is niet in de code vastgelegd

Op deze pagina staan artikelen die ook links zijn. In de artikelen in de buurt van het zoekveld en de selectievakjes staan teksten zoals “Toeleverancier”, “12-09-2025” en “13:27”. Deze teksten lijken visueel bij elkaar te horen, maar deze relatie wordt niet weerspiegeld in de HTML-structuur.

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

Oplossing:

Neem de elementen bijvoorbeeld op in een ul- of ol-element of voeg een kop boven deze tekst toe.

Link is niet met het toetsenbord te bedienen

Op deze pagina zijn de pagineringslinks niet toegankelijk met het toetsenbord.

Alle interactieve elementen, dus ook links, moeten met alleen het toetsenbord te bedienen zijn.

Oplossing:

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

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

Op deze pagina zijn de pagineringslinks 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- of ol-element, om de groep correct weer te geven in de code. Hierdoor begrijpt hulpsoftware de semantische relatie tussen de links.

Links hebben geen correcte toegankelijke rol

Op deze pagina hebben de pagineringslinks niet de juiste toegankelijke rol.

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.

Huidige pagina in paginering heeft alleen een andere kleur

Op deze pagina gebruikt de paginering onder de zoekresultaten kleur als enige visuele aanduiding van de huidige pagina.

Oplossing:

Je maakt de informatie toegankelijk door een andere visuele clue toe te voegen. Dit kan zijn een onderstreping of een kader met voldoende contrast.

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

Op deze pagina wordt het huidige paginanummer onder de zoekresultaten visueel onderscheiden, maar deze aanduiding 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.

Placeholdertekst wordt gebruikt als label voor een invoerveld

Op deze pagina is een invoerveld aanwezig met de plaatshoudertekst “Zoeken in artikelen...”. Er is echter geen blijvend label; de plaatshoudertekst 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.

Het legend-element voor het fieldset is verborgen voor de schermlezer

Op deze pagina staat onder "Nieuws" een groep selectievakjes. Deze selectievakjes zijn opgemaakt met een fieldset-element. Dit fieldset-element bevat een legend-element, maar het legend-element heeft display:none.

De CSS-code display:none zorgt ervoor dat inhoud verborgen wordt voor schermlezers.

Hierdoor heeft de groep elementen geen toegankelijke naam. Het legend-element is nodig om een label of naam te geven aan de groep keuzerondjes of selectievakjes.

Oplossing:

Verwijder de CSS-code display:none. Zorg dat het fieldset een toegankelijke naam heeft.

Element heeft niet de juiste toegankelijke rol

Op deze pagina ontbreken bij de selectievakjes onder “Nieuws” de juiste toegankelijke rol. De input-elementen zijn gebruikt voor deze selectievakjes, maar ze zijn met display:none verborgen voor de schermlezer.

Elk HTML-element heeft 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 element de juiste rol heeft.

Invoerveld is niet met het toetsenbord te bedienen

Op deze pagina zijn de selectievakjes onder “Nieuws” niet met het toetsenbord toegankelijk.

Oplossing:

Zorg dat alle invoervelden met het toetsenbord kunnen worden bediend.

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

Op deze pagina is de contrastratio tussen de grijze (#CCCCCC) rand van de selectievakjes onder “Nieuws” en de witte achtergrond 1,6:1.

Oplossing:

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

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

Deze pagina bevat meerdere iframes onder de kop “Video's” met title-attributen die geen informatie geven over het type inhoud. Bijvoorbeeld de title-attributen: "Regeneratieve landbouw met Kees Hotting", “Biodiversiteit op je Bord – icoonproject Voedselvisie”, “Jelle Beemsterboer over de Noord-Hollandse Voedselvisie” en andere.

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.

Video bevat tekst of logo’s waarvoor geen alternatief is

Op deze pagina worden meerdere video’s getoond onder de kop "Video's". Alle video’s bevatten op verschillende momenten tekst en logo’s, bijvoorbeeld in de video “Regeneratieve landbouw met Kees Hotting” rond 0:01, 0:08, 0:46 en verder. Er is echter geen media-alternatief of audiobeschrijving beschikbaar. Deze video bevat visuele informatie, zoals tekst en logo’s, die niet toegankelijk is voor blinde bezoekers.

Bezoekers die blind of slechtziend zijn, missen hierdoor informatie.

Oplossing:

Dit kan voor het 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.

Link naar pagina: https://www.boerenbusinessinbalans.nl/netwerk/water-land-en-dijken-sterk-in-plattelandsnatuur/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Water, land en dijken: sterk in plattelandsnatuur” een afbeelding met de alternatieve tekst “Foto van Toeleverancier”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina staat onder de kop "Wat doet Water, Land en Dijken?" een lijst met 5 items, maar zonder correcte markering.

Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt. 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/ .

Hetzelfde probleem komt voor bij de lijsten onder de koppen “Educatie” en “Vrijwilligers”.

Oplossing:

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

Kop-element gebruikt voor tekst die geen kop is

De tekst "Tekst+fotografie Rogier Reker, community manager Groen Kapitaal" op deze pagina is geen kop, maar is ten onrechte opgemaakt met een h6-element.

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 zelf koppen op een webpagina kan testen: https://properaccess.nl/zo-controleer-je-de-koppenstructuur-van-je-website/.

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

Wanneer deze pagina wordt bekeken met een schermresolutie van 1280 bij 1024 pixels en ingezoomd tot 400%, raakt de volgende tekst deels buiten beeld: “Water, land en dijken: sterk in plattelandsnatuur”.

Oplossing:

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

Link naar pagina: https://www.boerenbusinessinbalans.nl/icoonproject/lerend-netwerk-texel/

Alternatieve tekst van afbeelding is niet betekenisvol

Op deze pagina staat boven de kop “Lerend Netwerk Texel” een afbeelding met de alternatieve tekst “Foto van Voedselketen”. 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. Wanneer de afbeelding puur decoratief is en geen informatieve functie heeft, moet deze verborgen worden voor schermlezers. Gebruik voor img-elementen in dat geval een leeg alt-attribuut: alt="".

strong-element is gebruikt voor opmaak

Op deze pagina wordt het strong-element verkeerd gebruikt voor opmaak. Hele zinnen zijn in een strong-element geplaatst om ze vet te maken. Zie de tekst die begint met: “Overal in Noord-Holland wordt hard aan de voedseltransitie gewerkt …” en de teksten onder de kop “Over het lerend netwerk”.

Oplossing:

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

Opsomming is niet opgebouwd met het HTML-element ul of ol

Op deze pagina staat onder de kop "Over het lerend netwerk" een lijst met 3 items zonder correcte markering. Elk item van de lijst is opgemaakt met een apart ul-element.

Er moet juiste lijstmarkering worden toegepast zodat alle drie de items bij één enkele lijst horen.

Oplossing:

In plaats van elk item in een eigen ul-element te plaatsen, moeten ze gegroepeerd worden onder één ul met aparteli-elementen. Dit zorgt ervoor dat de lijst semantisch correct is en dat schermlezers deze goed aankondigen. 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/.

Kop is niet gemarkeerd als koptekst

Op deze pagina staan onder de kop “Gerelateerde artikelen” teksten in de artikelen die niet als kop zijn opgemaakt, bijvoorbeeld "Volop kansen voor erwten en veldbonen als veevoer".

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

Link met een afbeelding, linkdoel is onbekend

Op deze pagina staan onder de kop “Gerelateerde artikelen” artikelen. De afbeeldingen in deze artikelen functioneren als links. Het alt-attribuut van de afbeeldingen onder “Volop kansen voor erwten en veldbonen als veevoer” en “Kringlooplandbouw Texel” is echter leeg (alt=""), waardoor de afbeelding verborgen blijft voor schermlezers.

Daardoor heeft de link geen inhoud en is het onduidelijk naar welke bestemming de link verwijst. Dit zorgt ook voor afkeur op succescriterium 4.1.2, want de link heeft hierdoor ook geen toegankelijke naam.

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.
• Combineren met aangrenzende tekst: je kunt de link semantisch koppelen aan bestaande tekst die erboven of eronder staat. Dit kan vaak met een kop-element of een lijststructuur.

Naam van de knop beschrijft niet wat de knop doet

Op deze pagina heeft de link met afbeelding in het artikel “Schapen en erwten, over hoe de kringlooplandbouw op Texel vorm krijgt” de toegankelijke naam “bakker texel”, wat niet goed beschrijft waar de link naartoe leidt.

Een blinde bezoeker weet daardoor niet wat deze link precies doet.

Oplossing:

Voeg tekst toe die deze link goed beschrijft.

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

Op deze pagina staat in de artikelen onder de kop “Gerelateerde artikelen” grijze tekst (#8C8F94) op een witte achtergrond. De contrastratio is te laag: 3,2:1.

Daarnaast staan er grijze linkteksten (#C3C4C7) met de tekst “Meer lezen over …” in de artikelen onder “Schapen en erwten, over hoe de kringlooplandbouw op Texel vorm krijgt” en “Kringlooplandbouw Texel”. De contrastratio met de witte achtergrond is te laag: 1,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/.

Tabpanelen hebben geen toegankelijke namen

Op deze pagina staan onder de kop “Gerelateerde artikelen” artikelen. Elk artikel bevat een knop met een deel-icoon die een dialoogvenster met deelinstellingen opent. In dit dialoogvenster zijn twee tabbladen aanwezig: “WordPress insluiten” en “HTML insluiten”. De tabpanelen die bij deze tabbladen horen hebben geen toegankelijke namen.

Oplossing:

Zorg dat elk tabpaneel in het dialoogvenster voor deelinstellingen een toegankelijke naam heeft. De toegankelijke naam moet normaal gesproken afkomstig zijn van het bijbehorende tabblad. Dit kan worden bereikt door te verwijzen naar het tabblad met aria-labelledby of, indien nodig, door een expliciet aria-label toe te passen.