Was ist das Ziel dieses Kriteriums?
Stell dir vor, du versuchst, dein Smartphone im Rollstuhl zu verwenden – aber es ist fest in einer Position montiert. Oder du hast Probleme mit der Handbeweglichkeit und kannst dein Tablet nicht einfach drehen. Plötzlich zeigt eine Website eine Nachricht: „Bitte drehen Sie Ihr Gerät ins Querformat.“ Frustrierend, oder?
Das Ziel von Erfolgskriterium 1.3.4 der WCAG ist es, dass Websites und Apps niemals eine bestimmte Bildschirmorientierung erzwingen. Egal ob Hoch- oder Querformat – der Content soll immer zugänglich und bedienbar bleiben. So können alle Menschen selbst entscheiden, in welcher Orientierung sie ihre Geräte nutzen möchten, ohne dabei Funktionen oder Inhalte zu verlieren.
Was fordert das Erfolgskriterium genau?
Ganz konkret verlangt WCAG 2.2 Level AA, dass deine Inhalte nicht auf eine einzige Bildschirmorientierung beschränkt werden. Das bedeutet:
- Websites müssen sowohl im Hoch- als auch im Querformat funktionieren – alle Inhalte und Funktionen sollen in beiden Orientierungen verfügbar bleiben.
- Keine automatischen Orientierungssperren – der Content darf sich nicht weigern, in einer bestimmten Ausrichtung zu funktionieren.
- Responsive Design ist Pflicht – die Benutzeroberfläche muss sich an die gewählte Orientierung anpassen.
Ausnahmen gelten nur, wenn eine bestimmte Orientierung wirklich essentiell ist. Beispiele dafür sind:
- Piano-Apps, die im Querformat mehr Tasten anzeigen können
- Banking-Apps beim Fotografieren von Schecks
- Präsentations-Slides für Projektoren
- Virtual Reality Content, wo die Orientierung technisch irrelevant ist
Bei diesen Ausnahmen muss die spezielle Orientierung aber technisch oder funktional unverzichtbar sein – nicht nur eine Design-Präferenz.
Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du bist im Rollstuhl unterwegs und dein Tablet ist fest am Rollstuhl montiert. Eine Website zeigt dir eine Nachricht: „Für die optimale Nutzung drehen Sie das Gerät bitte ins Querformat.“ Aber du kannst es nicht drehen. So geht es vielen Menschen täglich.
Flexible Orientierungsunterstützung schafft Barrierefreiheit, weil sie:
- Menschen mit eingeschränkter Beweglichkeit ermöglicht, ihre Geräte in einer festen Position zu nutzen, ohne auf Inhalte zu verzichten.
- Sehbehinderten Nutzern hilft, die für sie angenehmere Orientierung zu wählen – manche lesen lieber im Hochformat, andere benötigen das Querformat für größere Schrift.
- Älteren Menschen zugutekommt, die möglicherweise Schwierigkeiten haben, schwere Geräte zu drehen oder zu halten.
- Situative Einschränkungen berücksichtigt – etwa wenn jemand ein Gerät einhändig bedient oder in einer beengten Umgebung sitzt.
Und: Sie macht Inhalte universeller nutzbar – für alle, die ihre Geräte gerne in einer bestimmten Position verwenden, unabhängig von körperlichen Einschränkungen.
So setzt du das Kriterium erfolgreich um
Orientierungsflexibilität ist heute Standard im modernen Webdesign – aber es gibt ein paar wichtige Details zu beachten. Hier deine Roadmap für die Umsetzung:
Responsive Design richtig umsetzen:
- Verwende CSS Media Queries für verschiedene Bildschirmgrößen und -orientierungen, ohne eine davon auszuschließen.
- Teste deine Website aktiv in beiden Orientierungen – nicht nur auf verschiedenen Bildschirmgrößen.
- Stelle sicher, dass Navigation, Buttons und wichtige Inhalte in beiden Ausrichtungen erreichbar bleiben.
Technische Umsetzung:
- Vermeide CSS-Regeln wie
@media screen and (orientation: landscape), die Inhalte nur in einer Orientierung anzeigen. - Nutze flexible Layouts mit Flexbox oder CSS Grid, die sich automatisch anpassen.
- Achte darauf, dass JavaScript-basierte Funktionen in beiden Orientierungen funktionieren.
Do’s and Don’ts:
- DO: Teste regelmäßig mit echten Geräten in verschiedenen Orientierungen.
- DON’T: Zeige Nachrichten wie „Bitte drehen Sie Ihr Gerät“, es sei denn, es ist technisch unvermeidbar.
- DO: Sorge dafür, dass alle interaktiven Elemente in beiden Orientierungen gut erreichbar sind.
- DON’T: Verstecke wichtige Funktionen oder Inhalte in einer der beiden Orientierungen.
Besonderheiten bei Apps: Falls du native Apps entwickelst, achte darauf, dass die App-Einstellungen eine Orientierungssperre nicht überschreiben, es sei denn, es ist für die Funktion essentiell.
Warum dieses Erfolgskriterium für Unternehmen relevant ist
Orientierungsflexibilität klingt nach einem netten Extra – aber tatsächlich ist sie ein wichtiger Wettbewerbsvorteil und schützt vor rechtlichen Risiken.
1. Zielgruppe erweitern
Ein großer Teil der Nutzer verlässt Websites, die sich nicht an ihre bevorzugte Gerätehaltung anpassen. Mit flexiblen Layouts erreichst du Menschen mit Mobilitätseinschränkungen, ältere Nutzer und alle, die ihre Geräte aus persönlichen oder situativen Gründen in einer bestimmten Orientierung nutzen.
2. Mobile-First ist heute Standard
Da über 60% des Web-Traffics von Mobilgeräten kommt, ist Orientierungsflexibilität kein Nice-to-Have mehr, sondern Business-Standard. Nutzer erwarten, dass Websites in jeder Orientierung perfekt funktionieren – wer das nicht bietet, verliert Kunden.
3. Conversion-Rate steigern
Studien zeigen: Nutzer bleiben länger auf Websites, die sich nahtlos an ihre Präferenzen anpassen. Eine intuitive, orientierungsflexible Benutzeroberfläche reduziert Abbruchraten und verbessert die Nutzererfahrung erheblich.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
Das Erfolgskriterium im Wortlaut der W3
Success Criterion 1.3.4 Orientation
(Level AA)
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Examples where a particular display orientation may be essential are a bank check, a piano application, slides for a projector or television, or virtual reality content where content is not necessarily restricted to landscape or portrait display orientation.