1.4.4 Herschalen van tekst

Succescriterium 1.4.4 Herschalen van tekst

Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.

Herschalen van tekst begrijpen (Engelstalig)

Bezoekers moeten tekst tot 200% kunnen vergroten met de functies van hun browser, zoals zoomen. Belangrijkste eis: alles blijft leesbaar en bruikbaar. Dus geen tekst die overlapt, wordt afgesneden of verdwijnt.

Mensen die slechtziend zijn vergroten tekst soms om die beter te kunnen lezen. Zorg daarom dat je website goed meeschaalt als bezoekers inzoomen.

Uitzonderingen zijn:

ondertitels
afbeeldingen van tekst

Hoe pas je dit toe?

Zorg dat alle tekst tot 200% te vergroten is, zonder dat content verdwijnt of functies niet meer werken.
Blokkeer zoomen niet in het <meta name="viewport">-element.

Herschalen van tekst

Het vergroten of verkleinen van tekst zit standaard ingebouwd in browsers. Gebruik hiervoor de toetscombinatie Control of Command + + voor inzoomen en Control of Command + - voor uitzoomen.

Control of Command + 0 zet de zoom terug op 100%.

Lees meer over weergave en toegankelijkheid

Handige tips

Gebruik flexibele lay-outs die zich aanpassen aan verschillende tekstgroottes.
Gebruik relatieve eenheden zoals em of rem voor tekstgroottes.
Geef blokken met content geen vaste hoogte of breedte.

Voor wie is dit belangrijk?

Mensen die slechtziend zijn.

Wie is verantwoordelijk?

Hoe toets je dit?

Benodigdheden

Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
Viewport ingesteld op 1280px bij 1024px

Uitzonderingen

Uitzonderingen zijn:

ondertitels
afbeeldingen van tekst

Testprocedure

Test 1: Herschalen

Browserzoom

Open de te testen webpagina in browser 1
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
Open dezelfde webpagina in browser 2
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Vergroot de pagina tot 200% zoom
- Herlaad de pagina
Verken de pagina in browser 2
- Bepaal welke dynamische content er is:
  - Navigaties en subnavigaties
  - Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
  - Dialoogvensters
  - Carrousels
  - Tabbladen
  - Mediaspelers
  - Formulieren
- Open of activeer elk element
Vergelijk beide vensters, ook met elk element geopend, en controleer:
- Of alle tekst minstens 2 keer zo groot wordt weergegeven
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft

Let op: Alleen als niet alle tekst bij 200% zoom minstens 2 keer zo groot wordt weergegeven.

Vergroot de pagina in browser 2 verder tot 300% en 400% zoom en controleer:
- Of de tekst bij een van deze zoomniveaus minstens 2 keer zo groot wordt weergegeven
- Of alle content beschikbaar en leesbaar blijft tot dat zoomniveau
- Of alle functionaliteit beschikbaar en bruikbaar blijft tot dat zoomniveau

Tekst vergroten

Let op: Alleen als de pagina met browserzoom niet voldoet.

Herstel de zoom naar 100% in browser 2
Pas de lettertype-instellingen aan:
- In Chrome: Instellingen → Vormgeving → Lettertypen aanpassen → Lettergrootte en zet de lettergrootte van 16 naar 32
- In Firefox: Instellingen → Algemeen → Zoom, schakel Alleen tekst inzoomen in en zet de zoom op 200%
Vergelijk beide vensters en controleer:
- Of alle tekst minstens 2 keer zo groot wordt weergegeven
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft

Test 2: Herschalen met bedieningselementen op de pagina

Let op: Alleen als de pagina met browserzoom en met de tekstinstellingen van de browser niet voldoet.

Inventariseer de pagina
- Bepaal of er bedieningselementen zijn voor tekstvergroting
Test de bedieningselementen voor tekstvergroting en controleer:
- Of alle tekst minstens 2 keer zo groot wordt weergegeven
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft

Test 3: Viewport

Zoek in de code naar het <meta name="viewport">-element en controleer:
- Of de user-scalable-parameter niet de waarde no of 0 heeft
- Of de maximum-scale-parameter ontbreekt of een waarde van 2 of hoger heeft

Beoordeling

Voor alle tekst moet minstens één van de volgende zaken gelden:
- De tekst wordt met browserzoom minstens 2 keer zo groot weergegeven
- De tekst wordt met de tekstinstellingen van de browser minstens 2 keer zo groot weergegeven
- De tekst wordt met bedieningselementen op de pagina minstens 2 keer zo groot weergegeven
Bij het herschalen van tekst moet alle content beschikbaar en leesbaar blijven tot de tekst 2 keer zo groot is
Bij het herschalen van tekst moet alle functionaliteit beschikbaar en bruikbaar blijven tot de tekst 2 keer zo groot is
Het <meta name="viewport">-element moet zoomen niet blokkeren

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent