Doel van het onderzoek is om te beoordelen of de informatie op de website voor iedereen, inclusief mensen met een functiebeperking, toegankelijk is en bedient kan worden.
Deze rapportage bevat de bevindingen van dit onderzoek. Uitgewerkt per richtlijn benoemen we de status waarin aan de succescriteria voldaan wordt, wat daarbij geconstateerde toegankelijkheidsproblemen zijn en eventuele opmerkingen ter advies.
De opgetekende bevindingen zijn indicatief. Een betreffend probleem kan dus op meerdere locaties binnen de website voorkomen zonder dat die apart benoemd worden.
De gebruikte onderzoeksmethode, WCAG-EM, werkt op basis van een steekproef. Hoewel de steekproef van het onderzoek zorgvuldig wordt samengesteld om een evenwichtig beeld van de vastgestelde scope te onderzoeken, kan het voorkomen dat een toegankelijkheidsprobleem niet geconstateerd wordt, maar dit bij een vervolgonderzoek wel aan het licht komt. Ook kunnen bevindingen op een later tijdstip mogelijk anders geïnterpreteerd en beoordeeld worden door verdere ontwikkeling van kennis en technieken.
De WCAG (Web Content Accessibility Guidelines) zijn internationaal geaccepteerde richtlijnen, gepubliceerd door het W3C (World Wide Web Consortium), ter bevordering van de toegankelijkheid van webcontent voor mensen met een functiebeperking. De richtlijnen zijn techniek-onafhankelijk opgebouwd via een viertal principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust. Deze principes bevatten een serie richtlijnen met succescriteria waarmee webcontent beoordeeld kan worden.
Het toegankelijkheidsonderzoek voor de LaPosta nieuwsbrieftemplate afgerond. Hiervoor is gebruikgemaakt van de WCAG-EM-evaluatiemethode om te kijken hoe de onderzochte website voldoet aan de gestelde norm van WCAG 2.2 Niveau AA.
Op de volgende pagina's staan per succescriterium de bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Bij sommige succescriteria staan opmerkingen vermeldt. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Hieronder staan per succescriterium eventuele bevindingen genoteerd. Deze bevindingen kunnen gebruikt worden om aanpassingen te maken en de toegankelijkheid van de website en haar content verder te verbeteren. Let er bij het maken van aanpassingen op dat hierdoor nieuwe toegankelijkheidsproblemen kunnen ontstaan.
Tevens staan bij sommige succescriteria opmerkingen. Deze opmerkingen zijn geen foute bevindingen voor het betreffende criterium, maar genieten een sterke aanbeveling ter verbetering van de gebruikerservaring.
Dubbele tekstinformatie door alt-tekst in combinatie met zichtbare aanhef
Bovenaan de nieuwsbrief staat een afbeelding met een alt-attribuut en een title-attribuut. Beide bevatten de tekst: “Beste Agrariër,”. Dit is tevens de zichtbare tekst op de afbeelding.
Direct onder de afbeelding begint de eerste alinea opnieuw met “Beste agrariër, in deze nieuwsbrief…”.
De implementatie van het alt-attribuut is technisch correct: er is een tekstalternatief aanwezig dat de zichtbare tekst op de afbeelding beschrijft.
Het title-attribuut is daarnaast ook gevuld met dezelfde tekst en is overbodig.
Impact op gebruikers
Voor screenreadergebruikers kan hierdoor dubbele informatie ontstaan:
Eerst wordt het tekstalternatief van de afbeelding voorgelezen (“Beste Agrariër,”). Vervolgens wordt dezelfde aanhef opnieuw voorgelezen in de eerstvolgende alinea. Dit zorgt niet voor een blokkade, maar wel voor onnodige herhaling en een minder efficiënte leeservaring.
Het title-attribuut wordt in de meeste gevallen niet standaard voorgelezen door screenreaders, maar kan in sommige configuraties of hulpmiddelen alsnog extra duplicatie veroorzaken. Bovendien voegt het inhoudelijk geen extra informatie toe.
Oplossing
Laat het title-attribuut achterwege; dit voegt geen functionele waarde toe.
Maak als contentkeuze een duidelijke afweging:
Óf de aanhef als echte HTML-tekst opnemen (bij voorkeur),
Óf de afbeelding als decoratief markeren met alt="" wanneer de aanhef direct in tekst wordt herhaald.
Dit is voornamelijk een aandachtspunt qua content. Auteurs dienen alert te zijn op dubbele informatie wanneer tekst zowel in een afbeelding als direct daaronder in lopende tekst wordt opgenomen.
In de nieuwsbrief wordt een decoratief icoon (een trekker) gebruikt ter visuele ondersteuning van de content.
Dit icoon heeft een ingevuld alt-attribuut met beschrijvende tekst. Het icoon voegt echter geen inhoudelijke informatie toe en ondersteunt alleen visueel de vormgeving.
Impact op gebruikers
Voor screenreadergebruikers wordt het icoon nu aangekondigd als betekenisvolle inhoud.
Hierdoor ontstaat onnodige extra informatie in de voorleesvolgorde en wordt de leeservaring minder efficiënt. Dit kan verwarring geven als het icoon inhoudelijk niet relevant is voor de boodschap.
Decoratieve elementen horen daarom niet in de toegankelijkheidsboom terecht te komen.
Oplossing
Markeer het icoon als decoratief:
Gebruik alt="" bij <img>-elementen
Of verberg het element voor hulptechnologie met aria-hidden="true" (indien passend)
Dit kan bij het invoegen of de template gedaan worden. Hiermee wordt het icoon genegeerd door screenreaders en blijft de focus op de inhoudelijke tekst.
Screenshots
Afbeeldingslinks hebben een tekstalternatief dat het linkdoel niet beschrijft
In de nieuwsbrief worden afbeeldingen gebruikt als link naar andere pagina’s of artikelen.
De alt-teksten van deze afbeeldingen beschrijven uitsluitend wat er op de foto te zien is (bijvoorbeeld de visuele inhoud van de afbeelding), maar maken niet duidelijk dat het om een link gaat of wat het doel van de link is.
Hierdoor komt de toegankelijke naam van de link niet overeen met het daadwerkelijke linkdoel.
Impact op gebruikers
Voor screenreadergebruikers wordt de afbeelding aangekondigd als link, maar de toegankelijke naam beschrijft alleen de foto en niet waar de link naartoe leidt.
Dit kan ertoe leiden dat:
Het doel van de link onduidelijk is
Gebruikers niet kunnen inschatten wat er gebeurt bij activatie
Navigeren via een linkoverzicht minder effectief wordt
Een link moet programmatisch een duidelijke en beschrijvende naam hebben die het doel van de bestemming weergeeft.
Oplossing
Haal de links van de afbeeldingen af. Zowel de titels als de 'lees meer' knoppen bevatten ook al links naar dezelfde locaties.
Als de afbeeldingen links blijven bevatten, zorg dan dat het tekstalternatief van een afbeelding (ook) het linkdoel beschrijft, niet alleen de afbeelding.
Bijvoorbeeld:
In plaats van: alt="Boer op tractor"
Gebruik: alt="Boer op tractor, lees meer over de subsidieregeling voor landbouwmachines"
Screenshots
Onlogische contentvolgorde door afbeelding vóór bijbehorende kop
In meerdere secties staat een afbeelding met alt-tekst vóór de koptekst van het artikel waarop de afbeelding betrekking heeft.
Visueel is duidelijk dat de afbeelding hoort bij het daaropvolgende artikel. Semantisch wordt de afbeelding echter geplaatst onder de vorige kop in de structuur van de nieuwsbrief.
Daardoor behoort de afbeelding programmatisch nog tot het voorgaande onderdeel, terwijl de inhoudelijk logische relatie met het volgende artikel is.
Impact op gebruikers
Voor screenreadergebruikers wordt de afbeelding aangekondigd binnen de context van het voorgaande artikel.
Dit kan leiden tot:
Verwarring over bij welk onderdeel de afbeelding hoort
Onlogische of misleidende context bij het voorlezen van de alt-tekst
Een minder begrijpelijke documentstructuur bij navigatie via koppen
De visuele en programmatische volgorde komen hierdoor niet overeen.
Oplossing
Zorg dat de structurele volgorde in de HTML overeenkomt met de inhoudelijke relatie:
Plaats de kop (h2/h3) eerst.
Plaats daarna de bijbehorende afbeelding binnen dezelfde sectie.
Of groepeer kop en afbeelding binnen een semantische container (bijvoorbeeld een section of artikelblok).
Belangrijk is dat de afbeelding programmatisch gekoppeld is aan het juiste artikelonderdeel.
Alternatief is om door middel van de CSS order property de volgorde in de code om te draaien maar de visuele presentatie gelijk te houden. Dit zal een technische aanpassing bij LaPosta nodig zijn, wellicht een eigen component.
Screenshots
Nieuwsbrief start met een h2-kop zonder voorafgaande hoofdkop
De nieuwsbrief begint met de kop “In deze editie”, die is opgemaakt als een h2-element.
Technisch gezien is dit niet in strijd met de specificaties: een pagina mag beginnen met een h2 . Zonder voorafgaande hoofdkop (h1) ontbreekt wel het overkoepelende onderwerp of een titel die de nieuwsbrief aanduidt. Dit kan verwarring geven.
Impact op gebruikers
Screenreadergebruikers gebruiken koppen om snel inzicht te krijgen in de structuur van een pagina of document.
Wanneer een nieuwsbrief direct start met een h2:
Ontbreekt een duidelijke hoofdtitel in de koppenstructuur.
Is minder goed duidelijk wat het overkoepelende onderwerp of de editie betreft.
Kan de structuur minder logisch aanvoelen bij navigatie via koppenoverzicht.
Dit vormt geen directe toegankelijkheidsblokkade, maar kan de begrijpelijkheid en structuurbeleving verminderen.
Oplossing
Overweeg om de titel van de nieuwsbrief (bijvoorbeeld onderwerp of editie-aanduiding) als h1 op te nemen en daarna “In deze editie” als h2 te gebruiken.
Hiermee ontstaat een logische hiërarchie:
h1 – Titel nieuwsbrief h2 – In deze editie h3 – Eerste artikel h3 – Tweede artikel
Dit verbetert de semantische structuur en ondersteunt navigatie via koppen.
Screenshots
Onvoldoende contrast tussen witte tekst en wisselende achtergrondafbeelding
Bovenaan de nieuwsbrief wordt witte tekst geplaatst over een achtergrondafbeelding.
De achtergrondafbeelding kan wellicht anders zijn per nieuwsbrief. In het getoetste voorbeeld is het contrast onvoldoende ten opzichte van de lichte delen van de afbeelding.
De leesbaarheid van de tekst is daarmee afhankelijk van de gekozen afbeelding.
Impact op gebruikers
Gebruikers met een visuele beperking, verminderd contrastzicht of kleurenblindheid kunnen moeite hebben om de tekst goed te lezen.
Oplossing
Zorg dat voldoende contrast altijd gewaarborgd is, ongeacht de gekozen afbeelding. Mogelijke oplossingen:
Plaats een semi-transparante donkere overlay tussen afbeelding en tekst.
Gebruik een vaste donkere achtergrond achter de tekst (bijvoorbeeld een kleurvlak of gradient).
Leg in processen vast om tekstkleur en beeldmateriaal zodanig af te stemmen dat minimaal 3:1 contrast wordt gehaald (voor dikgedrukte/grote tekst).
Meest betrouwbaar is dat de oplossing onafhankelijk is van de specifieke foto, zodat auteurs niet per nieuwsbrief handmatig contrast hoeven te beoordelen.
Screenshots
Horizontaal scrollen bij 400% zoom door niet-afbrekend e-mailadres
Bij 400% zoom ontstaat horizontale scroll op de pagina.
De oorzaak is een lang e-mailadres in de content dat niet automatisch wordt afgebroken wanneer de beschikbare breedte beperkt is. Hierdoor wordt de content breder dan de viewport, wat horizontaal scrollen noodzakelijk maakt.
Er gaat geen content verloren; alle informatie blijft beschikbaar, maar horizontaal scrollen is in deze context niet functioneel noodzakelijk en daardoor ontstaat toch een afkeuring.
Impact op gebruikers
Gebruikers die sterk inzoomen (bijvoorbeeld mensen met een visuele beperking) moeten mogelijk horizontaal scrollen om alle content te kunnen lezen.
Dit kan:
De leeservaring minder comfortabel maken
Extra cognitieve belasting veroorzaken
De efficiëntie van navigeren verminderen
Omdat er geen content verloren gaat, is er geen blokkade van functionaliteit, maar het voldoet niet aan de reflow-eis. Doordat het via CSS niet gestopt wordt, kan er ook een situatie ontstaan waarbij content wel buiten de viewport valt.
Oplossing
Zorg dat lange, ononderbroken tekst, zoals e-mailadressen of URL’s, kan worden afgebroken binnen de beschikbare breedte.
Mogelijke oplossingen:
CSS toepassen zoals overflow-wrap: break-word; of word-break: break-word; of e-mailadressen opmaken zodat ze natuurlijk kunnen afbreken (bijvoorbeeld via soft hyphen of zero-width break waar passend).
Belangrijk is dat tekst zich aanpast aan smalle viewports zonder horizontaal scrollen te veroorzaken.
Screenshots
Meerdere links met identieke linktekst “Lees meer” verwijzen naar verschillende bestemmingen
In de nieuwsbrief komen meerdere links voor met de zichtbare linktekst “Lees meer”.
Deze links verwijzen naar verschillende pagina’s of artikelen, maar zijn tekstueel niet van elkaar te onderscheiden. In de directe linktekst wordt geen aanvullende context meegegeven over het doel van de link.
Impact op gebruikers
Voor screenreadergebruikers en gebruikers van spraaksoftware kan dit problemen opleveren:
In een linkoverzicht worden meerdere identieke links (“Lees meer”) getoond.
Het is niet duidelijk naar welk artikel of onderwerp elke link verwijst.
Gebruikers moeten extra context opzoeken in de omliggende tekst, wat de navigatie minder efficiënt maakt.
Hierdoor wordt het moeilijker om doelgericht te navigeren en snel een keuze te maken.
Oplossing
Zorg dat iedere linktekst zelfstandig beschrijvend is. Bijvoorbeeld:
“Lees meer over subsidieregeling X”
“Lees meer over gewasbescherming”
“Lees meer over het marktrapport 2026”
Een alternatief is om visueel “Lees meer” te tonen, maar programmatisch extra context toe te voegen via bijvoorbeeld:
Aanvullende, visueel verborgen tekst binnen de link
Overschrijving met een aria-label om een toegankelijke naam te geven die de nodige context bevat
Belangrijk is dat links in een overzicht eenduidig en onderscheidend zijn en gebruikers niet weg hoeven te navigeren van de link om het doel te achterhalen.
Screenshots
Testplan
Dit zijn de geteste pagina's en componenten die onderdeel zijn van de steekproef.
