Deze pagina legt uit welke typografische keuzes directe impact hebben op toegankelijkheid, hoe deze zich verhouden tot WCAG 2.2 en EN 301 549, en hoe je ze praktisch toepast in ontwerp, design systems en ontwikkeling.
Waarom typografie cruciaal is voor digitale toegankelijkheid
Voor veel gebruikers is lezen niet vanzelfsprekend:
- Mensen met laag zicht
- Mensen met dyslexie
- Ouderen met verminderde contrastgevoeligheid
- Gebruikers die inzoomen of eigen stylesheets gebruiken
- Gebruikers met cognitieve belasting (stress, taalniveau, vermoeidheid)
Als tekst moeilijk leesbaar is, faalt de dienstverlening — ook als de techniek formeel "WCAG-compliant" lijkt.
Toegankelijke typografie ondersteunt:
- Sneller scannen
- Minder fouten in formulieren
- Beter begrip van instructies
- Lagere uitval in processen
Relevante WCAG-criteria
Typografie raakt meerdere succescriteria tegelijk:
Binnen de overheid geldt daarnaast EN 301 549, waarin deze eisen juridisch zijn verankerd.
Fontkeuze: wat werkt in de praktijk
Schreefloze fonts worden vaak gekozen vanuit het idee dat ze moderner en beter leesbaar zijn. In werkelijkheid bepalen andere factoren de leesbaarheid: x-height, onderscheid tussen letters (I, l, 1, O, 0), en consistentie in lettervormen. Een slecht ontworpen schreefloos font kan slechter leesbaar zijn dan een goed ontworpen serif-font.
- Ruime x-height (hoogte van kleine letters)
- Duidelijke verschillen tussen tekens
- Meerdere goed ontworpen font-weights
- Geen extreem dunne varianten
Bewezen opties in publieke omgevingen
Belangrijker dan het type font is: hoe het wordt toegepast in hiërarchie en spacing.
Tekstgrootte: minimum is geen optimum
WCAG schrijft geen vaste fontgrootte voor, maar eist dat:
"Tekst zonder verlies van functionaliteit tot 200% vergroot kan worden."
In de praktijk zien we vaak:
- Bodytekst van 14px
- Labels van 12px
- Helpertekst nog kleiner
Dat is technisch toegestaan, maar functioneel problematisch voor veel gebruikers.
Praktische richtlijn voor overheidstoepassingen
- Juridische voetnoten
- Metadata
- Formuliervelden
- Foutmeldingen
- Instructies
Regelafstand en witruimte: essentieel voor begrip
WCAG 1.4.12 – Text spacing
Gebruikers moeten tekst kunnen aanpassen naar:
Zonder dat tekst overlapt, content verdwijnt, of knoppen onbruikbaar worden.
Veelgemaakte ontwerpfouten
- Vaste containers met vaste hoogtes
- Tekst in cards die niet meegroeit
- Overlap bij foutmeldingen
Dit zijn structurele design system-problemen, geen randgevallen.
Koppen en hiërarchie: structuur vóór styling
Koppen zijn niet alleen visueel, maar ook semantisch essentieel.
Wat vaak misgaat
- Koppen alleen groter maken zonder juiste HTML-structuur
- Kopniveaus overslaan (H1 → H4)
- Visuele tussenkopjes die geen kop zijn in de code
Waarom dit belangrijk is
Screenreadergebruikers navigeren per kop en scannen documenten via structuur. Slechte hiërarchie leidt tot verdwalen in content en missen van belangrijke informatie.
- Elke pagina één H1
- Logische nesting van H2 → H3 → H4
- Styling los van structuur
Design en development moeten dit gezamenlijk ontwerpen.
Light fonts, thin weights en contrastproblemen
Designtrends zorgen vaak voor:
- font-weight 300 of lichter
- subtiele grijstinten
- "minimalistische" UI
In combinatie met oudere schermen, zonlicht of visuele beperkingen wordt tekst feitelijk onleesbaar, zelfs als contrastmetingen nét slagen.
- Gebruik minimaal font-weight 400 voor bodytekst
- Vermijd light weights voor knoppen, labels en foutmeldingen
- Test contrast op echte schermen, niet alleen met tools
Toegankelijkheid is geen rekensom, maar gebruiksrealiteit.
Tekst in knoppen, badges en UI-elementen
Niet alleen paragrafen tellen als tekst. WCAG geldt ook voor:
Veelgemaakte problemen
- Hoofdletters met krappe letterspacing
- Tekst die kleiner is dan bodytekst
- Onvoldoende contrast in disabled states
- Knoptekst minimaal gelijk aan bodytekst
- Geen all-caps zonder extra letterspacing
- Voldoende contrast in alle states
Zeker bij processtappen en bevestigingen is leesbaarheid cruciaal.
Typografie in design systems
In productteams ontstaat toegankelijkheid meestal niet in audits, maar in design tokens, component libraries en Figma styles. Als typografie daar niet goed is ingericht, worden fouten structureel herhaald en verspreid over meerdere teams.
Wat hoort in een toegankelijk design system
Zo wordt toegankelijkheid onderdeel van normaal ontwikkelwerk.
Wat dit betekent voor overheidsorganisaties
Voor publieke dienstverlening geldt:
- Iedereen moet zelfstandig kunnen lezen en begrijpen
- Uitval in digitale processen heeft directe maatschappelijke impact
- Ontoegankelijke UI leidt tot extra belasting op balies en callcenters
Daarom is typografie geen detail, maar een kwaliteitseis in ontwerp én realisatie.
Toegankelijke typografie hoort:
Niet alleen in auditrapporten achteraf.
Van richtlijn naar praktijk: borgen in het proces
Organisaties die structureel beter scoren op toegankelijkheid:
- Toetsen ontwerp vóór development
- Gebruiken vaste componenten
- Testen met echte gebruikers
- Koppelen WCAG direct aan UI-keuzes
Daar ligt ook de grootste winst: voorkomen in plaats van repareren.