WCAG 1.4.4: Tekst vergroten

Wat Deze Regel Betekent

WCAG 1.4.4 Resize Text (Niveau AA) stelt dat tekst tot 200 procent vergrootbaar moet zijn zonder gebruik van ondersteunende technologie en zonder verlies van inhoud of functionaliteit. Simpel gezegd: wanneer een gebruiker de browser tot 200% inzoomt of de basislettergrootte vergroot via browser- of besturingssysteeminstellingen, moet alle tekst op de pagina leesbaar blijven en moet alle functionaliteit intact blijven.

Het criterium is breed van toepassing op alle tekst die op een webpagina wordt weergegeven, waaronder lopende tekst, koppen, labels, knoptekst, placeholdertekst in formuliervelden, navigatielinks, tabelinhoud en bijschriften. Het is niet van toepassing op tekst die deel uitmaakt van een logo of merknaam, noch op decoratieve tekst die geen informatie overbrengt en uitsluitend als afbeeldingsinhoud wordt gepresenteerd (zoals een gescande foto van een handgeschreven notitie waarbij de tekst zelf niet de toegankelijke inhoud is).

Een voldoende resultaat vereist dat bij 200% zoom — bereikt via de ingebouwde paginazoom van de browser (Ctrl/Cmd + plustoets of het menu Beeld > Zoom) of via de minimale lettergrootte-instelling van de browser — aan de volgende voorwaarden wordt voldaan: geen tekst wordt afgeknipt of verborgen door zijn container, geen tekst overlapt andere tekst of interactieve elementen, er verschijnt geen horizontale schuifbalk bij volledige viewportbreedte (behalve voor inhoud die daadwerkelijk tweedimensionaal scrollen vereist, zoals kaarten of datatabellen), en alle interactieve bedieningselementen blijven bedienbaar.

Er wordt een fout genoteerd wanneer vaste pixelwaarden tekst vastzetten in een grootte die niet kan groeien, wanneer containers vaste hoogtes gebruiken die overlappende tekst afknippen, wanneer viewport-metatags user-scalable=no of maximum-scale=1.0 gebruiken om knijp-zoom op mobiel te blokkeren, of wanneer JavaScript zoomgebaren onderschept om schalen te voorkomen. Het criterium is expliciet technologie-agnostisch: of de implementatie nu CSS, SVG-tekst of canvas-gerenderde tekst gebruikt, het resultaat voor de gebruiker is wat telt. Merk op dat SVG-tekst en canvas-gerenderde tekst van nature moeilijk te vergroten zijn en vaak extra technische aandacht vereisen.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd hebben een vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Onder hen ervaart een zeer groot deel slechtziendheid — een aandoening waarbij het zicht niet volledig kan worden gecorrigeerd met een bril of contactlenzen, maar waarbij de persoon niet volledig blind is. Slechtziende gebruikers stellen hun browserzoom routinematig in op 150%, 200% of hoger, of configureren hun besturingssysteem om tekst in een grotere basisgrootte weer te geven. Wanneer websites dit gedrag blokkeren of laten mislukken, worden deze gebruikers volledig uitgesloten van de inhoud.

Naast gediagnosticeerde slechtziendheid beïnvloeden situationele factoren vrijwel elke internetgebruiker op enig moment: kleine schermen, fel zonlicht, vermoeidheid, ouder wordend gezichtsvermogen of lezen in een onbekende taal kunnen allemaal kleinere tekst moeilijker te verwerken maken. Vooral oudere volwassenen — een snel groeiende demografische groep wereldwijd en in Turkije — vertrouwen vaak op zoom als eerste toegankelijkheidsvoorziening voordat zij gespecialiseerde ondersteunende technologie zoeken.

Beschouw een concreet scenario: een patiënt van in de zestig probeert op zijn smartphone de online afspraakbevestiging van een ziekenhuisportaal te lezen. De mobiele stylesheet van het ziekenhuis stelt de body-lettergrootte in op 12px met een vaste pixelwaarde en de viewport-metatag bevat maximum-scale=1.0. De patiënt probeert te knijp-zoomen, maar de interface blokkeert. Hij kan de datum of de naam van de afdeling niet duidelijk genoeg lezen om zeker te zijn. Hij belt de helpdesk van het ziekenhuis, wat tijd van het personeel kost en angst bij de patiënt veroorzaakt — een volledig te voorkomen uitkomst als aan het criterium was voldaan.

Vanuit een puur commercieel perspectief hangt toegankelijke tekstgrootte samen met bredere bruikbaarheidsverbeteringen die alle gebruikers ten goede komen. Zoekmachines belonen ook sites die leesbare tekst weergeven bij normale en vergrote groottes, omdat Googlebot leesbaarheidssignalen beoordeelt als onderdeel van Core Web Vitals en factoren voor pagina-ervaring en ranking. Het oplossen van problemen met vergroten verbetert dus tegelijkertijd SEO, vermindert de ondersteuningslast en vergroot het potentiële publiek.

Gerelateerde Axe-core Regels

WCAG 1.4.4 is primair een criterium voor handmatige tests. Geautomatiseerde tools kunnen een beperkte set voorwaarden signaleren waarvan bekend is dat ze het vergroten van tekst verhinderen, maar ze kunnen niet betrouwbaar alle layoutresultaten bij 200% zoom simuleren en evalueren. De volgende voorwaarden zijn wat geautomatiseerde tools proberen te detecteren en wat handmatige opvolging vereist:

• viewport-metatag blokkeert zoom (handmatige controle vereist): Axe-core bevat de meta-viewport-regel, die elke <meta name='viewport'>-tag markeert die user-scalable=no instelt of maximum-scale op een waarde van 1,0 of minder. Dit is het ene scenario waarin volledig geautomatiseerde detectie mogelijk is, omdat de overtreding declaratief is en niet afhangt van het layoutresultaat. Zelfs deze regel kan echter niet bepalen of een site JavaScript gebruikt om zoom programmatisch te voorkomen, dus handmatige verificatie is altijd nodig.
• Vaste lettergroottes in pixels (handmatige controle vereist): Geautomatiseerde tools kunnen rapporteren wanneer CSS-waarden voor font-size zijn ingesteld in absolute pixel-eenheden (px) in plaats van relatieve eenheden (em, rem, % of viewport-relatieve eenheden). Moderne browsers overschrijven echter absolute pixel-lettergroottes wanneer de gebruiker de standaardlettergrootte van de browser wijzigt, dus een pixelwaarde op zich vormt geen gegarandeerde fout — het hangt af van het browsergedrag en of de site font-size-overerving respecteert. Handmatige inspectie van berekende stijlen en visuele verificatie zijn vereist om een daadwerkelijke fout te bevestigen.
• Inhoudsoverloop en afknippen bij 200% zoom (alleen handmatig): Geen enkele geautomatiseerde tool kan een pagina betrouwbaar bij 200% weergeven en beoordelen of alle tekst zichtbaar blijft en alle interactieve elementen bedienbaar blijven. Dit vereist dat een menselijke tester het zoomniveau van de browser instelt, door de pagina scrolt en elk inhoudsgebied verifieert. Geautomatiseerde tools hebben geen toegang tot de gerenderde toestand na het zoomen.
• Tekst in afbeeldingen en canvas (alleen handmatig): Tekst die is ingebakken in rasterafbeeldingen (<img>-tags met screenshots van tekst) of wordt weergegeven op een <canvas>-element kan door de browser helemaal niet worden vergroot. Geautomatiseerde tools kunnen de aanwezigheid van canvas-elementen markeren voor handmatige beoordeling, maar ze kunnen niet bepalen of die canvas-elementen betekenisvolle tekst bevatten die de gebruiker moet kunnen lezen.

Hoe te Testen

1. Voer eerst een geautomatiseerde scan uit. Open de pagina in Chrome of Firefox en voer axe DevTools (browserextensie) of Lighthouse (Chrome DevTools, tab Lighthouse) uit. Let specifiek op de overtreding van de meta-viewport-regel. Indien gemarkeerd, noteer dit als een kritieke fout. Controleer ook de CSS-audit op font-size-declaraties in px-eenheden die voorkomen in de axe best-practices-waarschuwingen.
2. Controleer de viewport-metatag in de bron. Open DevTools (F12), ga naar het tabblad Elements en zoek naar meta name='viewport'. Lees het content-attribuut zorgvuldig. Als het user-scalable=no, user-scalable=0 of maximum-scale=1 (of een waarde kleiner dan 2) bevat, is dit een directe overtreding van 1.4.4.
3. Stel de browserzoom in op 200%. Druk in Chrome of Firefox herhaaldelijk op Ctrl + Plus (Windows/Linux) of Cmd + Plus (macOS) totdat de zoomindicator van de browser 200% aangeeft. Ga alternatief naar Beeld > Inzoomen. Gebruik in macOS Safari Beeld > Inzoomen. Gebruik voor deze test geen weergaveschaling op besturingssysteemniveau — gebruik specifiek de browserzoom.
4. Scroll door elke sectie van de pagina bij 200% zoom. Scroll systematisch van boven naar beneden. Let op: tekst die wordt afgesneden of verborgen door de container, tekst die buiten zijn kader treedt en aangrenzende inhoud overlapt, formulierlabels die achter hun invoervelden verdwijnen, knoppen waarvan de tekst wordt afgekapt, dropdownmenu’s die buiten het scherm vallen en niet in beeld kunnen worden gescrold, en modale dialogen die groter zijn dan de viewport en niet kunnen worden gescrold.
5. Test alle interactieve functionaliteit bij 200% zoom. Activeer elk navigatiemenu, open elke modal, verstuur formulieren, activeer tooltips en popovers en gebruik eventuele carrousels of accordeons. Controleer dat al deze elementen volledig bedienbaar blijven — niet alleen visueel aanwezig.
6. Test met NVDA + Firefox (Windows). Schakel NVDA in en open Firefox op 200% zoom. Navigeer met de Tab-toets en pijltoetsen. Bevestig dat focusbare elementen focus krijgen, dat focusindicatoren zichtbaar zijn (overlap met WCAG 2.4.7, maar nuttig om te controleren) en dat de leesvolgorde overeenkomt met de visuele volgorde bij de vergrote grootte.
7. Test met VoiceOver + Safari (macOS/iOS). Schakel VoiceOver in. Ga op iOS naar Instellingen > Toegankelijkheid > Weergave en tekstgrootte en schakel Grotere tekst in. Navigeer door dezelfde pagina en verifieer de integriteit van de inhoud. Gebruik ook het knijp-zoomgebaar om te bevestigen dat dit niet wordt geblokkeerd.
8. Test de minimale lettergrootte-instelling van de browser. Ga in Firefox naar Instellingen > Algemeen > Lettertypen en kleuren en stel de minimale lettergrootte in op 24px. Herlaad de pagina en controleer dat alle tekst aan deze minimumwaarde voldoet en dat de layout niet breekt. Dit test een andere invalshoek van hetzelfde criterium.
9. Test met JAWS + Chrome (Windows). Open de pagina in Chrome op 200% zoom met JAWS actief. Gebruik JAWS-leescommando’s (Insert + Pijl omlaag om vanaf de cursor te lezen) om te bevestigen dat alle tekstinhoud wordt voorgelezen en dat er geen inhoud wordt overgeslagen doordat deze verborgen is door overflow-clipping.

Hoe te Oplossen

Viewport-metatag blokkeert zoom — Onjuist

<!-- WRONG: user-scalable=no prevents pinch-to-zoom on mobile,
     directly violating WCAG 1.4.4 -->
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>

Viewport-metatag blokkeert zoom — Juist

<!-- CORRECT: Remove user-scalable=no and do not cap maximum-scale below 2.
     Allowing zoom to at least 2 (200%) satisfies WCAG 1.4.4. -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Vaste lettergroottes in pixels — Onjuist

<!-- WRONG: font-size in px ignores the user's browser font-size preference.
     If the user sets a larger default, px values override that preference. -->
<style>
  body {
    font-size: 14px;
  }
  h1 {
    font-size: 24px;
  }
  .caption {
    font-size: 11px;
  }
</style>
<p>Your appointment is confirmed.</p>

Vaste lettergroottes in pixels — Juist

<!-- CORRECT: Use rem units relative to the root font size (typically 16px browser default).
     1rem = 16px by default, but scales with user preference.
     Setting font-size on :root in % rather than px also respects user settings. -->
<style>
  :root {
    font-size: 100%; /* inherits browser default, typically 16px */
  }
  body {
    font-size: 0.875rem; /* ~14px at default, but scales with user preference */
  }
  h1 {
    font-size: 1.5rem; /* ~24px at default */
  }
  .caption {
    font-size: 0.75rem; /* ~12px at default — still scalable */
  }
</style>
<p>Your appointment is confirmed.</p>

Containers met vaste hoogte die tekst afknippen — Onjuist

<!-- WRONG: A fixed height with overflow:hidden will clip enlarged text.
     At 200% zoom, the text grows but the box does not, hiding content. -->
<style>
  .card {
    height: 120px;
    overflow: hidden;
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Containers met vaste hoogte die tekst afknippen — Juist

<!-- CORRECT: Use min-height instead of height so the container grows
     with the content when text is enlarged. -->
<style>
  .card {
    min-height: 7.5rem; /* sets a minimum but allows growth */
    overflow: visible; /* or remove overflow:hidden entirely */
  }
</style>
<div class='card'>
  <h2>Flight Confirmation</h2>
  <p>Your flight TK0001 to Istanbul departs at 09:30 on 15 July 2025. Gate B12.</p>
</div>

Tekst ingebakken in afbeeldingen — Onjuist

<!-- WRONG: A banner image containing text cannot be resized by the browser.
     Even with alt text, the visual text is inaccessible at high zoom levels. -->
<img src='promo-banner-with-text.jpg' alt='50% indirim — sadece bu hafta sonu'>

Tekst ingebakken in afbeeldingen — Juist

<!-- CORRECT: Use real HTML text over a background image so the browser
     can resize it. The image is decorative background; text is live HTML. -->
<div class='promo-banner' role='region' aria-label='Promosyon'>
  <p class='promo-text'>50% İndirim &mdash; Sadece Bu Hafta Sonu</p>
</div>
<!-- CSS sets the background image on .promo-banner, while .promo-text
     uses rem font-size and contrasts safely against the background. -->

Veelvoorkomende Fouten

• user-scalable=no toevoegen aan de viewport-metatag om te voorkomen dat de layout op mobiel “breekt” — dit is een directe, testbare overtreding van 1.4.4 en mag nooit worden gebruikt. Los de layout op in plaats van het zoomgedrag van de gebruiker te onderdrukken.
• maximum-scale=1.0 of een waarde onder 2.0 instellen — zelfs zonder user-scalable=no voorkomt het begrenzen van zoom op 1,0 of 1,5 dat gebruikers 200% bereiken en wordt niet aan het criterium voldaan.
• JavaScript-eventlisteners gebruiken om event.preventDefault() aan te roepen op knijp-zoom- of wieltjesgebeurtenissen — het programmatisch blokkeren van native zoom is functioneel gelijk aan de aanpak met de viewport-metatag en schendt hetzelfde criterium.
• font-size in pixels instellen op het <html>- of <body>-element en vervolgens em-eenheden voor de rest gebruiken — als de root-lettergrootte in px is vastgezet, zijn alle em/rem-afstammelingen in feite ook vastgezet en reageren ze niet op de voorkeur voor lettergrootte van de browser van de gebruiker.
• height gebruiken in plaats van min-height op kaartcomponenten, zijbalken of modale bodies — bij 200% zoom loopt vergrote tekst uit vaste hoogtevakken en wordt deze afgeknipt door overflow: hidden, waardoor kritieke inhoud wordt verborgen.
• Belangrijke tekst uitsluitend in <canvas>-elementen plaatsen — canvas-gerenderde tekst is een gerasterd bitmap en kan niet worden geschaald door de mechanismen voor tekstvergroting of zoom van de browser. Elke betekenisvolle tekst die een gebruiker moet kunnen lezen, moet beschikbaar zijn als echte HTML-tekst of op zijn minst als toegankelijke alternatieve tekst.
• SVG-<text>-elementen gebruiken met absolute coördinaten en zonder viewBox-scaling — SVG-tekst kan schaalbaar zijn wanneer de SVG een viewBox gebruikt en met relatieve eenheden wordt geschaald, maar SVG-tekst met vaste x-, y-, font-size-attributen in pixels binnen een SVG met een vaste width en height wordt niet in alle browsers met browserzoom vergroot.
• Aannemen dat browserzoom het criterium automatisch afdekt en handmatige tests overslaan — browserzoom schaalt de volledige pagina, inclusief afbeeldingen en layout, maar tekst die bij 100% al te klein, afgeknipt of overlappend was, wordt bij 200% een groter probleem. Handmatige verificatie bij zoomniveau is altijd vereist.
• Vergeten om ingesloten widgets van derden te testen — chatwidgets, betaal-iframes, cookietoestemmingsbanners en analytics-overlays worden vaak door derden ontwikkeld met vaste px-groottes en kunnen zoom blokkeren. Ook al is de code van derden, het criterium is van toepassing op de volledige pagina zoals die aan de gebruiker wordt geleverd.
• De desktoplayout voor zoom oplossen maar het mobiele breakpoint verwaarlozen — veel teams testen zoom op desktop en verklaren succes, maar mobiele viewports bij 200% zoom leveren een aparte set layoutuitdagingen op, vooral voor navigatiemenu’s, sticky headers en onderste navigatiebalken die afhankelijk zijn van vaste pixelhoogtes.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt verplichte toegankelijkheidseisen voor web en mobiel vast voor een gedefinieerde set organisaties die in Turkije actief zijn. De circulaire verwijst naar internationaal erkende toegankelijkheidsstandaarden — waarmee de Turkse vereisten in feite worden afgestemd op WCAG 2.1 en WCAG 2.2 Niveau AA als maatstaf voor conformiteit.

WCAG 1.4.4 Resize Text is een criterium op Niveau AA, en conformiteit op Niveau AA is de drempel die vereist is om het Toegankelijkheidslogo (Erişilebilirlik Logosu) te verkrijgen dat wordt uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı). Het Toegankelijkheidslogo is zowel een publiek vertrouwenssignaal als een regulatoir controlemoment — organisaties die onder de circulaire vallen en het logo willen tonen of conformiteit aan auditors willen aantonen, moeten aan alle criteria op Niveau AA voldoen, inclusief 1.4.4.

De categorieën entiteiten die onder Presidentiële Circulaire 2025/10 vallen, omvatten: overheidsinstellingen en -agentschappen op alle bestuursniveaus; e-commerceplatforms en online marktplaatsen; banken en aanbieders van financiële diensten die worden gereguleerd door de Banking Regulation and Supervision Agency (BDDK); ziekenhuizen, gezondheidscentra en andere zorgorganisaties met digitale patiëntgerichte diensten; telecomoperators met 200.000 of meer abonnees; reisbureaus en online reisplatforms; particuliere vervoersbedrijven die digitale ticket- of reserveringsdiensten aanbieden; en particuliere scholen en onderwijsinstellingen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (Millî Eğitim Bakanlığı, MoNE).

Voor elk van deze typen entiteiten is de praktische implicatie van 1.4.4 aanzienlijk. Een online bankportaal van een bank dat knijp-zoom op mobiel blokkeert, is niet alleen een bruikbaarheidsfout — het is een niet-naleving van regelgeving die kan resulteren in auditbevindingen of uitsluiting van het Toegankelijkheidslogoprogramma. Een systeem voor het boeken van ziekenhuisafspraken dat vaste pixel-lettergroottes gebruikt in containers die afknippen, bedient patiënten met slechtziendheid niet en voldoet tegelijkertijd niet aan de verplichtingen onder de circulaire. Een inschrijfplatform van een particuliere school dat tekst in afbeeldingen inbedt in plaats van schaalbare HTML-tekst te gebruiken, is op vergelijkbare wijze niet conform.

Organisaties moeten WCAG 1.4.4 niet zien als een smalle technische afvinklijst, maar als een basisverwachting van respect voor gebruikers met visuele beperkingen — een verwachting waar de Turkse wet, internationale best practices en basisbruikbaarheid allemaal op samenkomen. De overlay-SDK van Accsible ondersteunt naleving van tekstvergroting door configureerbare lettertypeschaalbediening te bieden waarmee eindgebruikers de tekstgrootte onafhankelijk van de browserzoom kunnen vergroten, en zo een extra voorzieningslaag bieden bovenop de basisvereisten die sites zelf moeten implementeren.