Succescriterium 1.4.10 Reflow
Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
- Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels;
- Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels;
Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.
Reflow begrijpen (Engelstalig)
Webpagina’s moeten zo worden ontworpen dat verticaal scrollende content werkt bij een breedte van 320px, en horizontaal scrollende content bij een hoogte van 256px, zonder dat er iets wegvalt of niet meer werkt en zonder dat scrollen in twee richtingen voorkomt.
Mensen die slechtziend zijn vergroten de content soms om deze beter te kunnen lezen. Zorg daarom dat je website goed meeschaalt als mensen inzoomen.
Er is een uitzondering voor delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen, zoals kaarten en grafieken, video’s, games, presentaties, en gegevenstabellen.
Hoe pas je dit toe?
- Zorg dat content schaalbaar is tot een breedte van 320 pixels bij verticaal scrollende content, of tot een hoogte van 256 pixels bij content die bedoeld is om horizontaal te scrollen, zonder dat er content wegvalt.
- Zorg dat content schaalbaar is tot een breedte van 320 pixels bij verticaal scrollende content, of tot een hoogte van 256 pixels bij content die bedoeld is om horizontaal te scrollen, zonder dat functionaliteit niet meer werkt.
- Zorg dat content schaalbaar is tot een breedte van 320 pixels bij verticaal scrollende content, of tot een hoogte van 256 pixels bij content die bedoeld is om horizontaal te scrollen, zonder dat je in twee dimensies hoeft te scrollen.
320px bij 256px
Test zelf je website eens na herschalen. Het vergroten of verkleinen van de content zit standaard ingebouwd in browsers. Gebruik hiervoor de toetscombinatie Ctrl of Command + + voor inzoomen en Ctrl of Command + - voor uitzoomen.
Een weergavekader van 320px bij 256px staat gelijk aan een resolutie van 1280px bij 1024px die tot 400% is vergroot.
Lees meer over weergave en toegankelijkheid
Handige tips
- Gebruik flexibele lay-outs die zich aanpassen aan verschillende tekstgroottes.
- Gebruik relatieve eenheden zoals
emofremvoor tekstgroottes. - Vermijd vaste breedtes en hoogtes voor onderdelen.
Voor wie is dit belangrijk?
- Mensen die slechtziend zijn.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
Uitzonderingen
Uitzonderingen zijn:
- content die een tweedimensionale lay-out nodig heeft voor het gebruik of de betekenis, zoals kaarten, schema’s, video’s, games, presentaties, datatabellen en interfaces waarbij werkbalken in beeld moeten blijven
Testprocedure
Test 1: Reflow
- Open de te testen webpagina (browser 1)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Open dezelfde webpagina in andere browser (browser 2)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Vergroot de pagina tot 400% zoom
- Herlaad de pagina
- Vergelijk beide vensters en controleer:
- Of de content daadwerkelijk vergroot is tot 400%
- Of alle content nog steeds beschikbaar is
- Of alle functionaliteit nog steeds te gebruiken is
- Of er geen scrollen in twee dimensies voorkomt
- Of zwevende of meebewegende content de overige content niet volledig bedekt (zoals een sticky header of footer, of een cookiebanner)
Beoordeling
- Content die verticaal scrolt moet kunnen worden weergegeven bij een viewport van 320 CSS-pixels breed
- Content die horizontaal scrolt moet kunnen worden weergegeven bij een viewport van 256 CSS-pixels hoog
- Alle content moet beschikbaar en leesbaar blijven na het herschalen
- Alle functionaliteit moet beschikbaar en bruikbaar blijven na het herschalen
- Scrollen in twee richtingen tegelijk moet niet voorkomen na het herschalen
- Zwevende of meebewegende content moet de overige content niet volledig bedekken na het herschalen