Praxisleitfaden CSS und Bildschirmausrichtung
Beide Bildschirmausrichtungen ermöglichen
Erzwungene Drehung erkennen, CSS korrigieren und Hoch- sowie Querformat prüfen.
css-orientation-lockWCAG 1.3.4
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-css-orientation-lock.html
Befund verstehen
Das Querformat dreht einen Textblock zur Seite
Erkannter Befund
Das fällt auf
css-orientation-lock meldet am Dokument html eine Drehung in einer orientation-Media-Query.So ist es einzuordnen
Im Nachtprotokoll dreht die Regel für landscape den Text „Ausrichtungsmarke für die Kuppel“ um 90 Grad. Im gezeigten Querformat steht er senkrecht und überlagert Überschrift und Nachbartext. Die Markierung zeigt den betroffenen Block, während Axe den Befund dem Dokument zuordnet.
Das bedeutet es für die Nutzung
Wer sein Gerät in einer Halterung nutzt oder es nicht drehen kann, muss den seitlich stehenden Inhalt in dieser Haltung lesen. Inhalt sollte sich der gewählten Ausrichtung anpassen.
- Regel
css-orientation-lock- Referenz
- WCAG 1.3.4
Diagnose im Querformat
Viewport: 1024 × 768 CSS-Pixel
Media-Query: (orientation: landscape) aktiv
.paranal-orientation-card: transform: rotate(90deg)
Axe-Ziel: html · Axe-Auswirkung: seriousLayout anpassen oder eine Ausrichtung erzwingen?
Prüfen Sie, was die Media-Query mit dem Inhalt tatsächlich macht.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Inhalt wird seitlich gedreht | Eine orientation-Abfrage dreht lesbaren Inhalt wie die Textkarte im Beispiel. | Entfernen Sie die erzwungene Drehung. Text und Bedienung sollen in beiden Ausrichtungen nutzbar bleiben. |
| Anordnung passt sich an | Spalten, Abstände oder Bildgrößen ändern sich passend zur verfügbaren Fläche. | Behalten Sie sinnvolle Layoutanpassungen bei und prüfen Sie alle Funktionen in beiden Ausrichtungen. |
| Bestimmte Ausrichtung ist wesentlich | Die Information oder Funktion wäre ohne diese Ausrichtung grundlegend anders und nicht gleichwertig umsetzbar. | Begründen Sie die Ausnahme fachlich. Eine bevorzugte Gestaltung allein macht die Ausrichtung nicht wesentlich. |
Fundstelle ansehen
Die Drehung ist im Querformat sichtbar
Der vollständige Protokollbereich bleibt mit Überschrift, Begriffen, Eingabefeld und Übernahmeaktion sichtbar. Beide Aufnahmen verwenden denselben Querformat-Viewport.
Der orange gerahmte Textblock ragt senkrecht in den übrigen Inhalt. Das ist die tatsächliche Wirkung der vorhandenen CSS-Regel bei 1024 × 768 Pixeln; eine mobile Gerätesperre wird hier nicht simuliert.
CSS korrigieren
Die ausrichtungsabhängige Drehregel entfernen
Die vorhandene Textkarte benötigt keine erzwungene Ausrichtung. Entfernen Sie die landscape-Regel aus ihrem Stylesheet. Ohne diesen Transform bleibt der Text horizontal im normalen Dokumentfluss.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
Im Theme oder Baukasten Suchen Sie in benutzerdefiniertem CSS und den Vorlageneinstellungen nach orientation, rotate oder Ausrichtungssperren. Ändern Sie die verursachende Regel und veröffentlichen Sie die korrigierte Vorlage.
KorrekturvergleichCSS Vorher
@media (orientation: landscape) { .paranal-orientation-card { transform: rotate(90deg); transform-origin: center; } }Nachher
/* Die orientation-Media-Query entfällt. Die bestehende Karte bleibt im normalen Fluss. */ .paranal-orientation-card { display: inline-block; padding: 12px; border: 2px solid #d35f35; }Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.
Umsetzung absichern
Die gesamte Bedienung mitdrehen lassen
Nach der CSS-Korrektur prüfen Sie den Nutzerweg in beiden Ausrichtungen.
- 1
Öffnen Sie die Seite zuerst im Hochformat und danach im Querformat; testen Sie auch den Wechsel während einer Eingabe.
- 2
Prüfen Sie Texte, Formularfelder und Aktionen auf Überlagerungen und Erreichbarkeit.
- 3
Suchen Sie zusätzlich nach JavaScript-Sperren und Hinweisen, die vor dem Weiterarbeiten eine Gerätedrehung verlangen.
- 4
Belassen Sie eine vom Nutzer gewählte Gerätesperre: Die Seite muss mit der vorgegebenen Haltung zurechtkommen.
Fehlversuche vermeiden
Diese Änderungen beheben die Ursache nicht
Nur im Hochformat testen
Dort ist die landscape-Regel nicht aktiv. Ein lesbarer Text im Hochformat sagt nichts über seine Darstellung im Querformat aus.
Zum Drehen auffordern
Eine Meldung „Bitte Gerät drehen“ ersetzt den Zugang in der gewählten Haltung nicht, wenn sie den Inhalt oder die Bedienung blockiert.
Gedrehten Inhalt abschneiden
overflow: hidden kann die Überlagerung verdecken, verliert dabei aber Inhalt. Entfernen Sie die Drehung selbst.
Jede Media-Query löschen
Responsive Layoutregeln sind nicht automatisch Ausrichtungssperren. Entscheidend ist, ob Darstellung oder Bedienung eine bestimmte Haltung erzwingen.
Die Textkarte bleibt in beiden Ausrichtungen ungedreht
Nach dem Entfernen der Drehregel liest sich die Karte im selben Querformat horizontal. Der erneute Axe-Lauf liefert für css-orientation-lock am unveränderten html-Element einen Pass.
Die Verifikation bezieht sich auf diese CSS-Drehregel. Andere Fehler der Kalibrierseite und die vollständige Bedienbarkeit auf realen Geräten sind damit nicht geprüft.
Beobachtetes Ergebnis
Vorher: Axe-Verstoß am Dokument html
Nachher: Axe-Pass am selben Dokument
Querformat: transform = none
Hochformat: transform = none
Textinhalt erhaltenPrüfgrenzen kennen
Ein CSS-Befund ersetzt keinen Orientierungstest
Die Regel erkennt bestimmte ausrichtungsabhängige Drehungen in CSS; die tatsächlichen Nutzerwege benötigen weitere Prüfung.
Automatisch prüfbar
- Verdächtige Drehungen in orientation-Media-Queries erkennen
- Den Dokumentbefund mit dem betroffenen Textblock veranschaulichen
- Nach Entfernen der Regel denselben Axe-Test wiederholen
Im Kontext zu entscheiden
- Alle Funktionen in Hoch- und Querformat bedienen, einschließlich eines Wechsels im laufenden Vorgang
- Sperren durch JavaScript, Vollbildzustände oder vorgeschaltete Drehhinweise prüfen
- Beurteilen, ob eine bestimmte Ausrichtung für den konkreten Inhalt tatsächlich wesentlich ist