Campus Design System

Appearance

1.4.12 Tekstafstand (Text Spacing) niveau AA ​

Uitleg ​

Het WCAG-criterium 1.4.12 Tekstafstand vereist dat de inhoud op een pagina leesbaar blijft wanneer gebruikers bepaalde stijlen aanpassen om de leesbaarheid te verbeteren. Dit betekent dat als een gebruiker tekstafstand, regelhoogte, letterafstand of woordafstand aanpast, de lay-out en de zichtbaarheid van de inhoud behouden moeten blijven, zonder dat tekst wegvalt of onleesbaar wordt.

Om aan dit criterium te voldoen, moet een website zo ontworpen zijn dat bij aanpassingen aan de volgende waarden de inhoud toegankelijk blijft:

  • Regelafstand: minstens 1,5 keer de lettergrootte.
  • Paragraafafstand: minstens 2 keer de lettergrootte.
  • Tekenafstand: minstens 0,12 keer de lettergrootte.
  • Woordafstand: minstens 0,16 keer de lettergrootte.

Dit criterium is met name belangrijk voor gebruikers met dyslexie, slechtziendheid of cognitieve beperkingen die baat hebben bij meer ruimte tussen tekstonderdelen om de leesbaarheid te verbeteren.

Wat betekent dit in de praktijk? ​

In de praktijk houdt dit in dat een website moet kunnen omgaan met stijlaanpassingen voor tekst zonder dat de inhoud verschuift, overlapt of afgekapt wordt. Dit betekent bijvoorbeeld dat de tekst zichtbaar blijft binnen de container, ook wanneer een gebruiker de regel- of woordafstand aanpast via hun browser of via toegangsinstellingen.

Waarom is dit belangrijk? ​

Het aanpassen van tekstafstand kan de leesbaarheid aanzienlijk verbeteren voor mensen met leesmoeilijkheden, visuele beperkingen of andere behoeften. Deze gebruikers hebben baat bij grotere afstanden tussen letters, woorden en regels om visuele overbelasting te verminderen en het lezen comfortabeler te maken.

Voorbeeld van het probleem ​

Stel je voor dat een webpagina gebruikmaakt van vaste tekstcontainers met strakke marges. Wanneer een gebruiker de regelafstand aanpast, overlapt de tekst of valt deze buiten de container, waardoor delen onleesbaar worden.

Oplossing voor dit probleem ​

Ontwerp tekstcontainers flexibel, zodat de inhoud zich kan aanpassen aan wijzigingen in de tekstafstand.

Gebruik bijvoorbeeld de volgende CSS-stijlen als basis:

css
p {
  line-height: 1.5; /* Regelafstand */
  margin-bottom: 1em; /* Paragraafafstand */
  word-spacing: 0.16em; /* Woordafstand */
  letter-spacing: 0.12em; /* Tekenafstand */
}

Dit zorgt ervoor dat bij stijlaanpassingen de tekstafstanden al voldoen aan WCAG-vereisten en dat gebruikers verder kunnen schalen zonder problemen.

Belangrijke overwegingen ​

  • Flexibele lay-outs: Vermijd het gebruik van vaste hoogtes voor tekstcontainers, zodat de lay-out zich aanpast aan grotere tekst.
  • Testen op schaalbaarheid: Controleer of de lay-out intact blijft wanneer tekstafstanden worden aangepast.
  • Overloopbehandeling: Zorg ervoor dat tekst niet buiten het zicht valt of wordt afgekapt bij aanpassingen.

Alternatieve benaderingen ​

  • CSS-aanpassingen voor responsiviteit: Gebruik CSS die werkt met relatieve eenheden (zoals em en rem in plaats van vaste pixels) voor meer flexibiliteit bij stijlaanpassingen.
  • Browser-extensies voor testen: Maak gebruik van extensies zoals de WCAG Text Spacing Bookmarklet om te controleren hoe een pagina zich gedraagt bij stijlaanpassingen.

Belangrijkste punten ​

  • Zorg ervoor dat tekst goed blijft leesbaar en zichtbaar is, ook bij aanpassingen aan regelafstand, tekenafstand, en woordafstand.
  • Houd rekening met gebruikers die tekststijl aanpassen voor een betere leesbaarheid.
  • Test de lay-out om te controleren of inhoud zichtbaar en bruikbaar blijft bij tekstaanpassingen.

Tools en Hulpmiddelen ​

  • WCAG Text Spacing Bookmarklet: Een tool om te testen hoe je website eruitziet bij aangepaste tekstafstanden. Text Spacing Bookmarklet.
  • Browser Developer Tools: Gebruik DevTools in Chrome of Firefox om stijlaanpassingen toe te passen en te testen of de lay-out correct reageert.

Betekenis voor toegankelijkheid ​

Door de tekst op een flexibele en schaalbare manier vorm te geven, zorgen we ervoor dat mensen met lees- of zichtbeperkingen eenvoudiger door de inhoud kunnen navigeren en lezen. Dit verhoogt de toegankelijkheid van tekstinhoud en bevordert een betere gebruikerservaring voor alle bezoekers.

Referenties ​