1.4.12 – Tekstafstand

Succescriterium 1.4.12 van de WCAG richt zich op de aanpasbaarheid van tekst, zodat deze leesbaar blijft voor mensen met bijvoorbeeld dyslexie. Dit criterium stelt dat wanneer een gebruiker tekststijlregels toepast om de tekst uit te rekken, er geen tekst mag verdwijnen of onleesbaar mag worden. Dit proces, ook wel herschalen genoemd, is anders dan het simpelweg vergroten van tekst. Sommige gebruikers bekijken websites met deze stijlkenmerken zonder te beseffen dat er mogelijk content ontbreekt.

Knoppen om tekst te vergroten

Sommige websites bieden knoppen aan om tekst te vergroten. Zijn deze verplicht? Zeker niet. Uit onze onderzoekservaring blijkt dat deze knoppen vaak niet optimaal functioneren en soms zelfs niet toegankelijk zijn. Gebruikers die behoefte hebben aan herschalen, beschikken meestal over eigen tools om dit te doen.

Hoe test je SC 1.4.12?

Een veelgebruikte tool om tekst te herschalen is de Stylus-extensie voor Google Chrome: Stylus Tool. Maak een nieuwe stijl aan en voeg de volgende code toe:

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

p {
  margin-bottom: 2em !important;
}

Stappen om een webpagina te testen op 1.4.12 – Tekstafstand:

1. Zet de vensterbreedte van de browser op minimaal 1280 pixels en het zoomniveau op 100%.
2. Zet de Stylus-tool aan.
3. Herlaad de pagina (Ctrl + Shift + R).
4. Controleer of er geen tekst afgesneden en onleesbaar wordt.

Het verwachte resultaat: alles moet leesbaar en bedienbaar blijven.

Voorbeelden van problemen onder 1.4.12 – Tekstafstand:

• De tekst op de website reageert niet op herschaling.
• Tekst verdwijnt buiten het zicht of achter andere elementen.
• Tekst wordt deels onzichtbaar en daardoor onleesbaar.
• Het minimale contrast gaat verloren, bijvoorbeeld wanneer witte tekst op een witte achtergrond verschijnt. Dit valt onder succescriterium 1.4.3 (Contrast).
• Tekst overlapt met andere tekst, waardoor de leesbaarheid vermindert. Zie ook de uitzonderingen hieronder.

Uitzonderingen:

• Ondertitels in video’s
• Afbeeldingen van tekst
• De inhoud van een canvas-element
• Wanneer afgesneden tekst onderdeel is van content die via een link volledig kan worden gelezen op een andere pagina (hierover bestaat echter discussie tussen onderzoeksbureaus).
• Tekst die overlapt met andere tekst, maar waarbij de pagina omhoog of omlaag kan worden gescrold om de teksten uit elkaar te halen.

Hoe los je het op?

Oplossing 1: Laat de containers meegroeien wanneer de tekst wordt herschaald. Gebruik hierbij relatieve eenheden.
Meer informatie: W3C – CSS Techniques voor WCAG

Oplossing 2: Gebruik een mechanisme om de afgesneden tekst te tonen, bijvoorbeeld op hover of focus.

Een van de mogelijke oplossingen. Zie live versie op Codepen.

<div class="truncated-text" tabindex="0">
  This is an example of a long piece of text that will be truncated with an ellipsis.
</div>

.truncated-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
  cursor: pointer; /* Optional: indicate that the text is interactive */
  border-bottom: 1px dotted #000; /* Optional: indicate there's more content */
}

/* Reveal full text on focus or hover */
.truncated-text:focus,
.truncated-text:hover,
.truncated-text:active {
  white-space: normal; /* Allows text to wrap and show fully */
  overflow: visible;
  text-overflow: clip;
  max-width: none; /* Removes width restriction */
}

document.querySelectorAll('.truncated-text').forEach(function(element) {
  element.addEventListener('click', function() {
    this.style.whiteSpace = 'normal';
    this.style.overflow = 'visible';
    this.style.textOverflow = 'clip';
    this.style.maxWidth = 'none';
  });
});

Dit artikel is bedoeld voor de ontwikkelaar.