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.
Uitzonderingen zijn:
- ondertitels voor doven en slechthorenden
- afbeeldingen van tekst
Mensen met een visuele beperking willen de tekst soms flink kunnen vergroten om het beter te kunnen lezen. Zorg daarom dat je website goed meeschaalt als mensen inzoomen.
Hoe pas je dit toe?
- Zorg dat tekst kan worden herschaald tot 200% zonder dat content wegvalt.
- Zorg dat tekst kan worden herschaald tot 200% zonder dat functionaliteit niet meer werkt.
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.
- Zorg dat tekst kan worden herschaald op een apparaat met aanraakbediening.
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 (venster 1)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Open dezelfde webpagina in nieuw venster (venster 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 venster 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 waardeyes - Als er een
maximum-scale-parameter is, dan heeft deze een waarde van2of hoger
- Als er een
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