1.3.4 Orientierung

WCAG-Definition

Inhalte dürfen nicht auf eine bestimmte Anzeigeausrichtung (z. B. nur Hochformat oder nur Querformat) beschränkt sein, außer wenn eine bestimmte Ausrichtung wesentlich ist (z. B. bei einem virtuellen Klavier).

Bedeutung

  • Deine Website oder Web-App muss sowohl im Hoch- als auch im Querformat funktionieren.

  • Sie darf nicht die Orientierung erzwingen oder einschränken, außer:
    • es ist technisch oder funktional notwendig
    • z. B. bei bestimmten Spielen, Präsentationen, Scanner-Apps

Beispiel für Barriere:

Ein Formular lässt sich nur im Hochformat ausfüllen – im Querformat wird ein Hinweis wie „Bitte drehen Sie Ihr Gerät“ angezeigt. → Nicht erlaubt, wenn nicht notwendig.

Ausreichende Techniken

G216 – Inhalte funktionieren in beiden Orientierungen

/* Hochformat */
@media (orientation: portrait) {
  body {
    background-color: #f0f0f0;
  }
}

/* Querformat */
@media (orientation: landscape) {
  body {
    background-color: #ffffff;
  }
}

Technischer Ansatz: Verwende CSS Media Queries zur Anpassung – nicht zur Einschränkung!

Der Inhalt wird angepasst, aber nicht blockiert.

Entwicklerhinweise:

  • Vermeide JavaScript-Redirects, die abhängig von window.orientation oder screen.orientation die Seite blockieren oder umleiten.
  • Vermeide CSS wie:

@media (orientation: landscape) {
  .message {
    display: block;
  }
  .main-content {
    display: none;
  }
}

Beratungstechniken

G197 - Verwende Responsive Design, um Inhalte automatisch anzupassen, statt eine Ausrichtung zu erzwingen
G198 - Biete nutzergesteuerte Kontrolle über Layouts (z. B. Spalten-/Zeilen-Ansicht)
G199 - Zeige bei "Optimierung für Hoch-/Querformat" trotzdem alle Funktionen und Inhalte an
G200 - Zwinge Nutzer nie zum Drehen des Geräts, außer absolut notwendig (z. B. Kamera-Ausrichtung)

Fehler

  • Inhalte oder Funktionen sind in einer Ausrichtung gesperrt (z. B. Querformat zeigt nur „Bitte drehen“)
  • Wichtige Inhalte sind nicht sichtbar oder benutzbar, wenn die Orientierung geändert wird
  • Navigation funktioniert nur in einer bestimmten Ausrichtung