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.

✎Noot 1

Het is niet verplicht om voor content deze waarden voor tekstafstand te gebruiken. De eis is om ervoor te zorgen dat als een gebruiker de ingestelde waarden vervangt, er dan geen content of functionaliteit verloren gaat.

✎Noot 2

Voor sommige talen gebruiken schriftsystemen verschillende instellingen voor tekstafstand, zoals inspringen aan het begin van een alinea. Auteurs worden aangemoedigd om lokaal beschikbare handreikingen te volgen voor het verbeteren van de leesbaarheid en duidelijkheid van tekst in hun schriftsystemen.

Tekstafstand begrijpen (Engelstalig)

Met de browserextensie Stylus kun je zelf aangepaste stijlen maken. Deze kun je gemakkelijk aan- en weer 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;
}

Download Stylus voor Firefox of Chrome.

• 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 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

Test 1: Tekstafstand

1. Open de te testen webpagina in browser 1
   • Stel de viewport in op 1280px bij 1024px
   • Zorg dat de zoom op 100% staat
2. Open dezelfde webpagina in 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
3. Inventariseer de pagina in browser 2
   • Bepaal of de aangepaste tekstafstand op alle tekst is toegepast:
     • Regelhoogte: minstens 1,5 keer de lettergrootte
     • Alinea-afstand: minstens 2 keer de lettergrootte
     • Letterafstand: minstens 0,12 keer de lettergrootte
     • Woordafstand: minstens 0,16 keer de lettergrootte
4. Verken de pagina in browser 2 met muis en toetsenbord
   • Bepaal welke dynamische content er is:
     • Navigaties en subnavigaties
     • Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
     • Dialoogvensters
     • Carrousels
     • Tabbladen
     • Mediaspelers
     • Tooltips
     • Foutmeldingen bij formulieren
   • Open of activeer elk element
   • Verstuur formulieren leeg of met foute invoer om foutmeldingen te tonen
5. Vergelijk beide vensters, ook met elk element geopend, en controleer:
   • Of alle content beschikbaar en leesbaar blijft
   • Of alle functionaliteit beschikbaar en bruikbaar blijft

Afgekapte tekst

Let op: Alleen als tekst na het aanpassen is afgekapt (bijvoorbeeld met drie puntjes (…).)

6. Controleer voor elke afgekapte tekst of minstens één van de volgende waar is:
   • Of de volledige tekst op de pagina te tonen is (bijvoorbeeld bij focus of na activering)
   • Of de volledige tekst te zien is op de pagina waar de bijbehorende link naartoe gaat

Tekst zonder aangepaste tekstafstand

Let op: Alleen als de aangepaste tekstafstand bij stap 3 niet op alle tekst is toegepast.

7. Zoek in de code naar de tekst zonder aangepaste tekstafstand en controleer:
   • Of de pagina het aanpassen niet actief tegenhoudt
8. Pas de tekstafstand van die tekst aan met de ontwikkelaarstools en controleer:
   • Of alle content beschikbaar en leesbaar blijft
   • Of alle functionaliteit beschikbaar en bruikbaar blijft

Belangrijk om te weten

• Twee browsers tonen tekst soms net iets anders. Een verschil dat ook zonder de stijl te zien is, komt niet door de tekstafstand.

• 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
• Voor tekst die na het aanpassen van de tekstafstand is afgekapt (bijvoorbeeld met drie puntjes (…)), moet minstens één van de volgende zaken gelden:
  • De volledige tekst is op de pagina te tonen (bijvoorbeeld bij focus of na activering)
  • De volledige tekst is te zien op de pagina waar de bijbehorende link naartoe gaat
• De pagina moet het aanpassen van de tekstafstand niet actief tegenhouden

• Principe 1: Waarneembaar
  • Richtlijn 1.1 Tekstalternatieven
  • Richtlijn 1.2 Op tijd gebaseerde media
  • Richtlijn 1.3 Aanpasbaar
  • Richtlijn 1.4 Onderscheidbaar
• Principe 2: Bedienbaar
  • Richtlijn 2.1 Toetsenbordtoegankelijk
  • Richtlijn 2.2 Genoeg tijd
  • Richtlijn 2.3 Toevallen en fysieke reacties
  • Richtlijn 2.4 Navigeerbaar
  • Richtlijn 2.5 Input modaliteiten
• Principe 3: Begrijpelijk
  • Richtlijn 3.1 Leesbaar
  • Richtlijn 3.2 Voorspelbaar
  • Richtlijn 3.3 Assistentie bij invoer
• Principe 4: Robuust
  • Richtlijn 4.1 Compatibel