1.3.4 Bildschirmausrichtung

Eine Seite muss im Hoch- und im Querformat funktionieren und darf sich nicht auf eines festlegen, außer die Ausrichtung ist unentbehrlich.

/ Was es verlangt

Eine Seite muss im Hoch- und im Querformat funktionieren. Sie darf sich nicht auf eines davon festlegen, sich nicht selbst auf die Seite drehen und den Bildschirm nicht mit der Aufforderung zudecken, das Gerät zu drehen. Manche Menschen haben ihr Telefon oder Tablet fest montiert, etwa am Arm eines Elektrorollstuhls, und können es nicht drehen. Sehbehinderte Menschen wählen oft das Querformat, um größere Schrift zu bekommen. Für beide Gruppen funktioniert eine Seite, die nur in einer Lage geht, schlicht nicht.

Ausgenommen ist eine Ausrichtung, die unentbehrlich ist, weil der Inhalt sonst nicht funktioniert oder keinen Sinn ergibt. Die Beispiele von W3C sind das Fotografieren eines Bankschecks, eine Klavier-App, Folien für Projektor oder Fernseher und virtuelle Realität. Das Kriterium betrifft Einschränkungen durch den Autor. Es erfasst weder Nutzer, die ihr eigenes Gerät sperren, noch Layoutänderungen, die aus der Bildschirmgröße folgen. Das Layout an jede Ausrichtung anzupassen ist in Ordnung; nur eine anzubieten nicht.

/ Woran Seiten scheitern

Im Querformat legt eine mobile Website eine Überlagerung über die ganze Seite mit dem Text „Bitte drehen Sie Ihr Gerät“.
Eine Regel in @media (orientation: landscape) setzt transform: rotate(-90deg) auf body, sodass die ganze Seite im Querformat auf der Seite liegt.
Das Web-App-Manifest setzt "orientation": "portrait", sodass sich die installierte App nicht mit dem Gerät dreht.
Eine Videoseite ruft beim Wechsel in den Vollbildmodus screen.orientation.lock("landscape") auf, obwohl der Inhalt in beiden Lagen funktionieren würde.
Eine Orientation-Media-Query setzt display: none auf die Absenden-Schaltfläche eines Formulars, sodass sich das Formular im Querformat ausfüllen, aber nie abschicken lässt.

/ So prüfen Sie es selbst

Schalten Sie die Rotationssperre des Systems am Telefon oder Tablet aus und öffnen Sie die Seite im Hochformat. Notieren Sie, was sie zeigt und was sich tun lässt.
Drehen Sie das Gerät ins Querformat und wiederholen Sie das. Der Inhalt sollte aufrecht und lesbar bleiben, und jedes Bedienelement sollte weiter funktionieren.
Ohne Gerät öffnen Sie in den Chrome-Entwicklerwerkzeugen die Gerätesymbolleiste, wählen ein Telefon und drücken die Drehen-Schaltfläche. Das schaltet die Orientation-Media-Queries um.
Durchsuchen Sie das CSS nach Orientation-Media-Queries und prüfen Sie, was die Regeln darin ausblenden, drehen oder ersetzen. Durchsuchen Sie die Skripte nach screen.orientation.lock und das Manifest nach dem Feld orientation.
Ist eine Ausrichtung gesperrt, entscheiden Sie, ob sie im Sinne des Kriteriums unentbehrlich ist, wie bei der Scheckaufnahme oder einer Klaviatur, oder nur eine gestalterische Vorliebe.

/ So beheben Sie es

Entfernen Sie die Überlagerung „Gerät drehen“ und gestalten Sie den Inhalt mit responsivem CSS für beide Ausrichtungen.
Entfernen Sie transform: rotate() und die Eigenschaft rotate aus Regeln in Orientation-Media-Queries. Nutzen Sie diese Queries, um das Layout zu ändern, etwa die Zahl der Spalten, nicht um Inhalt zu drehen.
Löschen Sie das Feld orientation aus der manifest.json oder setzen Sie es auf "any".
Entfernen Sie Aufrufe von screen.orientation.lock(), es sei denn, die Ausrichtung ist unentbehrlich. Ist sie es, bieten Sie ein Bedienelement zum Umschalten an.
Ordnen Sie Inhalte mit Orientation-Media-Queries um, blenden Sie sie aber nie aus, damit jedes Bedienelement in beiden Lagen erreichbar bleibt.

/ Was unser Scanner prüft

Keine Prüfung in unserem Scan deckt 1.3.4 ab. Der Durchlauf auf der gerenderten Seite lädt jede Seite in einer festen Desktop-Ansicht und dreht sie nie, er sieht also weder eine Aufforderung zum Drehen noch ein per CSS gedrehtes Layout noch eine Ausrichtungssperre im Manifest. Im manuellen Audit werden die Seiten auf einem Telefon oder Tablet in beiden Ausrichtungen geöffnet.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Ist es ein WCAG-Verstoß, eine mobile Website auf Hochformat festzulegen?

Ja. Das Erfolgskriterium 1.3.4 auf Stufe AA erlaubt nicht, dass Inhalte ihre Betrachtung und Bedienung auf eine Bildschirmausrichtung beschränken, es sei denn, diese Ausrichtung ist unentbehrlich. Eine Sperre per CSS, per Skript oder im Web-App-Manifest und ebenso eine bloße Meldung in der anderen Ausrichtung gelten als Beschränkung. Das Kriterium kam mit WCAG 2.1 hinzu.

Wann ist eine Ausrichtung unentbehrlich?

Wenn der Inhalt ohne sie nicht funktionieren oder seine Bedeutung ändern würde. W3C nennt einen Bankscheck, eine Klavier-Anwendung, Folien für einen Projektor oder Fernseher und Inhalte der virtuellen Realität. Ein Layout, das der Gestalterin im Hochformat besser gefällt, ist nicht unentbehrlich; eine App, die ein doppelt so breites wie hohes Dokument fotografiert, kann es sein.

Verstößt die Seite, wenn jemand sein Telefon im Hochformat sperrt?

Nein. Das Kriterium betrifft Inhalte, die die Ausrichtung beschränken, nicht die Einstellung der Nutzer selbst. W3C hält fest, dass eine Seite ohne Beschränkung der Gerätesperre automatisch folgt. Die Ausrichtung zu erkennen und das Layout daran anzupassen ist ebenfalls erlaubt. Der Fehler besteht darin, nur eine Ausrichtung anzubieten.

Eigene Seite messen Alle gemessenen Barrieren