Nieuw in WCAG 2.1
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 de content bij een weergavekader van 320px bij 256px weergegeven kan worden zonder dat er iets wegvalt of niet meer werkt en zonder dat scrollen in twee richtingen voorkomt.
Mensen die slechtziend zijn willen de tekst soms (flink) kunnen vergroten om het beter te kunnen lezen. Maak het daarom mogelijk om te herschalen. Dit succescriterium vereist dat dit mogelijk moet zijn tot een weergavekader van 320px bij 256px zonder verlies van content of functionaliteit en zonder dat scrollen in twee dimensies voorkomt.
Er is een uitzondering voor delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen, zoals kaarten en schema’s, video’s, games, presentaties, en gegevenstabellen.
Hoe pas je dit toe?
- Zorg dat content kan worden herschaald tot een weergavekader van 320px bij 256px zonder dat content wegvalt.
- Zorg dat content kan worden herschaald tot een weergavekader van 320px bij 256px zonder dat functionaliteit niet meer werkt.
- Zorg dat content kan worden herschaald tot een weergavekader van 320px bij 256px zonder dat scrollen in twee dimensies voorkomt.
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.
Voor wie is dit belangrijk?
- Mensen die slechtziend zijn.
Wie is verantwoordelijk?
- Vormgever
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
Testprocedure
Test 1: Herschalen
- Open de te testen webpagina (venster 1)
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Open dezelfde webpagina in nieuw venster (venster 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
Beoordeling
- Alle content moet nog steeds beschikbaar zijn na het herschalen
- Alle functionaliteit moet nog steeds te gebruiken zijn na het herschalen
- Scrollen in twee dimensies moet niet voorkomen na het herschalen