Reflow
Inhoud moet bij 320 CSS-pixels breedte (verticaal scrollende inhoud) of 256 pixels hoogte (horizontaal scrollende inhoud) kunnen worden hervloeid in één kolom zonder verlies van informatie of functionaliteit. Scrollen in twee richtingen is niet toegestaan.
Wat het vereist
Wanneer het viewport 320 CSS-pixels breed is — wat overeenkomt met een desktopscherm van 1280 px op 400% zoom, of een klein mobiel apparaat — moet inhoud kunnen hervloeien in één kolom zonder dat horizontaal scrollen nodig is. De gebruiker mag nooit tegelijkertijd verticaal en horizontaal hoeven scrollen om doorlopende inhoud te lezen. Essentiële uitzonderingen zijn toegestaan: datatabellen, complexe kaarten, codevoorbeelden en presentaties waarvoor scrollen in twee richtingen fundamenteel is voor de inhoud.
Hoe er aan te voldoen
- Bouw de lay-out mobile-first met flexbox of CSS grid dat bij kleine breedten naar één kolom terugvalt.
- Test bij precies 320 px viewportbreedte — of bij 400% browserzoom op een 1280 px-venster — en controleer elke pagina.
- Gebruik
max-width: 100%op afbeeldingen, video’s en ingesloten media zodat ze meekrimpen met het viewport. - Vouw voor navigatie het horizontale desktopmenu in een verticaal mobiel menu bij het juiste breekpunt.
- Sta voor datatabellen horizontaal scrollen toe binnen een
overflow-x: auto-wrapper — de tabel zelf is uitgezonderd, maar de container mag de pagina niet zijwaarts opduwen. - Gebruik geen vaste pixelbreedten op body-containers of modale dialoogvensters.
Veelvoorkomende fouten
- Herogedeelten met vaste breedte (
width: 1200px) die het viewport bij 320 px overschrijden en horizontaal scrollen afdwingen. - Modale dialoogvensters in vw of px die breder zijn dan 320 px en op kleine schermen worden afgesneden.
- Codevoorbeelden in
<pre>-blokken zonder omloopoptie of scrollcontainer, waardoor de pagina breder wordt. - Marketingpagina’s met absoluut gepositioneerde decoratieve elementen die geen rekening houden met smalle viewports.
- Vaste elementen die bij 400% zoom over de inhoud vallen omdat ze zijn ontworpen voor het volledige viewport.
- Tabellen die niet in een overflow-container zijn gewikkeld, waardoor de gehele pagina horizontaal scrollt in plaats van alleen de tabel.
Waarom het ertoe doet
Reflow is het succescriterium dat de meeste „responsief maar eigenlijk niet responsief“-sites aanwijst — een lay-out die breekt bij 320 CSS-pixels is gelijk aan een lay-out die breekt bij 400% zoom voor een slechtziende gebruiker op de desktop. Dat zijn wiskundig dezelfde gevallen. Het herstellen van reflow betekent doorgaans het verstevigen van het responsieve ontwerp dat al grotendeels aanwezig was, waardoor het tot de hoogstrenderende WCAG-verbeteringen behoort.