Succescriterium 1.3.4 Weergavestand

Niveau AA

Lees de officiële tekst van succescriterium 1.3.4 Weergavestand

Schermstand: zo test je het
Zet de automatische schermdraaiing van de telefoon aan, open de site en draai het toestel om. Meer is er niet nodig.

Waar je op let:
- Verschijnt er een melding dat je moet draaien? Dan is dat de fout.
- Blijft alle inhoud zichtbaar en bruikbaar?
- Gaat het menu nog open, en past het op het scherm?
- Werkt een formulier nog, inclusief de knop onderaan?
- Blijf je op dezelfde plek in de pagina, of springt hij naar boven?
Zonder telefoon kan het ook: maak het browservenster laag en breed, bijvoorbeeld 900 bij 400 pixels. In de ontwikkelaarshulpmiddelen van de browser is ook een toestel te kiezen en te draaien.

Test niet alleen de homepage. De fout zit vaker in een videospeler, een kaart of een ingesloten formulier van een andere partij — onderdelen die iemand anders heeft gebouwd en die hun eigen aannames hebben over de schermstand.

Thema’s
Bediening Ontwerp
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk
Hulpmiddelen
Aanwijzer
Open dit onderwerp op een eigen pagina
Schermstand: de vergrendeling eruit
De fout zit bijna altijd op één van twee plekken. De eerste is een media query die de inhoud verbergt:
```
/* verbergt de site in liggende stand — nooit doen */
@media (orientation: landscape) {
  .inhoud { display: none; }
  .draai-melding { display: block; }
}
```
Gebruik orientation gerust om de indeling aan te passen. Gebruik hem nooit om iets te verbergen.

De tweede is het manifest of de app-instellingen:
```
{
  "orientation": "portrait"
}
```
De melding weghalen is de eerste stap. De tweede is zorgen dat het er liggend ook goed uitziet. In liggende stand is het scherm laag en breed, en dat is dezelfde situatie als bij inzoomen:
```
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hero { min-block-size: 60vh; }   /* niet: height: 60vh */
```
Los je dit goed op, dan is 1.4.10 Reflow Reflow meestal ook meteen in orde. Het is dezelfde oorzaak: onderdelen die hun eigen breedte of hoogte vasthouden.

Thema’s
Bediening Ontwerp
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk
Hulpmiddelen
Aanwijzer
Open dit onderwerp op een eigen pagina
Schermstand: wat het criterium vraagt
Een website moet werken in zowel de staande als de liggende stand. Niet iedereen kan zijn apparaat draaien: een telefoon in een houder op een rolstoel staat vast, en wie een tablet op een standaard heeft staan of met één hand werkt kan dat ook niet. Een melding als “Draai je scherm voor de beste ervaring” maakt de site voor die bezoekers onbruikbaar.

Je mag geen stand afdwingen, tenzij het echt niet anders kan — een piano-app of het fotograferen van een cheque zijn de gebruikelijke voorbeelden.

Wat er ook onder valt:
- Een pagina die alleen in staande stand een menu toont.
- Een videospeler die in liggende stand het scherm overneemt en niet meer terug wil.
- Een app die in de manifest-instellingen op één stand is vastgezet.
Zo’n melding is zelden een bewuste keuze. Meestal is de liggende stand niet getest, oogt de pagina daar rommelig, en is er een melding geplaatst in plaats van een oplossing.

Thema’s
Bediening Ontwerp
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk
Hulpmiddelen
Aanwijzer
Open dit onderwerp op een eigen pagina

Succescriterium 1.3.4 Weergavestand

Schermstand: zo test je het

Schermstand: de vergrendeling eruit

Schermstand: wat het criterium vraagt