Ga naar hoofdinhoud

WCAG-succescriterium 1.4.4 Herschalen van tekst

Niveau AA

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.

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.

Het verschil met 1.4.10 Reflow 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.

Veelgemaakte fouten

Tekst in een container met een vaste hoogte wordt afgesneden

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.

Hoe te testen: vergroot de tekst tot 200% via de browserinstellingen. Wordt er tekst afgesneden? Inspecteer verdachte elementen in de DevTools en controleer of een combinatie van height en overflow: hidden de oorzaak is.

Niet doen

Vaste hoogte knipt vergrote tekst af

.card-beschrijving {
  height: 120px;
  overflow: hidden;
}

Doen

Minimale hoogte laat de container meegroeien

.card-beschrijving {
  min-height: 120px;
}

Wie kan dit oplossen: een developer vervangt height door min-height zodat de container meegroeit met de tekst.

Tekst wordt niet groter bij aangepaste browserinstelling

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.

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.

Niet doen

Lettergrootte alleen in viewport units

h1 {
  font-size: 5vw;
}


p {
  font-size: 2vw;
}

Doen

Lettergrootte met clamp die mee schaalt met de browserinstelling

h1 {
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}


p {
  font-size: clamp(1rem, 1vw + 0.75rem, 1.5rem);
}

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.

Wie kan dit oplossen: een developer vervangt pure vw-waarden door een combinatie met rem via clamp().

Tekst overlapt andere elementen bij vergroting

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.

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.

Niet doen

Vaste afmetingen op een knop, tekst loopt over

.knop {
  width: 120px;
  height: 40px;
  overflow: hidden;
}

Doen

Knop groeit mee met de tekst

.knop {
  min-width: 120px;
  padding: 0.5em 1em;
}

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.

Wie kan dit oplossen: een developer vervangt vaste afmetingen door flexibele waarden met padding in em of rem.

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.

Hoe te testen: vergroot de tekst tot 200%. Kun je alle navigatie-items lezen en aanklikken? Valt er tekst buiten het scherm?

Niet doen

Navigatie-items met een vaste breedte

.nav-item {
  display: inline-block;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
}

Doen

Navigatie die wrapt bij vergrote tekst

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


.nav-item {
  padding: 0.5em 1em;
}

Met flex-wrap: wrap springen items die niet meer passen naar de volgende regel.

Wie kan dit oplossen: een developer bouwt een navigatie die bij vergrote tekst kan wrappen of naar een mobiele variant omschakelt.

De bezoeker kan niet inzoomen op de pagina

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.

Hoe te testen: inspecteer de <head> van de pagina in de DevTools. Bevat de viewport meta-tag maximum-scale, minimum-scale of user-scalable=no?

Niet doen

Viewport meta-tag blokkeert inzoomen

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Doen

Viewport meta-tag zonder zoombeperkingen

<meta name="viewport" content="width=device-width, initial-scale=1" />

De meeste mobiele browsers negeren user-scalable=no inmiddels, maar niet allemaal. Verwijder deze attributen zodat inzoomen altijd mogelijk is.

Wie kan dit oplossen: een developer verwijdert de zoombeperkende attributen uit de viewport meta-tag.

Formulierlabel verdwijnt achter het invoerveld bij vergroting

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.

Hoe te testen: vergroot de tekst tot 200%. Zijn alle labels bij hun invoervelden nog zichtbaar?

Niet doen

Label en invoerveld naast elkaar met vaste breedtes

.form-groep {
  display: flex;
  align-items: center;
}


.form-groep label {
  width: 150px;
  flex-shrink: 0;
}


.form-groep input {
  flex: 1;
}

Doen

Label boven het invoerveld, groeit mee met de tekst

.form-groep {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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.

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.

Hoe te testen

Voor iedereen

  1. Ga naar de browserinstellingen en zet de standaard lettergrootte op 200% (of "Zeer groot"). In Chrome: Instellingen, Vormgeving, Lettergrootte.
  2. Bekijk de pagina. Is alle tekst groter geworden? Tekst die niet verandert is mogelijk een afbeelding of gebruikt alleen viewport units.
  3. Controleer of er geen tekst wordt afgesneden, overlapt of buiten het scherm valt.
  4. Controleer of alle functies nog werken: formulieren, knoppen, navigatie, menu's.
  5. Test ook met browserzoom op 200% (Ctrl + + of Cmd + +). Dit vergroot alles, niet alleen tekst.

Voor developers

  1. Zoek in de CSS naar font-size met alleen vw als eenheid. Vervang door een combinatie met rem via clamp().
  2. Zoek naar containers met een vaste height in combinatie met overflow: hidden. Controleer of tekst bij 200% vergroting wordt afgesneden.
  3. Controleer de viewport meta-tag. Verwijder maximum-scale, minimum-scale en user-scalable=no.
  4. Controleer knoppen en navigatie-items. Groeien ze mee met de tekst of worden ze afgesneden?
  5. Zoek naar tekst in afbeeldingen die essentieel is voor de content. Vervang door echte tekst in HTML.
  6. Gebruik axe DevTools of Lighthouse voor een eerste scan. De viewport meta-tag wordt automatisch gecontroleerd.

Gerelateerde succescriteria

  • 1.4.10 Reflow: 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.
  • 1.4.5 Afbeeldingen van tekst: tekst die als afbeelding wordt weergegeven kan niet vergroot worden via de browserinstelling. Gebruik echte tekst in plaats van afbeeldingen.
  • 1.4.12 Tekstafstand: aangepaste regelafstand, woordafstand en letterafstand mogen geen contentverlies veroorzaken. Dezelfde CSS-oplossingen (flexibele containers, geen vaste hoogtes) helpen bij beide criteria.
  • 1.4.3 Contrast (minimum): 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.

Relevante bronnen

Gerelateerde NL Design System-richtlijnen

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.