Tekstafstand en regelhoogte: wat WCAG vraagt

Er bestaat een hardnekkig misverstand over dit criterium. Veel mensen denken dat WCAG voorschrijft hoeveel regelafstand uw tekst moet hebben. Dat is niet zo. De eis rond tekstafstand in WCAG gaat over iets anders: als een bezoeker zelf meer ruimte instelt, mag uw website daar niet door kapotgaan. U hoeft uw ontwerp dus niet aan te passen aan bepaalde getallen. U moet zorgen dat het ontwerp meebuigt. Dat verschil bepaalt hoe u het test en wat u eventueel herstelt.

Wie past tekstafstand aan, en waarom?

Mensen met dyslexie, met een visuele beperking of met concentratieproblemen lezen soms makkelijker als regels verder uit elkaar staan, of als letters en woorden net wat meer lucht hebben. Ze stellen dat in via een browserextensie, een eigen stylesheet of een voorleesprogramma met leeshulp. De tekst op uw site krijgt dan andere waarden dan u ontwierp.

Op een site die daar niet op is gebouwd, gebeurt het volgende: de tekst groeit uit zijn vak, de onderste regel van een knop verdwijnt, een kop schuift over de alinea eronder. De bezoeker die het meest hulp nodig heeft bij het lezen, ziet zo het minst.

De vier waarden uit criterium 1.4.12

Succescriterium 1.4.12, “tekstafstand”, hoort bij niveau AA en is toegevoegd in WCAG 2.1. Het noemt vier waarden. Als een bezoeker deze instelt, mag er geen inhoud of functionaliteit verloren gaan:

Eigenschap	Waarde	Bij een letter van 16 pixels
Regelhoogte	minstens 1,5 keer de lettergrootte	24 pixels
Ruimte na een alinea	minstens 2 keer de lettergrootte	32 pixels
Letterafstand	minstens 0,12 keer de lettergrootte	ongeveer 2 pixels
Woordafstand	minstens 0,16 keer de lettergrootte	ongeveer 2,5 pixels

Nog eens: dit zijn geen waarden die u zelf moet gebruiken. Het zijn de waarden waarmee u test. Een regelhoogte van 1,5 is overigens wel een prettige standaard voor lopende tekst, maar dat is een ontwerpadvies, geen eis van dit criterium.

Er is één uitzondering: talen of schriften die een eigenschap niet gebruiken. Voor Nederlandse tekst geldt het dus volledig.

Zo test u het met een bookmarklet

U hoeft de waarden niet met de hand in te stellen. Er bestaat een kleine bookmarklet, een bladwijzer met een stukje JavaScript, die ze in één klik op de hele pagina toepast. Een veelgebruikte versie is gemaakt door Steve Faulkner en heet “Text spacing bookmarklet”; u vindt hem door op die naam te zoeken.

Wilt u het liever zelf doen, dan kunt u deze CSS tijdelijk toevoegen via de ontwikkelaarstools van uw browser:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

De test zelf:

1. Open een pagina en pas de bookmarklet of CSS toe.
2. Kijk of alle tekst nog zichtbaar is. Niets afgesneden, niets over elkaar heen.
3. Let speciaal op knoppen, menu’s, tabbladen, kaarten met een vaste hoogte, bannerteksten en labels bij formuliervelden.
4. Herhaal dit op uw belangrijkste pagina’s: homepage, een dienst of product, het contactformulier, en in een webshop de winkelwagen en checkout.

Een pagina die iets langer wordt, is geen probleem. Dat is juist de bedoeling. Het gaat alleen mis als tekst verdwijnt of onleesbaar wordt.

Waar het in de praktijk breekt

Vaste hoogtes

De grootste boosdoener. Een knop, kaart of banner met height in pixels en overflow: hidden knipt de tekst af zodra die meer ruimte nodig heeft. Vervang height door min-height, of laat de hoogte helemaal los en gebruik padding.

Menu’s op één regel

Een horizontaal menu dat net past, past niet meer als de letterafstand toeneemt. Het laatste item valt eraf of schuift onder de rest. Een menu dat mag doorlopen naar een tweede regel, of eerder overschakelt naar een mobiel menu, heeft daar geen last van.

Tekst in absoluut gepositioneerde blokken

Een label dat precies op een foto is geplaatst, of een badge op een productafbeelding, schuift bij meer ruimte buiten zijn vlak. Hier helpt meestal alleen een andere opbouw.

Afkappen met puntjes

Titels die met text-overflow: ellipsis op één regel worden gehouden, verliezen bij extra letterafstand nog meer tekst. Laat ze liever doorlopen.

U ziet: dit zijn vrijwel dezelfde oorzaken als bij het vergroten van tekst. Wie die problemen oplost, lost vaak beide tegelijk op. Lees ook wat er gebeurt als bezoekers de tekst vergroten.

Formulieren en meldingen

Ook labels naast invoervelden, foutmeldingen in een smal kader en cookiemeldingen met een vaste hoogte zijn gevoelig. Een cookiebanner die bij extra regelafstand de knop “Weigeren” buiten beeld duwt, is meer dan een schoonheidsfout: de bezoeker kan dan geen keuze meer maken. Test daarom ook de onderdelen die alleen af en toe verschijnen, zoals een pop-up of een melding na het versturen van een formulier.

Wat u zelf kunt herstellen

Een deel van de fouten kunt u zelf verhelpen, als u een beetje CSS durft aan te passen:

• Zoek in uw thema-instellingen of page builder naar velden voor een vaste hoogte bij knoppen of secties, en zet die op automatisch.
• Verwijder in het veld voor extra CSS regels met overflow: hidden op tekstblokken die u zelf heeft toegevoegd.
• Controleer na elke aanpassing opnieuw met de bookmarklet.

Zit het probleem diep in het thema of in een plugin, dan is het slimmer om het in een childthema op te lossen of door iemand te laten doen die het thema kent. Anders verdwijnt uw aanpassing bij de volgende update. Op toegankelijkheidsproblemen laten herstellen leest u hoe zo’n herstelronde in zijn werk gaat.

Prettige typografie gaat verder dan de eis

Het criterium zorgt alleen dat uw site niet breekt. Wie het leescomfort echt wil verbeteren, kijkt ook naar regellengte, lettertype en uitlijning. Voor lezers met dyslexie zijn die keuzes minstens zo belangrijk; daarover gaat een website die prettig leest voor mensen met dyslexie. En wie wil zien hoe tekstafstand samenhangt met de rest van een toegankelijke site, vindt het overzicht op website toegankelijk maken.