Herschalen van tekst – Niek Derksen

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)

Webpagina’s moeten zo worden ontworpen dat gebruikers de tekst tot 200% kunnen vergroten. Belangrijkste eis: alles moet leesbaar en bruikbaar blijven. Dus geen overlappende, afgesneden of verdwenen tekst.

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

Uitzonderingen zijn:

ondertitels voor doven en slechthorenden
afbeeldingen van tekst

Hoe pas je dit toe?

Zorg dat tekst kan worden herschaald tot 200% zonder dat content wegvalt of functionaliteit niet meer werkt.
Zorg dat tekst kan worden herschaald op een apparaat met aanraakbediening.

Herschalen van tekst

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

Handige tips

Gebruik flexibele lay-outs die zich aanpassen.
Gebruik relatieve eenheden zoals em of rem voor tekstgroottes.
Vermijd vaste breedtes en hoogtes voor elementen.

Voor wie is dit belangrijk?

Mensen die slechtziend zijn.

Wie is verantwoordelijk?

Vormgever
Ontwikkelaar

Hoe toets je dit?

Benodigdheden

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

Testprocedure

Test 1: Herschalen

Browser zoom

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 andere browser (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
Vergelijk beide vensters en controleer:
- Of de tekst daadwerkelijk vergroot is tot 200%
- Of alle content nog steeds beschikbaar is
- Of alle functionaliteit nog steeds te gebruiken is

Tekst vergroten

Let op: Alleen als browser zoom niet succesvol is.

Herstel de zoom naar 100% in browser 2
Pas de lettertype-instellingen aan:
- In Chrome: Ga naar ‘Instellingen’ → ‘Vormgeving’ → ‘Lettertypen aanpassen’ → ‘Lettergrootte’ en verhoog de lettergrootte van 16 naar 32
- In Firefox: ‘Instellingen’ → ‘Algemeen’ → ‘Zoom’ en schakel het selectievakje Alleen tekst inzoomen in
Vergelijk beide vensters en controleer:
- Of de tekst daadwerkelijk vergroot is tot 200%
- Of alle content nog steeds beschikbaar is
- Of alle functionaliteit nog steeds te gebruiken is

Test 2: Herschalen met bedieningselementen op de pagina (indien van toepassing)

Controleer of de webpagina eigen bedieningselementen heeft voor tekstvergroting
Controleer bij gebruik van deze bedieningselementen:
- Of de tekst daadwerkelijk vergroot is tot 200%
- Of alle content nog steeds beschikbaar is
- Of alle functionaliteit nog steeds te gebruiken is

Test 3: Herschalen op apparaten met aanraakbediening

Controleer in de code in het <meta name="viewport">-element:
- Als er een user-scalable-parameter is, dan heeft deze de waarde yes
- Als er een maximum-scale-parameter is, dan heeft deze een waarde van 2 of hoger

Beoordeling

Tekst moet kunnen worden herschaald tot minimaal 200%
Alle content moet nog steeds beschikbaar en leesbaar zijn na het herschalen
Alle functionaliteit moet nog steeds beschikbaar en leesbaar zijn na het herschalen

Bronnen

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent