Zuiderzeeland - Nieuwsbrief Laposta - v2026.1 — Tabelweergave

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.

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.

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.

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.

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.

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.

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.

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"

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.

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.

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.

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.

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.

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.

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.

Gebruikers met een visuele beperking, verminderd contrastzicht of kleurenblindheid kunnen moeite hebben om de tekst goed te lezen.

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.

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.

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.

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.

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.

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.

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.