Toegankelijkheidsrichtlijn

Toegankelijke koppenstructuur

Koppen helpen om content op te delen in overzichtelijke delen. Ze geven structuur, bieden een samenvatting van wat volgt, en maken het navigeren eenvoudiger – vooral voor gebruikers van screenreaders.

Een kop is meer dan alleen een visueel stijlelement. Het is een semantisch anker: dat wil zeggen dat het technisch correct moet worden gemarkeerd, zodat hulpmiddelen zoals screenreaders de inhoud goed kunnen interpreteren. Correct gebruik van koppen verhoogt zowel de leesbaarheid als de digitale toegankelijkheid.

Visuele structuur

Koppen onderscheiden zich visueel van gewone tekst, bijvoorbeeld door:

• een groter lettertype
• vetgedrukte of andere lettertypes
• specifieke kleuren of stijlen

Om de hiërarchie duidelijk te maken, worden vaak aflopende lettergroottes gebruikt. Een H1 is het grootst, gevolgd door H2, H3, enzovoort.

Technische structuur

Naast de visuele weergave is de technische opmaak essentieel. In webpagina’s en digitale documenten moeten koppen worden gemarkeerd met de juiste HTML-tags: h1, h2, h3, enzovoort. Dit heet semantische HTML: het gebruik van elementen die betekenis geven aan de inhoud.

Een goede structuur maakt het voor screenreaders mogelijk om logisch door een pagina te navigeren.

Logische hiërarchie:

Goed: h1 → h2 → h3

Niet aan te raden: h1 → h3 of h2 → h4

Koppenstructuur in Swing

De Swing-software bevat ingebouwde titelvelden voor toegankelijke content. Gebruik deze in plaats van handmatige opmaak (zoals vetgedrukte of vergrote tekst), zodat de juiste semantische structuur wordt toegepast.

Gebruik dus het veld Title voor de koptekst en niet het Content-veld.

→ Dit zorgt dat screenreaders de kop als zodanig herkennen.

Toegankelijke linkbeschrijvingen

Links zijn cruciaal in digitale content. Het is belangrijk dat ze duidelijk aangeven waar ze naartoe leiden — vooral voor screenreader-gebruikers.

Vermijd: alleen “Lees meer”

Een linktekst als “Lees meer” zonder verdere context is niet toegestaan. Screenreader-gebruikers krijgen dan bijvoorbeeld bij het ophalen van alle links vijf keer achter elkaar “Lees meer” te horen, zonder te weten wát er gelezen kan worden. Buiten de zin is de betekenis compleet verloren.

Voorbeeld (fout) <a href=”artikel.html”>Lees meer</a>

Oplossing 1: aria-label gebruiken

Wil je toch “Lees meer” tonen? Gebruik dan aria-label voor extra context voor screenreaders.

Voorbeeld (goed met aria-label)

Lees meer

Oplossing 2: beschrijvende linktekst

Beter is het om meteen een duidelijke linktekst te gebruiken die losstaand te begrijpen is:

Lees meer over zonne-energie

Zorg dat elke link uniek is, of visueel/contextueel voldoende wordt aangevuld, zoals: “Lees meer over klimaat” – “Lees meer over watergebruik” – enzovoort.

Linkbeschrijvingen in Swing

Swing bevat een veld voor Link description. Vul dit altijd in met een duidelijke, beschrijvende tekst.

Als de hele tegel klikbaar is, combineer dan het Title-veld met het Link description-veld voor maximale duidelijkheid.

Kleurgebruik en contrast

Gebruik niet alleen kleur om betekenis over te brengen

Kleur is géén voldoende middel op zichzelf. Mensen met kleurenblindheid of visuele beperkingen (en screenreaders) missen betekenis als kleur het enige onderscheid is.

Niet toegestaan:

• Alleen kleur om categorieën te onderscheiden
• Alleen kleurverschil in tekst om nadruk aan te geven

Fout voorbeeld:

“De groene zijn duurzaam, de rode zijn tijdelijk.” (zonder labels)

“De belangrijke info staat in het blauw.”

Wat moet je wél doen?

• Voeg labels toe bij kleuren (bijv. “Duurzaam”, “Tijdelijk”)
• Gebruik symbolen of iconen naast kleur

Let op kleurcontrast

Zorg ook voor voldoende contrast tussen tekst en achtergrond.

Minimaal contrast volgens WCAG:

• Normale tekst: 4.5:1
• Grote tekst (≥ 18pt of 14pt vet): 3:1

Gebruik tools zoals 

Gebruik bijvoorbeeld WebAIM Contrast Checker

Gebruik van <strong> vs. <b>

Beide maken tekst vet, maar:

• <b> = visueel accent, géén extra betekenis
• <strong> = inhoudelijke nadruk, screenreaders spreken dit ook met nadruk uit

Gebruik dus altijd <strong> om tekst vet te drukken.

Alternatieve tekst voor afbeeldingen (alt-tekst)

Alt-tekst beschrijft een afbeelding voor mensen die deze niet kunnen zien. Maar: niet élke afbeelding heeft alt-tekst nodig.

Voeg alt-tekst toe bij:

1. Informatieve afbeeldingen

Bevat de afbeelding unieke informatie? Beschrijf die dan.

2. Functionele afbeeldingen

Neem alle tekst in de afbeelding op in de alt-tekst.

• Voorbeeld: Zoek icoon - De gebruiker moet weten wat er gebeurt als je op de afbeelding klikt.
  <img src=”zoek.png” alt=”Zoeken”>

3. Afbeeldingen met tekst

Neem alle tekst in de afbeelding op in de alt-tekst.

Gebruik geen alt-tekst bij:

1. Decoratieve afbeeldingen

Gebruik een lege alt-tekst:

2. Herhalende informatie

Als de afbeelding dezelfde info toont als elders op de pagina, laat de alt leeg of verwijs via een toegankelijke koppeling.