1.4.4 Tekst herschalen niveau AA

Uitleg

Het criterium 1.4.4 Resize Text van WCAG 2.2 richt zich op de mogelijkheid om tekst op een website te vergroten zonder verlies van inhoud of functionaliteit. Dit betekent dat gebruikers de tekst op een website kunnen vergroten tot 200% van de oorspronkelijke grootte, zonder dat dit leidt tot horizontaal scrollen of andere problemen die de leesbaarheid en bruikbaarheid van de website beïnvloeden.

De reden achter dit criterium is om gebruikers met visuele beperkingen, zoals een verminderd gezichtsvermogen, de mogelijkheid te geven om de tekst op een website aan te passen zodat deze gemakkelijker leesbaar wordt, zonder dat de rest van de gebruikerservaring verloren gaat.

Wat betekent dit in de praktijk?

Een website moet zo worden ontworpen dat gebruikers de tekst kunnen vergroten zonder dat er belangrijke informatie verloren gaat of zonder dat er noodzaak is voor horizontaal scrollen. Dit betekent dat ontwerpers ervoor moeten zorgen dat de lay-out van de pagina flexibel genoeg is om de tekst te schalen, zonder dat de interface onbruikbaar of onleesbaar wordt.

Dit criterium is van toepassing op alle tekst, behalve tekst die alleen onderdeel is van afbeeldingen of andere niet-tekstuele inhoud.

Waarom is dit belangrijk?

Sommige gebruikers, zoals ouderen of mensen met een visuele beperking, kunnen moeite hebben om kleine tekst te lezen, vooral als ze een slecht gezichtsvermogen hebben. Het geven van de mogelijkheid om de tekst te vergroten zonder verlies van functionaliteit is dus van cruciaal belang voor het toegankelijk maken van websites. Het stelt gebruikers in staat om hun ervaring aan te passen aan hun behoeften zonder extra hulpmiddelen of software.

Voorbeeld van het probleem

Stel je voor dat je een website hebt waarop de tekst niet kan worden vergroot zonder dat dit problemen veroorzaakt met de layout. Wanneer een gebruiker de tekst vergroot tot 200%, kan de tekst buiten het scherm vallen of wordt de lay-out verstoord, waardoor de website moeilijk of zelfs onmogelijk te gebruiken is. Dit zou een probleem zijn voor gebruikers die afhankelijk zijn van vergroting van de tekst om de inhoud te lezen.

Oplossing voor dit probleem

De oplossing is om websites te ontwerpen die flexibel en responsief zijn. Dit betekent dat de layout van de website zich automatisch aanpast aan de grootte van de tekst. Het gebruik van relatieve eenheden zoals em of rem in plaats van absolute eenheden zoals px voor tekstgrootte is essentieel om dit te bereiken.

Het is ook belangrijk om ervoor te zorgen dat de layout van de pagina zich aanpast wanneer de tekst vergroot, zodat de inhoud niet uit het scherm valt en gebruikers geen horizontaal scrollen nodig hebben.

Voorbeeld van implementatie

Hier is een voorbeeld van hoe je de tekstgrootte kunt instellen met behulp van rem eenheden (in plaats van px), zodat de tekst kan worden vergroot:

/* Slecht voorbeeld */
body {
  font-size: 16px; /* Vastgestelde grootte, niet flexibel */
}

/* Goed voorbeeld */
body {
  font-size: 1rem; /* Relatieve eenheid die zich aanpast aan de basistekstgrootte */
}

In het tweede voorbeeld zorgt het gebruik van rem ervoor dat de tekst kan worden vergroot in verhouding tot de basistekstgrootte die de gebruiker heeft ingesteld, zonder dat de lay-out van de pagina wordt verbroken.

Belangrijke overwegingen

• Responsief ontwerp: Zorg ervoor dat je ontwerp responsief is, zodat de pagina zich aanpast wanneer de tekst wordt vergroot.
• Gebruik van flexibele containers: Wanneer je de tekst vergroot, moeten de containers (zoals secties, kolommen of divs) voldoende ruimte bieden om de vergrote tekst weer te geven zonder te overlappen of uit het scherm te vallen.
• Testen met vergroting: Test de website door de tekst te vergroten tot 200% om er zeker van te zijn dat de gebruikerservaring intact blijft.

Alternatieve benaderingen

• Zoomfunctionaliteit: Naast het vergroten van tekst, kunnen gebruikers ook de browserzoomfunctie gebruiken om de hele pagina in te zoomen. Dit moet de inhoud en de lay-out van de pagina echter niet verstoren.
• Aanpassingen voor mobiele apparaten: Zorg ervoor dat je ontwerp zich aanpast aan verschillende schermgroottes en dat gebruikers de tekst kunnen vergroten zonder dat de lay-out wordt verstoord op zowel desktop- als mobiele apparaten.

Belangrijkste punten

• Zorg ervoor dat tekst vergroot kan worden tot 200% zonder verlies van inhoud of functionaliteit.
• Gebruik relatieve eenheden (zoals rem of em) in plaats van absolute eenheden (zoals px) voor tekstgroottes.
• Zorg ervoor dat de layout van de website zich aanpast wanneer de tekst wordt vergroot, zonder dat er horizontaal scrollen nodig is.

Tools en Hulpmiddelen

• WAVE Web Accessibility Evaluation Tool: Deze tool helpt bij het testen van de toegankelijkheid van je website, inclusief het controleren van tekstgrootte en responsiviteit. WAVE.
• Axe Accessibility Checker: Een andere handige tool om je website te testen op toegankelijkheidsproblemen, waaronder de mogelijkheid om tekst te vergroten zonder problemen. Axe.

Betekenis voor toegankelijkheid

Dit criterium maakt websites toegankelijker voor mensen met een verminderde gezichtsvermogen. Door gebruikers de mogelijkheid te bieden om tekst te vergroten zonder verlies van functionaliteit, wordt de inhoud beter leesbaar en gemakkelijker te begrijpen. Het dragen bij aan de bruikbaarheid van websites voor een bredere groep gebruikers, waaronder mensen die mogelijk afhankelijk zijn van vergrotingssoftware of andere hulpmiddelen.

Referenties

• WCAG 2.2 Richtlijn 1.4.4 Resize Text: De officiële documentatie van W3C voor dit criterium is te vinden op W3C WCAG 2.2 - Resize Text.