WCAG 1.4.10: Reflow

Wat Deze Regel Betekent

WCAG 1.4.10 Reflow is een succescriterium op niveau AA dat is geïntroduceerd in WCAG 2.1 en is overgenomen in WCAG 2.2. Het specificeert dat webcontent moet kunnen reflowen — dat wil zeggen, zichzelf herorganiseren en van grootte veranderen — zodat deze volledig bruikbaar blijft bij een viewportbreedte die overeenkomt met 320 CSS-pixels, zonder dat de gebruiker horizontaal hoeft te scrollen om de content te lezen of ermee te interageren. Het referentiepunt van 320 CSS-pixels komt overeen met wat een gebruiker ziet wanneer hij of zij het browserzoomniveau instelt op 400% op een standaard scherm van 1280px breed.

De kernvereiste is dat er geen verlies van informatie of functionaliteit optreedt bij deze beperkte breedte. Alle tekst moet leesbaar blijven, alle interactieve bedieningselementen moeten bedienbaar blijven en alle betekenisvolle content moet zichtbaar blijven zonder tweedimensionaal scrollen te veroorzaken. Verticaal scrollen is toegestaan — het criterium verbiedt alleen horizontaal scrollen voor verticaal stromende content (en verticaal scrollen voor horizontaal stromende content, hoewel dit zeldzaam is). Een lay-out die gebruikers dwingt om tegelijkertijd omhoog/omlaag en naar links/rechts te scrollen om een alinea tekst te lezen, zou niet aan dit criterium voldoen.

Het W3C definieert expliciete uitzonderingen waarbij tweedimensionaal scrollen acceptabel is. Deze omvatten content waarbij een tweedimensionale lay-out essentieel is voor het gebruik en de betekenis: grote gegevenstabellen met veel kolommen, complexe kaarten en geografische diagrammen, videospelers en hun afspeelbediening, werkbalken met meerdere actieknoppen naast elkaar, en games of interactieve diagrammen die een precieze ruimtelijke relatie tussen elementen vereisen. Deze uitzonderingen moeten nauw worden geïnterpreteerd — de uitzondering geldt voor de content zelf (bijvoorbeeld de cellen van een gegevenstabel), niet voor omliggende navigatie, koppen of verklarende tekst die deze begeleidt.

Een pagina voldoet aan dit criterium als: wanneer de browser is ingezoomd tot 400% (of de viewport is ingesteld op 320px breed), de content reflowt naar één kolom, navigatie op de juiste manier inklapt of stapelt, afbeeldingen proportioneel van grootte veranderen en de gebruiker alles kan doen wat hij of zij op het standaardzoomniveau kon doen met alleen verticaal scrollen. Een pagina voldoet niet als horizontaal scrollen nodig is om zinnen te lezen, knoppen te bereiken of toegang te krijgen tot niet-vrijgestelde content.

Waarom Het Belangrijk Is

Ongeveer 2,2 miljard mensen wereldwijd leven met een vorm van visuele beperking, volgens de Wereldgezondheidsorganisatie. Een aanzienlijk deel van deze mensen is afhankelijk van browserzoom, vergroting op besturingssysteemniveau of speciale schermvergrotingssoftware (zoals ZoomText of Windows Vergrootglas) om tekst en interface-elementen groot genoeg te maken om comfortabel waar te nemen. Wanneer een lay-out breekt bij hoge zoomniveaus — waardoor content buiten beeld valt of horizontaal scrollen vereist is — worden deze gebruikers geconfronteerd met een gefragmenteerde leeservaring waarbij elke zin een heen-en-weer pannen vereist. Dit is niet alleen onhandig; het kan complexe content feitelijk ontoegankelijk maken.

Denk aan een 65-jarige gebruiker met leeftijdsgebonden maculadegeneratie die een Turks ziekenhuisportaal voor het boeken van afspraken bezoekt met de browser ingesteld op 300% zoom. Als het boekingsformulier wordt weergegeven met kolommen met vaste breedte, kan de knop "Verzenden" volledig buiten de rechterrand van het zichtbare gebied worden geduwd. De gebruiker heeft geen manier om te weten dat de knop bestaat, laat staan ermee te interageren. Hij of zij kan de afspraak niet zelfstandig boeken. Dit is een directe, concrete schade die wordt veroorzaakt door het niet voldoen aan Reflow.

Naast gebruikers met een beperkt gezichtsvermogen, komt Reflow een brede groep mensen ten goede. Gebruikers met motorische beperkingen die schakelbediening of hoofdvolgapparaten gebruiken, vinden horizontaal scrollen extreem moeilijk of onmogelijk om betrouwbaar uit te voeren. Cognitieve beperkingen treffen een aanzienlijk deel van de bevolking, en onderzoek toont consequent aan dat smalle lay-outs met één kolom — typisch voor goed geïmplementeerde Reflow — de cognitieve belasting verminderen en het tekstbegrip verbeteren. Mensen die apparaten met een klein scherm gebruiken of in gesplitste schermmodus lezen, profiteren ook direct, zelfs zonder enige beperking.

Vanuit technisch en zakelijk perspectief overlapt een correcte implementatie van Reflow vrijwel volledig met het bouwen van een goed gestructureerde responsive design. Dit betekent dat conformiteit met 1.4.10 de bruikbaarheid op mobiel vanzelf verbetert, het bouncepercentage verlaagt en positief bijdraagt aan Core Web Vitals-metrics die de zoekmachinerangschikking beïnvloeden. Voor Turkse e-commerceplatforms in het bijzonder, waar mobiel verkeer domineert, zijn Reflow-naleving en commerciële mobiele optimalisatie in wezen hetzelfde doel.

Gerelateerde Axe-core Regels

WCAG 1.4.10 Reflow vereist handmatige tests in plaats van geautomatiseerde scans. Geen enkele axe-core-regel kan de detectie van Reflow-fouten volledig automatiseren, omdat het criterium afhangt van het visuele en functionele gedrag van een volledige gerenderde lay-out bij een specifieke viewportgrootte — iets dat een echte browseromgeving vereist, menselijk oordeel over scrollbaarheid en verificatie dat er geen informatie verloren is gegaan. Geautomatiseerde tools kunnen niet betrouwbaar onderscheid maken tussen opzettelijk tweedimensionaal scrollen (voor een vrijgestelde kaart of tabel) en een onbedoelde lay-out-overflow veroorzaakt door een container met vaste breedte.

• Handmatige test — viewportbreedte 320px: Verklein de browserviewport tot exact 320 CSS-pixels breed (of zoom tot 400% op een scherm van 1280px breed) en scroll verticaal door elke paginatemplate, schermstatus en interactief component. Controleer dat er geen content wordt afgekapt, er geen horizontale scrollbar verschijnt voor niet-vrijgestelde content en alle functionaliteit bereikbaar blijft. Axe DevTools markeert dit als een item "Needs Review" in plaats van een automatische overtreding, omdat toolgebaseerde lay-outanalyse niet kan bepalen of overflow een echte fout vertegenwoordigt of onder een uitzondering valt.
• Gedeeltelijk geautomatiseerd signaal — controle van viewport meta tag: Axe-core kan detecteren of de pagina een meta name='viewport'-tag gebruikt met user-scalable=no of maximum-scale=1, die beide voorkomen dat gebruikers überhaupt kunnen zoomen en het daardoor onmogelijk maken om de 400%-zoomstatus te bereiken waarop Reflow is gericht. Hoewel dit technisch gezien een afzonderlijk probleem is (WCAG 1.4.4), is het nauw verwant en garandeert de aanwezigheid ervan een Reflow-fout. Axe markeert dit onder de meta-viewport-regel. Elke pagina die zoomen blokkeert, blokkeert per definitie ook Reflow-naleving.
• Handmatige componentaudit: Naast de lay-out van de volledige pagina moeten individuele componenten zoals carrousels, sticky headers, modale dialogen, zwevende chatwidgets, cookiebanners en gegevenstabellen elk afzonderlijk worden gecontroleerd op 320px. Een paginakop kan correct reflowen terwijl een promotionele modal wordt weergegeven met een vaste breedte van 600px en een onbereikbare sluitknop — een fout die alleen wordt opgemerkt bij een handmatige review per component.

Hoe te Testen

1. Geautomatiseerde pre-scan: Voer axe DevTools of Lighthouse in Chrome DevTools uit op elke pagina. Let specifiek op de meta-viewport-overtreding, die aangeeft dat zoomen is geblokkeerd en een Reflow-fout garandeert. Noteer ook eventuele overflow-gerelateerde waarschuwingen die zijn gemarkeerd onder "Needs Review". Leg de resultaten vast, maar begrijp dat een schone geautomatiseerde scan Reflow-conformiteit niet bevestigt — handmatige stappen zijn verplicht.
2. Stel de viewport in op 320px: Open in Chrome of Firefox DevTools de apparaatwerkbalk (Ctrl+Shift+M / Cmd+Shift+M), voer een aangepaste apparaatgrootte van 320×568 pixels in (of elke hoogte) en stel de device pixel ratio in op 1. Open alternatief een browservenster van 1280px breed en zoom tot 400% met Ctrl+= (Cmd+= op Mac). Beide methoden simuleren de 320 CSS-pixelconditie die door WCAG is gespecificeerd.
3. Scroll verticaal door de volledige pagina: Scroll vanaf de bovenkant van de pagina alleen naar beneden met de verticale scrollbar of het muiswiel. Er mag op geen enkel moment een horizontale scrollbar verschijnen voor niet-vrijgestelde content. Als dat wel gebeurt, voldoet de pagina niet. Bevestig dat alle tekst volledig leesbaar is — er worden geen zinnen afgekapt, geen tekens worden door de rand van de viewport afgesneden.
4. Test alle interactieve functionaliteit: Probeer bij een breedte van 320px elke belangrijke gebruikersactie uit te voeren: formulieren invullen en verzenden, navigatiemenu’s openen, modals en dialogen activeren, accordeons en tabbladen gebruiken, met carrousels interageren en dynamische content activeren. Elk bedieningselement moet bereikbaar en bedienbaar zijn met alleen verticaal scrollen en normale interactie.
5. Controleer alle paginatemplates en -statussen: Test de homepage, interne contentpagina’s, formulieren, checkoutflows, foutstatussen en alle geauthenticeerde weergaven. Een responsive navigatie die correct inklapt op de homepage kan nog steeds breken op een diep geneste productpagina met een andere template.
6. Combinatie met schermlezer (aanvullend): Gebruik NVDA met Firefox of VoiceOver met Safari bij 320px breedte om te bevestigen dat de volgorde en betekenis van de content behouden blijven na reflow. Soms verandert CSS-gebaseerde reflow de visuele volgorde zonder de DOM-volgorde te wijzigen, waardoor schermlezeruitvoer verwarrend wordt. Dit is niet strikt een Reflow-test, maar het detecteert reflow-implementaties die andere toegankelijkheidsproblemen veroorzaken.
7. Documenteer uitzonderingen: Controleer en documenteer voor alle content die horizontaal scrollen vereist (gegevenstabellen, kaarten, codeblokken) dat deze daadwerkelijk onder een door WCAG gedefinieerde uitzondering valt. Bevestig dat de omliggende paginacontent (koppen, instructies, navigatie) nog steeds correct reflowt, zelfs als het ingesloten component dat niet doet.

Hoe te Herstellen

Container met vaste breedte die de lay-out breekt — Onjuist

<!-- Fixed pixel width forces horizontal scrolling at small viewports -->
<div style='width: 960px; margin: 0 auto;'>
  <p>This content will overflow a 320px viewport and require horizontal scrolling.</p>
  <button>Submit Application</button>
</div>

Container met vaste breedte die de lay-out breekt — Juist

<!-- Use max-width with 100% so container never exceeds its parent but shrinks on small screens -->
<div class='content-wrapper'>
  <p>This content reflows naturally at any viewport width.</p>
  <button>Submit Application</button>
</div>

<!-- In your CSS (external stylesheet) -->
<!-- .content-wrapper { max-width: 960px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 1rem; } -->

Viewport meta tag die zoomen blokkeert — Onjuist

<!-- This prevents users from zooming at all, making Reflow impossible to achieve -->
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>

Viewport meta tag die zoomen blokkeert — Juist

<!-- Allow zooming by removing maximum-scale and user-scalable restrictions -->
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Users can now zoom to 400% and content will reflow as required by WCAG 1.4.10 -->

Horizontale navigatiebalk die overloopt — Onjuist

<!-- Navigation items forced into a single row with no wrapping or collapse mechanism -->
<nav aria-label='Primary navigation'>
  <ul style='display: flex; flex-wrap: nowrap; white-space: nowrap;'>
    <li><a href='/home'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About Us</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/blog'>Blog</a></li>
    <li><a href='/support'>Support</a></li>
  </ul>
</nav>

Horizontale navigatiebalk die overloopt — Juist

<!-- Hamburger/disclosure pattern for small viewports; full navigation accessible at all sizes -->
<nav aria-label='Primary navigation'>
  <button aria-expanded='false' aria-controls='nav-menu' id='nav-toggle'>
    Menu
  </button>
  <ul id='nav-menu'>
    <li><a href='/home'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About Us</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/blog'>Blog</a></li>
    <li><a href='/support'>Support</a></li>
  </ul>
</nav>
<!-- CSS media query hides #nav-menu by default below a breakpoint and shows it on toggle -->
<!-- The button is hidden above the breakpoint where the full nav is always visible -->

Gegevenstabel zonder reflow-voorziening — Onjuist

<!-- Wide table with no scroll container; overflows the viewport with no warning to users -->
<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope='col'>Region</th>
      <th scope='col'>Q1</th>
      <th scope='col'>Q2</th>
      <th scope='col'>Q3</th>
      <th scope='col'>Q4</th>
      <th scope='col'>Total</th>
    </tr>
  </thead>
</table>

Gegevenstabel zonder reflow-voorziening — Juist

<!-- Wrap the table in a scrollable container scoped to just the table element -->
<!-- This is an explicit WCAG 1.4.10 exception for complex data tables -->
<div role='region' aria-labelledby='table-caption' tabindex='0' class='table-scroll-container'>
  <table>
    <caption id='table-caption'>Quarterly Sales Data (scroll horizontally to view all columns)</caption>
    <thead>
      <tr>
        <th scope='col'>Region</th>
        <th scope='col'>Q1</th>
        <th scope='col'>Q2</th>
        <th scope='col'>Q3</th>
        <th scope='col'>Q4</th>
        <th scope='col'>Total</th>
      </tr>
    </thead>
  </table>
</div>
<!-- CSS: .table-scroll-container { overflow-x: auto; } -->
<!-- The caption warns users, role=region + aria-labelledby makes it keyboard-focusable -->

Veelvoorkomende Fouten

• overflow: hidden gebruiken op de <body> of een wrapper op hoog niveau om horizontale scrollbars te onderdrukken zonder de onderliggende overflow op te lossen: Dit verbergt de scrollbar, maar de content wordt nog steeds afgekapt en is niet toegankelijk, wat arguably erger is dan zichtbare overflow omdat de gebruiker geen indicatie heeft dat er content buiten de rand van de viewport bestaat.
• max-scale=1 of user-scalable=no instellen in de viewport meta tag om te voorkomen dat een mobiele lay-out er "gebroken" uitziet bij hoge zoom: Dit schakelt de mogelijkheid van de gebruiker om te zoomen volledig uit, wat zowel een Reflow-fout is als een schending van WCAG 1.4.4 Resize Text.
• white-space: nowrap toepassen op tekstcontainers, navigatielijsten of buttongroepen zonder een breakpoint-specifieke override: Dit dwingt tekst op één regel, ongeacht de beschikbare ruimte, en is een van de meest voorkomende oorzaken van horizontale overflow bij 320px.
• Absolute pixelwaarden gebruiken in CSS Grid-grid-template-columns-definities (bijv. grid-template-columns: 300px 600px) zonder een responsive fallback: Bij 320px zijn de twee kolommen samen 900px breed en zullen ze overlopen zonder reflow, tenzij een media query de definitie vervangt door 1fr of 100%.
• <iframe>-elementen insluiten met vaste width- en height-attributen die verwijzen naar content van derden (kaarten, video’s, formulieren): Iframes schalen niet automatisch, dus een ingesloten kaart van 600px breed zal overlopen in een viewport van 320px. Wikkel iframes in een container die de beeldverhouding behoudt en stel het iframe zelf in op width: 100%.
• Modale dialogen en off-canvas panelen ontwerpen met een vaste minimale breedte groter dan 320px: Een modal met min-width: 500px zal overlopen en waarschijnlijk de sluitknop buiten beeld verbergen, waardoor toetsenbordgebruikers bij kleine viewports in de dialoog worden opgesloten.
• Codeblokken en <pre>-elementen behandelen als vrijgesteld van Reflow zonder ze in een horizontaal scrollbare container te wikkelen: Ruwe codeblokken worden niet genoemd als WCAG-uitzondering. Hoewel de codecontent zelf complex kan zijn, moet de omliggende pagina reflowen; het codeblok moet onafhankelijk scrollen binnen een wrapper met overflow-x: auto, en mag niet de hele pagina horizontaal laten scrollen.
• Vergeten geauthenticeerde en dynamische statusssen te testen: Veel teams testen alleen de uitgelogde homepage. Dashboards, gebruikersprofielpagina’s, meerstapsformulieren en foutstatussen die via JavaScript worden geladen, zijn vaak gebouwd met aannames over vaste breedte en voldoen niet aan Reflow, zelfs wanneer marketingpagina’s dat wel doen.
• CSS-transform: scale() gebruiken om content visueel te verkleinen in plaats van echte responsive lay-out te implementeren: Schalen verkleint de schijnbare grootte maar laat content niet reflowen — tekst wordt klein en onleesbaar in plaats van te reflowen naar een leesbare enkele kolom, wat zowel Reflow als Resize Text-criteria schendt.
• Aannemen dat een mobiel-responsief design automatisch aan Reflow voldoet: Responsive design richt zich doorgaans op breakpoints van 360px, 768px en 1024px. Het WCAG-referentiepunt van 320px is smaller dan de meeste mobiele breakpoints, wat betekent dat content die er correct uitziet op een standaard kleine telefoon nog steeds kan overlopen bij 320px. Test altijd exact op 320px, niet op een generieke "mobiele" grootte.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad met nummer 32933 op 21 juni 2025, stelt bindende toegankelijkheidseisen vast voor een breed scala aan digitale dienstverleners die in Turkije actief zijn. De circulaire verplicht conformiteit met internationale webtoegankelijkheidsstandaarden — waarbij WCAG 2.1 niveau AA als basis dient — voor de betrokken organisaties. WCAG 2.2 niveau AA, dat alle criteria van 2.1 omvat, inclusief 1.4.10 Reflow, wordt sterk aangemoedigd en is de standaard die vereist is om het Erişilebilirlik Logosu (Toegankelijkheidslogo) te verkrijgen dat wordt uitgegeven door het Ministerie van Gezin en Sociale Diensten (Aile ve Sosyal Hizmetler Bakanlığı).

De typen organisaties die onder Presidential Circular 2025/10 vallen, omvatten overheidsinstellingen en -organen op alle niveaus, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecommunicatiebedrijven met 200.000 of meer abonnees, e-commerceplatforms, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (Millî Eğitim Bakanlığı). Voor elk van deze sectoren is de verwachting dat alle publiek toegankelijke digitale interfaces — websites, webapplicaties en mobiele webcontent — toegankelijk moeten zijn voor mensen met een beperking, inclusief mensen die afhankelijk zijn van zoomen en het aanpassen van de viewport om content waar te nemen.

WCAG 1.4.10 Reflow is in de Turkse context om verschillende redenen bijzonder relevant. Ten eerste is de penetratie van mobiel internet in Turkije uitzonderlijk hoog, en een aanzienlijk deel van de gebruikers heeft toegang tot overheidsdiensten, bankportalen en e-commerceplatforms via mobiele browsers op verschillende zoomniveaus. Een systeem voor het maken van ziekenhuisafspraken dat niet aan Reflow voldoet, kan oudere patiënten met een beperkt gezichtsvermogen verhinderen om zelfstandig consultaties te boeken — een directe mislukking van zowel de toegankelijkheidswet als de publieke dienstverleningsmissie van de betrokken instellingen. Ten tweede vereist het Erişilebilirlik Logosu-programma een conformiteitsaudit die alle succescriteria op niveau AA omvat; het niet voldoen aan 1.4.10 zou een verder volledig conforme site diskwalificeren voor het ontvangen van het logo. Ten derde zijn voor telecommunicatiebedrijven met een grote abonneebasis toegankelijke selfserviceportalen en interfaces voor accountbeheer essentieel — een dashboard met vaste breedte dat bij 400% zoom overloopt, schaadt rechtstreeks abonnees met een visuele beperking die anders niet naar een fysieke winkel zouden hoeven gaan of een hulplijn zouden hoeven bellen.

Organisaties die conformiteit willen aantonen onder de Turkse toegankelijkheidsregelgeving, moeten ervoor zorgen dat hun responsive design-implementaties specifiek worden gevalideerd op de drempel van 320 CSS-pixels, dat er geen viewport meta tags zijn die zoomen blokkeren en dat alle interactieve functionaliteit — inclusief authenticatiestromen, formulierverzendingen en documentdownloads — volledig bedienbaar blijft zonder horizontaal scrollen. Het opnemen van Reflow-tests als onderdeel van een gedocumenteerd toegankelijkheidsauditspoor zal essentieel zijn om naleving aan regelgevende instanties aan te tonen en om de geschiktheid voor het Erişilebilirlik Logosu te behouden.