You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{"WCAG-succescriterium 1.4.4 Herschalen van tekst"}
31
42
</WcagHeadingGroup>
32
43
33
-
## Uitleg
34
-
35
44
<Summary />
36
45
46
+
Dit succescriterium vereist dat tekst tot 200% vergroot kan worden zonder hulpsoftware en zonder verlies van inhoud of functionaliteit. Browserzoom telt mee als een manier om tekst te vergroten. Het gaat om tekst, niet om afbeeldingen van tekst. Die vallen onder [1.4.5 Afbeeldingen van tekst](https://nldesignsystem.nl/wcag/1.4.5/).
47
+
48
+
Het verschil met [1.4.10 Reflow](https://nldesignsystem.nl/wcag/1.4.10/) is dat reflow gaat over de layout bij 400% zoom en 320 pixels breedte. Dit succescriterium gaat specifiek over de leesbaarheid van tekst bij 200% vergroting.
49
+
50
+
## Veelgemaakte fouten
51
+
52
+
### Tekst in een container met een vaste hoogte wordt afgesneden
53
+
54
+
Een container heeft een vaste hoogte in pixels. Bij een normale lettergrootte past de tekst erin. Maar als de bezoeker de tekst vergroot tot 200%, groeit de tekst buiten de container. Met `overflow: hidden` verdwijnt het deel dat niet past. De bezoeker kan de rest van de tekst niet lezen.
55
+
56
+
**Hoe te testen:** vergroot de tekst tot 200% via de browserinstellingen. Wordt er tekst afgesneden? Inspecteer verdachte elementen in de <spanlang="en">DevTools</span> en controleer of een combinatie van `height` en `overflow: hidden` de oorzaak is.
57
+
58
+
<Guidelineappearance="dont"title="Vaste hoogte knipt vergrote tekst af">
59
+
```css
60
+
.card-beschrijving {
61
+
height: 120px;
62
+
overflow: hidden;
63
+
}
64
+
```
65
+
</Guideline>
66
+
67
+
<Guidelineappearance="do"title="Minimale hoogte laat de container meegroeien">
68
+
```css
69
+
.card-beschrijving {
70
+
min-height: 120px;
71
+
}
72
+
```
73
+
</Guideline>
74
+
75
+
**Wie kan dit oplossen:** een developer vervangt `height` door `min-height` zodat de container meegroeit met de tekst.
76
+
77
+
### Tekst wordt niet groter bij aangepaste browserinstelling
78
+
79
+
Een lettergrootte die alleen in `vw` is ingesteld, schaalt mee met de breedte van het browservenster, maar niet met de tekstgrootte-instelling van de browser. Als de bezoeker de lettergrootte op 200% zet, verandert er niets aan de tekst.
80
+
81
+
**Hoe te testen:** ga naar de browserinstellingen en zet de standaard lettergrootte op 200% (of "Zeer groot"). Verandert de tekst op de pagina? Als een kop of broodtekst niet groter wordt, is de lettergrootte waarschijnlijk alleen in `vw` ingesteld.
82
+
83
+
<Guidelineappearance="dont"title="Lettergrootte alleen in viewport units">
84
+
```css
85
+
h1 {
86
+
font-size: 5vw;
87
+
}
88
+
89
+
p {
90
+
font-size: 2vw;
91
+
}
92
+
```
93
+
94
+
</Guideline>
95
+
96
+
<Guidelineappearance="do"title="Lettergrootte met clamp die mee schaalt met de browserinstelling">
97
+
```css
98
+
h1 {
99
+
font-size: clamp(1.5rem, 3vw+1rem, 3rem);
100
+
}
101
+
102
+
p {
103
+
font-size: clamp(1rem, 1vw+0.75rem, 1.5rem);
104
+
}
105
+
```
106
+
107
+
</Guideline>
108
+
109
+
Door `rem` te combineren met `vw` in een `clamp()` schaalt de tekst zowel mee met het scherm als met de browserinstelling. De `rem`-waarde zorgt ervoor dat de instelling van de bezoeker wordt gerespecteerd.
110
+
111
+
**Wie kan dit oplossen:** een developer vervangt pure `vw`-waarden door een combinatie met `rem` via `clamp()`.
112
+
113
+
### Tekst overlapt andere elementen bij vergroting
114
+
115
+
Bij 200% tekstvergroting wordt tekst groter, maar de omliggende elementen groeien niet mee. Labels overlappen invoervelden, knoppen overlappen tekst of navigatie-items vallen over elkaar heen. De pagina is niet meer bruikbaar.
116
+
117
+
**Hoe te testen:** vergroot de tekst tot 200%. Controleer of tekst, knoppen en labels nog steeds leesbaar zijn en niet over andere elementen heen vallen.
118
+
119
+
<Guidelineappearance="dont"title="Vaste afmetingen op een knop, tekst loopt over">
120
+
```css
121
+
.knop {
122
+
width: 120px;
123
+
height: 40px;
124
+
overflow: hidden;
125
+
}
126
+
```
127
+
</Guideline>
128
+
129
+
<Guidelineappearance="do"title="Knop groeit mee met de tekst">
130
+
```css
131
+
.knop {
132
+
min-width: 120px;
133
+
padding: 0.5em1em;
134
+
}
135
+
```
136
+
</Guideline>
137
+
138
+
Door `padding` in `em` te gebruiken, schaalt de ruimte rond de tekst mee met de lettergrootte. De knop wordt automatisch groter als de tekst groter wordt.
139
+
140
+
**Wie kan dit oplossen:** een developer vervangt vaste afmetingen door flexibele waarden met `padding` in `em` of `rem`.
141
+
142
+
### Navigatie wordt onbruikbaar bij vergrote tekst
143
+
144
+
Een horizontale navigatiebalk heeft net genoeg ruimte voor de menu-items bij de standaard lettergrootte. Bij 200% tekstvergroting passen de items niet meer naast elkaar. Ze overlappen, vallen buiten het scherm, worden afgesneden of verliezen goed contrast met de achtergrond.
145
+
146
+
**Hoe te testen:** vergroot de tekst tot 200%. Kun je alle navigatie-items lezen en aanklikken? Valt er tekst buiten het scherm?
147
+
148
+
<Guidelineappearance="dont"title="Navigatie-items met een vaste breedte">
149
+
```css
150
+
.nav-item {
151
+
display: inline-block;
152
+
width: 150px;
153
+
white-space: nowrap;
154
+
overflow: hidden;
155
+
}
156
+
```
157
+
</Guideline>
158
+
159
+
<Guidelineappearance="do"title="Navigatie die wrapt bij vergrote tekst">
160
+
```css
161
+
.nav {
162
+
display: flex;
163
+
flex-wrap: wrap;
164
+
gap: 0.5rem;
165
+
}
166
+
167
+
.nav-item {
168
+
padding: 0.5em1em;
169
+
}
170
+
```
171
+
172
+
</Guideline>
173
+
174
+
Met `flex-wrap: wrap` springen items die niet meer passen naar de volgende regel.
175
+
176
+
**Wie kan dit oplossen:** een developer bouwt een navigatie die bij vergrote tekst kan wrappen of naar een mobiele variant omschakelt.
177
+
178
+
### De bezoeker kan niet inzoomen op de pagina
179
+
180
+
De viewport meta-tag bevat `maximum-scale=1` of `user-scalable=no`. De bezoeker kan niet inzoomen. Dit raakt zowel browserzoom als de knijpbeweging op mobiele apparaten.
181
+
182
+
**Hoe te testen:** inspecteer de `<head>` van de pagina in de <spanlang="en">DevTools</span>. Bevat de viewport meta-tag `maximum-scale`, `minimum-scale` of `user-scalable=no`?
De meeste mobiele browsers negeren `user-scalable=no` inmiddels, maar niet allemaal. Verwijder deze attributen zodat inzoomen altijd mogelijk is.
198
+
199
+
**Wie kan dit oplossen:** een developer verwijdert de zoombeperkende attributen uit de viewport meta-tag.
200
+
201
+
### Formulierlabel verdwijnt achter het invoerveld bij vergroting
202
+
203
+
Een label staat links naast een invoerveld. Bij 200% tekstvergroting wordt het label breder en schuift het achter of onder het invoerveld. De bezoeker ziet het label niet meer.
204
+
205
+
**Hoe te testen:** vergroot de tekst tot 200%. Zijn alle labels bij hun invoervelden nog zichtbaar?
206
+
207
+
<Guidelineappearance="dont"title="Label en invoerveld naast elkaar met vaste breedtes">
208
+
```css
209
+
.form-groep {
210
+
display: flex;
211
+
align-items: center;
212
+
}
213
+
214
+
.form-groeplabel {
215
+
width: 150px;
216
+
flex-shrink: 0;
217
+
}
218
+
219
+
.form-groepinput {
220
+
flex: 1;
221
+
}
222
+
```
223
+
224
+
</Guideline>
225
+
226
+
<Guidelineappearance="do"title="Label boven het invoerveld, groeit mee met de tekst">
227
+
```css
228
+
.form-groep {
229
+
display: flex;
230
+
flex-direction: column;
231
+
gap: 0.25rem;
232
+
}
233
+
```
234
+
</Guideline>
235
+
236
+
Labels boven het invoerveld werken het best bij tekstvergroting. Als het ontwerp labels naast de velden vereist, zorg dan dat de layout bij vergrote tekst naar een gestapelde variant overschakelt.
237
+
238
+
**Wie kan dit oplossen:** een designer kiest voor labels boven het invoerveld. Een developer bouwt een layout die bij vergrote tekst naar een gestapelde variant schakelt.
239
+
37
240
## Hoe te testen
38
241
39
-
Volg de instructies van [WCAG succescriterium 1.4.10](/wcag/1.4.10). Als de webpagina voldoet aan 1.4.10, dan voldoet hij zeer waarschijnlijk ook aan de eisen van 1.4.4.
242
+
### Voor iedereen
243
+
244
+
1. Ga naar de browserinstellingen en zet de standaard lettergrootte op 200% (of "Zeer groot"). In Chrome: Instellingen, Vormgeving, Lettergrootte.
245
+
2. Bekijk de pagina. Is alle tekst groter geworden? Tekst die niet verandert is mogelijk een afbeelding of gebruikt alleen viewport units.
246
+
3. Controleer of er geen tekst wordt afgesneden, overlapt of buiten het scherm valt.
247
+
4. Controleer of alle functies nog werken: formulieren, knoppen, navigatie, menu's.
248
+
5. Test ook met browserzoom op 200% (<kbd>Ctrl</kbd> + <kbd>+</kbd> of <kbd>Cmd</kbd> + <kbd>+</kbd>). Dit vergroot alles, niet alleen tekst.
249
+
250
+
### Voor developers
251
+
252
+
1. Zoek in de CSS naar `font-size` met alleen `vw` als eenheid. Vervang door een combinatie met `rem` via `clamp()`.
253
+
2. Zoek naar containers met een vaste `height` in combinatie met `overflow: hidden`. Controleer of tekst bij 200% vergroting wordt afgesneden.
254
+
3. Controleer de viewport meta-tag. Verwijder `maximum-scale`, `minimum-scale` en `user-scalable=no`.
255
+
4. Controleer knoppen en navigatie-items. Groeien ze mee met de tekst of worden ze afgesneden?
256
+
5. Zoek naar tekst in afbeeldingen die essentieel is voor de content. Vervang door echte tekst in HTML.
257
+
6. Gebruik <spanlang="en">axe DevTools</span> of <spanlang="en">Lighthouse</span> voor een eerste scan. De viewport meta-tag wordt automatisch gecontroleerd.
258
+
259
+
## Gerelateerde succescriteria
260
+
261
+
-[1.4.10 Reflow](https://nldesignsystem.nl/wcag/1.4.10/): bij 400% zoom past de layout zich aan zodat horizontaal scrollen niet nodig is. Reflow gaat over de layout, herschalen van tekst gaat over de leesbaarheid van de tekst zelf.
262
+
-[1.4.5 Afbeeldingen van tekst](https://nldesignsystem.nl/wcag/1.4.5/): tekst die als afbeelding wordt weergegeven kan niet vergroot worden via de browserinstelling. Gebruik echte tekst in plaats van afbeeldingen.
263
+
-[1.4.12 Tekstafstand](https://nldesignsystem.nl/wcag/1.4.12/): aangepaste regelafstand, woordafstand en letterafstand mogen geen contentverlies veroorzaken. Dezelfde CSS-oplossingen (flexibele containers, geen vaste hoogtes) helpen bij beide criteria.
264
+
-[1.4.3 Contrast (minimum)](https://nldesignsystem.nl/wcag/1.4.3/): vergrote tekst hoeft alleen aan de contrasteis van 3:1 te voldoen in plaats van 4,5:1. Tekst van 18pt of 14pt bold geldt als groot.
40
265
41
-
## Tips
266
+
## Relevante bronnen
42
267
43
-
- Als een pagina niet goed te vergroten is, dan kan dit in de HTML zijn ingesteld. In de `<head>` kan een `<meta>`-element staan met het attribuut `name="viewport"`. Dit element mag geen `maximum-scale` met een waarde onder de 3, of `user-scalable` met als waarde `0` of `no` bevatten.
268
+
-[WCAG 2.2: Succescriterium 1.4.4 Herschalen van tekst](https://www.w3.org/Translations/WCAG22-nl/#herschalen-van-tekst) — de officiële Nederlandstalige vertaling van het succescriterium. Gebruik dit als referentie voor de exacte eisen.
269
+
-[Understanding SC 1.4.4: Resize Text](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html) — de W3C-uitleg bij het succescriterium, met technieken en voorbeelden (Engels).
Een bezoeker moet tekst groter kunnen maken, tot wel twee keer zo groot. De pagina hoeft deze vergroting niet voor de bezoeker uit te voeren. Er hoeven bijvoorbeeld geen knoppen te zijn om mee te vergroten of verkleinen. De pagina moet ruimte bieden dat de bezoeker dit zelf kan doen. Groter maken moet niet tegengehouden worden, en de inhoud en werking van de pagina moet gelijk blijven.
6
-
7
-
Dit geldt alleen voor losse teksten en niet voor ondertitels of afbeeldingen van tekst.
8
-
9
-
Sommige mensen kunnen tekst alleen lezen als deze groter is.
3
+
Een bezoeker die moeite heeft met lezen, vergroot de tekst op een webpagina. Via de browserinstellingen of het besturingssysteem zet de bezoeker de lettergrootte op 200% van het origineel. Alle tekst op de pagina wordt groter, maar de inhoud blijft leesbaar en de website blijft bruikbaar. Er verdwijnt geen tekst, er overlapt niets en alle functies blijven werken.
0 commit comments