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.
Noot 1320 CSS-pixels zijn gelijk aan de beginbreedte van een weergavekader van 1280 CSS-pixels bij 400% zoom. Voor webcontent die ontworpen is om horizontaal te scrollen (bijv. bij verticale tekst), zijn de 256 CSS-pixels gelijk aan de beginbreedte van een weergavekader van 1024 CSS-pixels bij 400% zoom.
Noot 2Voorbeelden van content die een tweedimensionale lay-out vereisen, zijn afbeeldingen nodig om iets te begrijpen (zoals kaarten en schema’s), video’s, games, presentaties, gegevenstabellen (geen individuele cellen) en interfaces waarbij de werkbalken zichtbaar moeten blijven tijdens het manipuleren van de content. Het is aanvaardbaar om voor zulke onderdelen van de content tweedimensionaal scrollen aan te bieden.
Reflow begrijpen (Engelstalig)
Mensen die slechtziend zijn, zoomen soms ver in om tekst te kunnen lezen. Het weergavekader wordt dan smaller. Past de content zich niet aan, dan lopen regels tekst buiten beeld. De gebruiker moet dan voor elke regel heen en weer scrollen en raakt snel de draad kwijt.
Zorg daarom dat content bij 400% zoom past in een breedte van 320 CSS-pixels. De gebruiker hoeft dan alleen omhoog en omlaag te scrollen. Alles moet leesbaar en bruikbaar blijven. Content mag wel verschuiven of achter een knop komen, zolang die bereikbaar blijft. Voor content die horizontaal scrolt, zoals verticaal geschreven tekst, geldt hetzelfde bij een hoogte van 256 CSS-pixels.
Er is een uitzondering voor content die een tweedimensionale lay-out nodig heeft, zoals kaarten, schema’s, video’s, games, presentaties en datatabellen. Die uitzondering geldt alleen voor dat onderdeel zelf, niet voor de rest van de pagina.
Hoe pas je dit toe?
- Zorg dat content past in een weergavekader van 320 CSS-pixels breed. Om te lezen is dan alleen scrollen omhoog en omlaag nodig.
- Zorg dat er geen content of functionaliteit verloren gaat. Content mag verschuiven of achter een knop komen, zoals een menu achter een menuknop, zolang die bereikbaar blijft en werkt.
- Zorg dat tekst niet wordt afgekapt, of bied een knop of link om de volledige tekst te tonen.
- Zorg dat zwevende onderdelen, zoals een sticky header of cookiemelding, de content niet zo bedekken dat die niet meer te lezen is.
- Zorg bij content die horizontaal scrolt, zoals verticaal geschreven tekst, dat dit ook werkt bij een hoogte van 256 CSS-pixels.
320px bij 256px
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.
Begin met een weergavekader van 1280 bij 1024 CSS-pixels en zoom in tot 400%. Je hebt dan een weergavekader van 320 bij 256 CSS-pixels.
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
- tekst waarbij de lay-out betekenis heeft, zoals ingesprongen code en ASCII-art
De uitzondering geldt alleen voor dat onderdeel zelf, niet voor de content eromheen en niet voor de tekst in de afzonderlijke cellen van een datatabel.
Testprocedure
Test 1: Reflow
- Open de te testen webpagina in browser 1
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Open dezelfde webpagina in 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
- Verken de pagina in browser 2
- Bepaal welke dynamische content er is:
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Formulieren
- Open of activeer elk element
- Bepaal welke dynamische content er is:
- Vergelijk beide vensters, ook met elk element geopend, en controleer:
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft
- Of elk onderdeel van de content beschikbaar en leesbaar is zonder in twee richtingen te scrollen
- Of zwevende of meebewegende content de overige content niet zo bedekt dat die niet meer te lezen of te gebruiken is (bijvoorbeeld een sticky header of footer, of een cookiemelding)
Beoordeling
- Bij een weergavekader van 320 CSS-pixels breed of 256 CSS-pixels hoog moet alle content beschikbaar en leesbaar blijven
- Bij een weergavekader van 320 CSS-pixels breed of 256 CSS-pixels hoog moet alle functionaliteit beschikbaar en bruikbaar blijven
- Bij een weergavekader van 320 CSS-pixels breed of 256 CSS-pixels hoog moet elk onderdeel van de content beschikbaar en bruikbaar is zonder in twee richtingen te scrollen
- Zwevende of meebewegende content moet de overige content niet zo bedekken dat die niet meer te lezen of te gebruiken is