Succescriterium 1.4.12 Tekstafstand
Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
- Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte;
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze eigenschappen voor tekststijl in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.
Tekstafstand begrijpen (Engelstalig)
Mensen die slechtziend zijn en mensen die dyslexie hebben, passen soms zelf de tekstweergave aan. Meer ruimte tussen regels, letters en woorden maakt tekst voor hen beter leesbaar. Ze doen dat met een browserextensie of een eigen stylesheet.
Je website hoeft zelf geen instelling voor tekstafstand te bieden. Maar past iemand de tekstafstand aan, dan mag er niks wegvallen of stukgaan. Dit geldt minstens tot deze waarden:
- regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte
- afstand tussen alinea’s naar ten minste 2 keer de lettergrootte
- letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte
- woordafstand (spatiëren van woorden) naar ten minste 0,16 keer de lettergrootte
Uitzonderingen zijn:
- ondertitels
- afbeeldingen van tekst
- talen en schrijfsystemen die één of meer van deze eigenschappen niet gebruiken
Hoe pas je dit toe?
- Zorg dat de tekstafstand groter kan worden zonder dat content wegvalt.
- Zorg dat de tekstafstand groter kan worden zonder dat functionaliteit niet meer werkt.
- Zorg dat de pagina niet voorkomt dat gebruikers de tekstafstand aanpassen.
Stijleigenschappen aanpassen
Pas zelf de stijleigenschappen van tekst eens aan. Is alle content nog leesbaar?
Met de browserextensie Stylus kun je aangepaste stijlen maken en gemakkelijk aan- en uitzetten. Gebruik de volgende CSS om te controleren hoe jouw website er uit ziet met de aangepaste stijleigenschappen van dit succescriterium:
* {
line-height: 1.5 !important;
letter-spacing: .12em !important;
word-spacing: .16em !important;
}
p {
margin-bottom: 2em !important;
}Lees meer over weergave en toegankelijkheid
Handige tips
- Gebruik flexibele lay-outs die zich aanpassen.
- Gebruik relatieve eenheden zoals
emofrem. - Vermijd vaste breedtes en hoogtes voor elementen.
Voor wie is dit belangrijk?
- Mensen die slechtziend zijn.
- Mensen die dyslexie hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
- Stylus browser-extensie
- In combinatie met mijn CSS-stijl: Pas tekstafstand aan
Uitzonderingen
Uitzonderingen zijn:
- ondertitels
- afbeeldingen van tekst
- talen en schrijfsystemen die één of meer van deze eigenschappen niet gebruiken
Geldt alleen voor:
- content in opmaaktalen die deze stijleigenschappen ondersteunen
Testprocedure
Test 1: Tekstafstand
- Open de te testen webpagina (browser 1)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Open dezelfde webpagina in een andere browser (browser 2)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Activeer de stijl Pas tekstafstand aan in Stylus
- Herlaad de pagina
- Vergelijk beide vensters en controleer:
- Of de tekstafstand daadwerkelijk wordt aangepast tot:
- Regelhoogte: minstens 1,5 keer de lettergrootte
- Alinea-afstand’s: minstens 2 keer de lettergrootte
- Letterafstand: minstens 0,12 keer de lettergrootte
- Woordafstand: minstens 0,16 keer de lettergrootte
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft
- Of de tekstafstand daadwerkelijk wordt aangepast tot:
Let op: Alleen als de tekstafstand bij stap 3 op sommige elementen niet is aangepast.
- Controleer:
- Of de pagina het aanpassen niet actief tegenhoudt
Beoordeling
- Alle content moet beschikbaar en leesbaar blijven na het aanpassen van de tekstafstand
- Alle functionaliteit moet beschikbaar en bruikbaar blijven na het aanpassen van de tekstafstand
- De pagina moet het aanpassen van de tekstafstand niet actief tegenhouden