Campus Design System

Appearance

1.3.4 Oriëntatie niveau AA ​

Uitleg ​

Het WCAG-criterium 1.3.4 Oriëntatie vereist dat content niet beperkt mag worden tot één specifieke weergave-oriëntatie, zoals alleen liggend (landscape) of staand (portrait), tenzij een bepaalde oriëntatie essentieel is voor de functie van de content. Dit betekent dat gebruikers de keuze moeten hebben om content in hun gewenste oriëntatie te bekijken, wat vooral belangrijk is voor mensen die hun apparaat in een vaste oriëntatie moeten gebruiken, bijvoorbeeld door een rolstoel- of tafelklem.

Wat betekent dit in de praktijk? ​

In de praktijk betekent dit dat:

  • Websites en applicaties zich automatisch moeten aanpassen aan de oriëntatie van het apparaat (landscape of portrait).
  • Inhoud niet mag vastlopen of verkeerd moet weergegeven worden als de gebruiker de schermoriëntatie verandert.
  • Sommige uitzonderingen mogelijk zijn als de content alleen correct werkt in een specifieke oriëntatie (bijvoorbeeld bij het weergeven van een pianotoetsenbord of een interactieve kaart).

Dit criterium is relevant voor zowel mobiele apparaten als tablets, waarbij gebruikers vaak wisselen tussen landscape- en portrait-modus.

Waarom is dit belangrijk? ​

Door gebruikers toe te staan content in hun voorkeuroriëntatie te bekijken, kunnen mensen met mobiliteits- of zichtbeperkingen eenvoudiger navigeren. Het verbetert ook de algehele toegankelijkheid van de website, zodat gebruikers in hun voorkeurspositie of -richting kunnen werken.

Voorbeeld van het probleem ​

Stel je voor dat een mobiele applicatie vastzit in de staande modus, maar een gebruiker zijn of haar apparaat in een liggende positie heeft gemonteerd, bijvoorbeeld aan een rolstoel of bureau. Als de app dan niet correct wordt weergegeven in landschapsmodus, wordt het voor deze gebruiker moeilijk of onmogelijk om de app te gebruiken.

Oplossing voor dit probleem ​

Ontwikkel de interface zodat deze automatisch draait en correct weergeeft in beide oriëntaties. Vermijd het gebruik van code die de schermoriëntatie beperkt, zoals:

html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

En zorg ervoor dat alle visuele elementen flexibel genoeg zijn om te werken in zowel liggende als staande modus.

Voorbeeld van implementatie ​

In CSS kan een flexibele lay-outstructuur zoals CSS Flexbox of Grid helpen om content zich correct te laten aanpassen in beide oriëntaties. Bijvoorbeeld:

css
.container {
  display: flex;
  flex-direction: column;
}

@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

Hier wordt de inhoud dynamisch aangepast op basis van de oriëntatie van het apparaat, zodat het in landscape-modus en portrait-modus goed wordt weergegeven.

Belangrijke overwegingen ​

  • Essentiële oriëntaties: In sommige gevallen, zoals bij specifieke media (bijvoorbeeld een theaterkaart of complexe grafieken), kan een specifieke oriëntatie nodig zijn. In dergelijke gevallen moet de gebruiker duidelijk geïnformeerd worden waarom deze oriëntatie noodzakelijk is.
  • Gebruik van CSS en flexibele layouts: Het gebruik van flexibele CSS-lay-outs kan ervoor zorgen dat de inhoud soepel schaalt en verschuift op basis van de oriëntatie.
  • Device-agnostic ontwerp: Zorg ervoor dat de inhoud altijd beschikbaar is, ongeacht de gebruikte oriëntatie of apparaat.

Alternatieve benaderingen ​

  • Testen in beide oriëntaties: Zorg ervoor dat je website zowel in staande als liggende modus functioneert zonder beperkingen.
  • Geoptimaliseerde lay-out voor specifieke oriëntaties: Als een bepaalde oriëntatie specifieke voordelen biedt, optimaliseer de lay-out dan zonder de andere oriëntatie uit te sluiten.

Belangrijkste punten ​

  • Beperk gebruikers niet tot één oriëntatie, tenzij absoluut noodzakelijk.
  • Gebruik responsieve technieken om inhoud flexibel weer te geven in zowel staande als liggende modus.
  • Zorg ervoor dat de gebruikerservaring consistent blijft bij een wisseling van oriëntatie.

Tools en Hulpmiddelen ​

  • Responsive Design Mode in Browsers: De ingebouwde tool in bijvoorbeeld Chrome DevTools biedt een gemakkelijke manier om te testen hoe je website zich gedraagt in zowel landscape- als portrait-modus.
  • Device-emulatoren: Tools zoals BrowserStack en CrossBrowserTesting kunnen helpen om verschillende apparaten en hun oriëntaties te simuleren en testen.

Betekenis voor toegankelijkheid ​

Door de keuze van oriëntatie open te laten, maken we content toegankelijk voor een grotere groep gebruikers, inclusief mensen met beperkingen in hun mobiliteit en visuele mogelijkheden. Dit verbetert de bruikbaarheid en flexibiliteit, zodat iedereen de inhoud kan bekijken in de voor hen meest comfortabele positie of oriëntatie.

Referenties ​

  • WCAG 2.2 Richtlijn 1.3.4 Oriëntatie: Voor meer details en richtlijnen, raadpleeg de officiële documentatie op W3C WCAG 2.2 - Oriëntatie.