Normen · WCAG 2.2

SC 1.4.12 Niveau AA WCAG 2.1

Tekstafstand

Wanneer gebruikers de tekstafstand overschrijven — regelafstand 1,5×, alinea-afstand 2× de lettergrootte, letterafstand 0,12em, woordafstand 0,16em — mag de pagina geen inhoud of functionaliteit verliezen.

Wat het vereist

Gebruikers met dyslexie, slechtziendheid of cognitieve beperkingen installeren vaak browserextensies of gebruikersstijlbladen die de compacte typografie versoepelen. Het succescriterium definieert vier specifieke overschrijvingen — regelafstand 1,5× de lettergrootte, alinea-afstand 2× de lettergrootte, letterafstand 0,12em, woordafstand 0,16em — en vereist dat de pagina nog steeds werkt wanneer deze worden toegepast. Geen afgesneden tekst, geen overloop, geen ontbrekende inhoud.

Hoe er aan te voldoen

  • Stel containerhoogten in met min-height in plaats van vaste height zodat ze meegroeien als tekst uitbreidt.
  • Vermijd vaste pixelhoogten op knoppen, navigatie-items, kaarten en badges — laat ze meegroeien met de inhoud.
  • Test door een bekend bookmarklet te plakken (het WCAG 1.4.12 tekstafstandsbookmarklet bestaat) dat de vier overschrijvingen gelijktijdig toepast.
  • Sta toe dat tekst van nature omloopt; gebruik geen white-space: nowrap op labels die kunnen groeien.
  • Controleer of navigatiemenu’s, tabbladen en tabbladlabels nog passen wanneer de letterafstand groter wordt.

Veelvoorkomende fouten

  • Knoppen met height: 40px die het label afsnijden wanneer de regelafstand groeit naar 1,5.
  • Tabbladlabels met white-space: nowrap die hun container overlopen bij grotere letterafstand.
  • Kaarten met vaste hoogten waarbij tekst achter een „lees meer“-vervaag verborgen raakt.
  • Tooltips en badges die hun tekst afsnijden wanneer de alinea-afstand toeneemt.
  • Plakkerige kopteksten met vaste hoogten die over de pagina vallen wanneer de navigatietekst groeit.

Waarom het ertoe doet

Dit succescriterium treft „ontworpen voor één afstandsset“-lay-outs waarbij de ontwerper alles heeft vastgezet op een Figma-perfecte regelafstand. Echte gebruikers van leesondersteuningshulpmiddelen passen afstandsoverschrijvingen voortdurend toe. Het herstel bestaat doorgaans uit het omzetten van height naar min-height en het verwijderen van white-space: nowrap — kleine, mechanische wijzigingen die in de gehele gebruikersinterface renderen.