Reflow: uw website op 400% zoom zonder horizontaal scrollen

“Reflow? Onze site is toch responsive?” Dat is meestal de eerste reactie, en vaak een terechte. Een goed responsive thema doet al het grootste deel van het werk. Maar responsive en reflow in WCAG zijn niet precies hetzelfde. Responsive gaat over telefoons en tablets. Reflow gaat over iemand die op een gewone laptop inzoomt tot 400 procent en dan nog steeds alles moet kunnen lezen zonder zijwaarts te scrollen. Daar gaat het soms mis op plekken waar u het niet verwacht.

Wat reflow precies is

Stel u voor dat u een krant leest door een vergrootglas, en bij elke regel het vergrootglas van links naar rechts moet schuiven, en dan terug, en een regel omlaag. Zo voelt een website die bij sterke vergroting niet meebeweegt: elke regel tekst is breder dan het scherm. Lezen wordt dan een vermoeiende puzzel.

Reflow betekent dat de inhoud zich bij vergroting opnieuw schikt, meestal in één kolom, zodat de bezoeker alleen nog van boven naar beneden scrolt. Dat is succescriterium 1.4.10 van WCAG, niveau AA.

De eis in cijfers: 320 css-pixels

WCAG drukt het uit in een breedte. Inhoud die verticaal scrolt, zoals een gewone webpagina, moet werken op een breedte van 320 css-pixels zonder dat er horizontaal gescrold hoeft te worden. Voor inhoud die horizontaal scrolt, zoals verticaal geschreven tekst, geldt een hoogte van 256 css-pixels.

Waarom 320? Dat is wat er overblijft als u een scherm van 1280 pixels breed op 400 procent zet: 1280 gedeeld door 4. Het is ook ongeveer de breedte van een klein telefoonscherm. Een site die op een smalle telefoon goed werkt, is daarom vaak al een eind op weg.

“Zonder verlies van informatie of functionaliteit” hoort er ook bij. Een thema dat op smalle schermen het halve menu weglaat of een zoekveld verbergt zonder alternatief, voldoet dus niet, ook al scrolt er niets zijwaarts.

De uitzonderingen: tabellen, kaarten en meer

Niet alles kan in één smalle kolom. WCAG maakt een uitzondering voor inhoud die een tweedimensionale opmaak nodig heeft om begrijpelijk te blijven. Voorbeelden die het criterium zelf noemt:

• Datatabellen met veel kolommen.
• Kaarten, zoals een plattegrond of routekaart.
• Diagrammen en schema’s.
• Video.
• Spellen en presentaties.
• Interfaces met werkbalken die naast de inhoud moeten blijven, zoals een teksteditor.

Let op hoe dat werkt: alleen dat ene onderdeel mag horizontaal scrollen. De rest van de pagina niet. Een brede tabel zet u dus in een eigen container die zelf kan scrollen, in plaats van de hele pagina breder te maken.

<div class="tabel-scroll" tabindex="0" role="region" aria-label="Tarieven per pakket">
  <table>...</table>
</div>

.tabel-scroll { overflow-x: auto; }

De tabindex="0" zorgt dat iemand met een toetsenbord de tabel kan aanklikken en met de pijltjestoetsen kan scrollen. De aria-label geeft het gebied een naam. Hoe u de tabel zelf toegankelijk opbouwt, leest u in tabellen op uw website toegankelijk maken.

Een tabel die alleen voor de opmaak is gebruikt, bijvoorbeeld om tekst in twee kolommen te zetten, valt overigens niet onder de uitzondering. Die moet gewoon meeschikken.

Zo test u reflow

Er zijn twee manieren, en ze geven hetzelfde beeld.

Methode 1: inzoomen

1. Zet het browservenster op een breedte van 1280 pixels. Op een groter scherm maakt u het venster kleiner; in de ontwikkelaarstools ziet u de breedte.
2. Zoom in tot 400 procent met Ctrl en plus (Cmd en plus op een Mac).
3. Scrol de pagina van boven naar beneden door.

Methode 2: de responsive weergave

1. Open de ontwikkelaarstools (F12) en schakel de apparaatweergave in.
2. Stel de breedte in op 320 pixels.
3. Scrol door de pagina.

Let bij beide op:

• Verschijnt er onderaan een horizontale scrollbalk voor de hele pagina?
• Valt er tekst rechts buiten beeld?
• Overlappen onderdelen elkaar?
• Zijn alle menu-items, knoppen en formuliervelden nog bereikbaar?
• Blijft een vaste header of een cookiebalk zo groot dat er nauwelijks ruimte over is voor de inhoud?

Bij 200 procent zoom gelden overigens weer andere aandachtspunten, die in tekst vergroten tot 200 procent aan bod komen.

Waar het in de praktijk misgaat

Bij sites die op een telefoon prima werken, zitten de reflowproblemen meestal in een paar vaste hoeken:

• Elementen met een vaste breedte. Een iframe, een ingesloten formulier of een widget van een externe partij met width: 600px.
• Lange woorden of url’s. Een lange link of een e-mailadres zonder afbreekmogelijkheid duwt de pagina breder. overflow-wrap: anywhere helpt.
• Codeblokken en tabellen zonder eigen scrollcontainer.
• Vaste en zwevende elementen. Een chatknop, een cookiebanner en een vaste header samen kunnen bij 400 procent bijna het hele scherm bedekken.
• Page builder-secties met een minimale breedte of kolommen die op het tussenformaat niet onder elkaar springen.

De laatste is lastig, omdat een browser bij 400 procent zoom op een laptop soms een ander breekpunt raakt dan een echte telefoon. Daarom is testen op 320 pixels nuttiger dan alleen op uw eigen telefoon kijken.

Zo zoekt u de boosdoener

Ziet u een horizontale scrollbalk maar niet waar die vandaan komt? Open de ontwikkelaarstools en plak deze regel tijdelijk in het tabblad Console:

document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) console.log(el);
});

U krijgt een lijst met elementen die breder zijn dan het scherm. Meestal is het er één, diep in de pagina, die de rest meetrekt. Is dat element van een plugin of een extern script, dan heeft u vaak een kleine CSS-regel nodig in het veld voor extra CSS of in een childthema, zodat een thema-update hem niet weer overschrijft.

Waarom dit onder AA valt

Reflow is een eis van niveau AA, en daarmee onderdeel van wat in Europa via de norm EN 301 549 wordt gevraagd. Welke criteria allemaal onder dat niveau vallen en wat dat in de praktijk betekent, leest u bij WCAG niveau AA uitgelegd. Hoe reflow past tussen alle andere onderdelen van een toegankelijke website, staat op de overzichtspagina over toegankelijkheid.