Succescriterium 1.3.4 Weergavestand
De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.
NootVoorbeelden waarbij een specifieke presentatie-oriëntatie essentieel kan zijn: een acceptgiro, een piano applicatie, dia’s voor een projector of televisiescherm, of Virtual Reality waarbij de weergavestand van de content niet noodzakelijkerwijs beperkt is tot staand of liggend.
Weergavestand begrijpen (Engelstalig)
Zorg dat je website of app werkt in staande én in liggende weergavestand. Niet iedereen kan een apparaat draaien. Een rolstoelgebruiker heeft een tablet bijvoorbeeld soms in een vaste houder. De pagina moet daarom meedraaien met het apparaat. De opmaak mag per stand verschillen, zolang alle content en functies in beide standen werken.
Er zijn een paar uitzonderingen waarbij je wel een vaste oriëntatie mag blijven gebruiken, zoals in een piano-app of bij VR-toepassingen.
Hoe pas je dit toe?
- Laat de pagina meedraaien met het apparaat.
- Toon geen melding die vraagt om het apparaat te draaien in plaats van de content.
Lees het artikel over weergave en toegankelijkheid
Voor wie is dit belangrijk?
- Mensen die een fysieke of motorische beperking hebben.
- Mensen die een slechtziend zijn.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Smartphone of tablet
Uitzonderingen
Uitzonderingen zijn:
- content waarvan een vaste weergavestand essentieel is, zoals een acceptgiro, een piano-app, dia’s voor een projector of televisiescherm, of virtual reality
Testprocedure
Test 1: Weergavestand
- Open de te testen webpagina
- Open de ontwikkelaarstools en schakel de responsive weergave in:
- Firefox: Command + Option + M (macOS) of Control + Shift + M (Windows)
- Chrome: Command + Shift + M (macOS) of Control + Shift + M (Windows)
- Stel de viewport in op 390px bij 844px (staand)
- Zorg dat de zoom op 100% staat
- Open de ontwikkelaarstools en schakel de responsive weergave in:
- Verken de pagina
- 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:
- Controleer, ook met elk element geopend:
- Of de content de huidige weergavestand volgt
- Of de pagina de content of functionaliteit niet blokkeert met een melding die vraagt om het apparaat te draaien
- Of alle content beschikbaar en leesbaar is
- Of alle functionaliteit beschikbaar en bruikbaar is
- Gebruik de knop Viewport draaien om de weergavestand te wisselen
- Controleer, ook met elk element geopend:
- Of de content de nieuwe weergavestand volgt
- Of de pagina de content of functionaliteit niet blokkeert met een melding die vraagt om het apparaat te draaien
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft
- Herlaad de pagina
- Herhaal stap 2 tot en met 5
- Herhaal stap 1 tot en met 7 met de viewport op 768px bij 1024px (staand)
Smartphone of tablet
Let op: Alleen als de pagina iets op volledig scherm toont (bijvoorbeeld een filmpje) of als er geen responsive weergave in de ontwikkelaarstools beschikbaar is.
- Open de te testen webpagina op een smartphone of tablet
- Zorg dat de weergavestand niet vergrendeld is in het besturingssysteem
- Zorg dat de zoom op 100% staat
- Houd het apparaat staand
- Verken de pagina
- Open of activeer elke dynamische content (zie stap 2)
- Controleer, ook met elk element geopend:
- Of de content de huidige weergavestand volgt
- Of de pagina de content of functionaliteit niet blokkeert met een melding die vraagt om het apparaat te draaien
- Of alle content beschikbaar en leesbaar is
- Of alle functionaliteit beschikbaar en bruikbaar is
- Draai het apparaat 90 graden
- Controleer, ook met elk element geopend:
- Of de content de nieuwe weergavestand volgt
- Of de pagina de content of functionaliteit niet blokkeert met een melding die vraagt om het apparaat te draaien
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft
- Herlaad de pagina
- Herhaal stap 10 tot en met 13
Test 2: Weergavestand met bedieningselementen
Let op: Gebruik deze procedure alleen als de content in weergavestand niet volgt.
- Inventariseer de pagina
- Bepaal of er bedieningselementen zijn om de weergavestand van de content te wijzigen
- Test de bedieningselementen om de weergavestand te wijzigen en controleer:
- Of de content daarna de weergavestand van het apparaat volgt
- Of alle content beschikbaar en leesbaar blijft
- Of alle functionaliteit beschikbaar en bruikbaar blijft
Belangrijk om te weten
- De maten 390px bij 844px (telefoon) en 768px bij 1024px (tablet) zijn niet direct een eis uit WCAG. Ze zijn gekozen omdat een vergrendelde weergavestand of een melding om het apparaat te draaien vaak alleen op kleine schermen verschijnt.
Beoordeling
- Voor alle content moet minstens één van de volgende zaken gelden:
- De content volgt de weergavestand van het apparaat
- Er is een bedieningselement waarmee de content in de weergavestand van het apparaat te tonen is
- Alle content moet beschikbaar en leesbaar blijven na het aanpassen van de weergavestand
- Alle functionaliteit moet beschikbaar en bruikbaar blijven na het aanpassen van de weergavestand