Succescriterium 1.4.10 Reflow

Niveau AA

Lees de officiële tekst van succescriterium 1.4.10 Reflow

• Reflow: vaste breedtes vervangen

  Een breedte in pixels blijft staan, hoe smal het scherm ook wordt. Een maximumbreedte krimpt mee:

  /* houdt vast, ook op 320 pixels */
  .kaart { width: 640px; }
  
  /* krimpt mee */
  .kaart { max-inline-size: 640px; }

  Laat kolommen zelf terugvallen. Met auto-fit hoef je geen enkel breekpunt te bedenken: de kolommen worden smaller tot ze niet meer passen en gaan dan onder elkaar.

  .raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }

  Een brede tabel of een codevoorbeeld hoeft niet af te breken. Die mogen schuiven, maar dan in hun eigen kader en niet met de hele pagina:

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

  Let ook op vaste hoogtes. Een knop met height: 40px ziet er strak uit tot de tekst erin twee regels wordt. Gebruik min-block-size, dan groeit de knop mee in plaats van de tekst af te knippen.

  Thema’s

  Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Reflow: zo test je het

  Deze test kost een minuut per pagina en vraagt geen gereedschap.

  Ga als volgt te werk:

  • Maak het browservenster zo groot als het scherm.
  • Druk vijf keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 400%.
  • Lees een alinea. Moet je daarvoor heen en weer schuiven?

  Werkt het scherm niet mee, versmal het venster dan tot 320 pixels breed. Dat komt op hetzelfde neer.

  Waar je op let:

  • Een schuifbalk onderaan de pagina. Dat is de fout. Eén in een tabel of codeblok mag wel.
  • Tekst die wegvalt of overlapt, meestal door een vaste hoogte.
  • Een menu dat niet meer opengaat of het halve scherm vult.
  • Knoppen die buiten beeld vallen. De knop Versturen onder een formulier is de meest voorkomende.
  • Een vaste balk bovenaan die op 400% de helft van het scherm inneemt.

  De fout zit zelden in de hele pagina. Meestal in één onderdeel dat later is toegevoegd: een ingesloten kaart, een prijstabel of een banner van een andere partij. Zoek dus niet naar één grote oorzaak maar naar het blok dat niet meebeweegt.

  Thema’s

  Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina

• Reflow: wat het criterium vraagt

  Bij 400% zoom behandelt de browser de pagina als een smal scherm. Een pagina die ook op een telefoon werkt, schuift zijn kolommen dan onder elkaar. Gebeurt dat niet, dan verschijnt er een schuifbalk onderaan en moet de bezoeker bij elke regel heen en weer schuiven.

  De eis is: bij 400% zoom op een scherm van 1280 bij 1024 hoeft er nog maar in één richting geschoven te worden. Dat komt neer op een venster van 320 bij 256 pixels, zo smal als een oude telefoon.

  Wie hier last van heeft:

  • Bezoekers die slecht zien en daarom vergroten.
  • Bezoekers die een schermvergroting gebruiken en maar een deel van het scherm zien.
  • Iedereen op een telefoon.

  Werkt de site op een telefoon, dan is dit criterium bijna vanzelf in orde. Het gaat om de plekken waar een uitzondering is gemaakt: die ene tabel, dat ene formulier, die kaart met een vaste breedte.

  Thema’s

  Ontwerp

  Doelgroepen

  Auditeur Ontwikkelaar Vormgever

  Wie het raakt

  Je ziet slecht

  Hulpmiddelen

  Schermvergroting

  Open dit onderwerp op een eigen pagina