Succescriterium 1.4.12 Tekstafstand

Niveau AA

Lees de officiële tekst van succescriterium 1.4.12 Tekstafstand

• Tekstafstand: vaste hoogtes vervangen

  Er zijn drie regels CSS die dit criterium breken. Wie die opzoekt is er bijna.

  Een vaste hoogte knipt de tekst af zodra hij meer ruimte nodig heeft:

  /* knipt af */
  .knop { height: 40px; }
  
  /* groeit mee */
  .knop { min-block-size: 40px; }

  Een vaste hoogte met een verborgen overloop is de gevaarlijkste combinatie, want er is niet te zien dát er iets weg is:

  .kaart { height: 220px; overflow: hidden; }

  Haal de vaste hoogte weg, dan mag de verborgen overloop blijven staan.

  Een afgeknipt aantal regels mag, zolang de hele tekst ergens anders wel te lezen is:

  .samenvatting { -webkit-line-clamp: 3; }

  Is de afgeknipte versie de enige versie, dan raakt een bezoeker met ruimere instellingen informatie kwijt. Dan is het wel een afwijking.

  De veilige basis is dat tekstdragende onderdelen hun hoogte zelf bepalen:

  .wp-block-group, .wp-block-column,
  p, li, h1, h2, h3, h4, button, a {
    block-size: auto;
    overflow-wrap: break-word;
  }

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je leest of onthoudt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Tekstafstand: zo test je het

  Er is geen extensie nodig. Plak dit in de console van de browser en de pagina staat meteen op de waarden uit de eis:

  var s = document.createElement('style');
  s.textContent = '* {' +
    'line-height: 1.5 !important;' +
    'letter-spacing: 0.12em !important;' +
    'word-spacing: 0.16em !important; }' +
    'p { margin-bottom: 2em !important; }';
  document.head.appendChild(s);

  Waar je op let:

  • Tekst die uit een knop loopt of erin verdwijnt.
  • Kaarten waarvan de laatste regel is afgeknipt. Vergelijk met de kaart ernaast.
  • Overlappende regels, bijna altijd door een vaste hoogte op de omhullende laag.
  • Een menu dat niet meer past en over de inhoud valt.
  • Tabellen waarvan een cel zijn buurcel induwt.

  Dat de pagina langer wordt is geen fout. Knoppen worden hoger en kaarten groeien; de eis is dat er niets verdwijnt, niet dat het ontwerp gelijk blijft.

  Ververs de pagina om de eigen stijl terug te krijgen.

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je leest of onthoudt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Tekstafstand: wat het criterium vraagt

  Mensen met dyslexie lezen sneller als er meer ruimte tussen de regels en de letters staat. Er zijn browserextensies die die ruimte op elke site instellen. Zorg daarom dat je tekst leesbaar blijft als een bezoeker die ruimte ruimer zet.

  De tekst moet het uithouden bij deze vier waarden:

  • Regelafstand 1,5 keer de tekstgrootte.
  • Ruimte tussen alinea’s 2 keer de tekstgrootte.
  • Letterafstand 0,12 keer de tekstgrootte.
  • Woordafstand 0,16 keer de tekstgrootte.

  Je hoeft die waarden niet zelf te gebruiken. De eis is dat de pagina eraan kan als een bezoeker ze instelt.

  Dit is zelden een ontwerpprobleem en bijna altijd hetzelfde bouwprobleem: ergens staat een vaste hoogte. Zolang de tekst past valt dat niet op; bij een ruimere regelafstand verdwijnt de onderste regel.

  Thema’s

  Ontwerp Tekst

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je leest of onthoudt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina