Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Schwerwiegend · experimentelle Prüfung: ggf. manuell nachsehen

Die Website funktioniert nur in einer Bildschirmausrichtung

Die Stile der Website zwingen die Seite ins Hoch- oder Querformat. Hält man Smartphone oder Tablet anders, wird der Inhalt gedreht, abgeschnitten oder ausgeblendet.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Manche Kundinnen und Kunden können ihr Gerät nicht drehen: Es ist an einem Rollstuhl oder Ständer befestigt, oder sie halten es wegen eingeschränkter Handbeweglichkeit nur in einer Position. Funktioniert der Shop nur in der anderen Ausrichtung, sehen sie eine gedrehte oder kaputte Seite und können gar nicht kaufen.

Wen es betrifft

  • Menschen, deren Gerät fest montiert ist
  • Menschen mit eingeschränkter Hand- oder Armbeweglichkeit
  • sehbehinderte Menschen, die für größere Schrift das Querformat nutzen
  • Tablet-Nutzer mit Tastaturhülle

So beheben Sie es

Entfernen Sie CSS, das Inhalte in Media Queries mit @media (orientation: portrait) oder (orientation: landscape) dreht oder ausblendet, etwa transform: rotate(90deg) oder ein Overlay „Bitte drehen Sie Ihr Gerät“. Lassen Sie das responsive Layout beide Ausrichtungen bedienen. Sperren Sie die Ausrichtung nur, wenn es wirklich unerlässlich ist. axe stuft diese Prüfung als experimentell ein; bestätigen Sie den Befund daher, indem Sie ein echtes Smartphone drehen.

Bei Shopify

Meist stammt es aus eigenem CSS im Theme oder aus einer App, die „Gerät drehen“ anzeigt. Suchen Sie in den CSS- und Liquid-Dateien des Themes nach „orientation“ und entfernen Sie Regeln, die die Seite drehen oder ausblenden; deaktivieren Sie die entsprechende Option der App, falls vorhanden.

Bei Shoptet (CZ)

Die Templates sind in der Regel responsiv, die Ursache ist daher oft eigener Code. Prüfen Sie über die Optionen für eigenen Code in Shoptet eingefügtes CSS auf Regeln mit „orientation“ und entfernen Sie sie.

Bei PrestaShop

Meist im CSS des Themes oder in einem Mobil-Modul. Suchen Sie in den CSS-Dateien des Themes nach „orientation“ und überschreiben Sie die Regel in der eigenen CSS-Datei des Themes oder in einem Child-Theme.

Bei WooCommerce

Meist stammt es vom Theme, einem Page Builder oder einem Mobil-Plugin. Suchen Sie im CSS des Themes nach Media Queries mit „orientation“ und überschreiben Sie sie im CSS eines Child-Themes, damit Updates die Korrektur nicht rückgängig machen.

Standards

Standards
StandardAbschnitt
WCAG 2.2 1.3.4 (AA) Orientation
WCAG 2.1 1.3.4 (AA) Orientation
EN 301 549 4.1.1 9.1.3.4
EN 301 549 3.2.1 9.1.3.4
ДСТУ EN 301 549 2022 9.1.3.4

Automatische Prüfung: axe-core-Regel css-orientation-lock. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen