WCAG 1.3.4 Bildschirmausrichtung

Das Erfolgskriterium 1.3.4 hilft Menschen, deren Smartphone oder Tablet in einer festen Position montiert ist — zum Beispiel an einem Rollstuhl —, und Menschen, die ein Gerät nicht ohne Weiteres drehen können. Sie müssen die Website in der Ausrichtung nutzen können, die sie gerade haben. Es kam mit WCAG 2.1 hinzu, gehört zur Konformitätsstufe AA und ist Teil von EN 301 549 (Abschnitt 9.1.3.4). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Inhalte dürfen ihre Ansicht und Bedienung nicht auf eine einzige Bildschirmausrichtung wie Hoch- oder Querformat beschränken, es sei denn, eine bestimmte Ausrichtung ist wesentlich.

Das bedeutet:

• Die Website funktioniert und zeigt alle Inhalte im Hoch- und im Querformat;
• das Layout darf sich anpassen (eine Spalte im Hochformat, zwei im Querformat) — das ist in Ordnung;
• eine Meldung wie „Bitte drehen Sie Ihr Gerät“ oder ein Layout, das den Inhalt in einer Ausrichtung um 90° dreht, ist ein Verstoß.

Wesentliche Beispiele aus den WCAG: ein Bankscheck, eine Klavier-Anwendung, Folien für einen Projektor oder Fernseher und Virtual-Reality-Inhalte.

Typische Fehler in Onlineshops

• ein Produktkonfigurator oder 3D-Viewer, der im Hochformat „Drehen Sie Ihr Smartphone“ anzeigt;
• CSS, das auf kleinen Bildschirmen im Querformat den Checkout oder den Hauptinhalt ausblendet;
• ein Web-App-Wrapper, der den ganzen Shop auf Hochformat festlegt;
• eine Bildergalerie, die sich nur im Querformat öffnet.

So prüfen Sie es

Automatisch: Unser Checker erkennt CSS, das Inhalte auf eine Ausrichtung festlegt, zum Beispiel indem es sie innerhalb einer orientation-Media-Query dreht oder ausblendet (Regel CSS orientation lock). Sperren per JavaScript, über ein Web-App-Manifest oder durch einen nativen App-Wrapper werden nicht erfasst — testen Sie daher auch auf einem Gerät.

Manuell: Öffnen Sie die wichtigsten Seiten — Startseite, Kategorie, Produkt, Warenkorb, Checkout, Konto — auf einem Smartphone und einem Tablet. Schalten Sie die Rotationssperre aus und drehen Sie das Gerät in jeder Ansicht. Alle Inhalte und Funktionen müssen verfügbar bleiben, und nichts darf Sie zum Drehen auffordern.

So beheben Sie es

• Entfernen Sie CSS, das Inhalte in @media (orientation: …)-Regeln dreht oder ausblendet; verwenden Sie stattdessen breitenbasierte Breakpoints.
• Entfernen Sie Overlays mit „Drehen Sie Ihr Gerät“.
• Legen Sie im Web-App-Manifest keine feste orientation fest, es sei denn, sie ist wirklich wesentlich.
• Gestalten Sie Komponenten wie Galerien und Konfiguratoren so, dass sie in einem schmalen Hochformat-Layout funktionieren.

Verwandte Kriterien

• 1.4.10 Umfluss (Reflow) — Inhalte, die ohne horizontales Scrollen auf schmale Bildschirme passen.
• 1.4.4 Textgröße ändern — Text auf 200 % vergrößern.
• WCAG-Checker — prüfen Sie eine Seite Ihrer Website.

Häufige Fragen

Muss mein Shop im Hoch- und Querformat gleich aussehen?

Nein. Das Layout darf sich ändern, aber Inhalte und Funktionen müssen in beiden Ausrichtungen verfügbar sein. Ein Verstoß ist nur, die Ansicht auf eine Ausrichtung festzulegen oder Nutzer aufzufordern, ihr Gerät zu drehen.

Wann ist eine feste Ausrichtung erlaubt?

Nur wenn eine Ausrichtung wesentlich ist. Die WCAG nennen Beispiele wie einen Bankscheck, eine Klavier-App, Folien für einen Projektor oder Fernseher und Virtual-Reality-Inhalte.

Kann ein automatisches Tool Ausrichtungssperren finden?

Es findet CSS, das Inhalte abhängig von der Media Query orientation dreht oder ausblendet. Sperren per JavaScript oder in einer nativen App erfordern einen manuellen Test auf einem Gerät.