css-orientation-lock

CSS darf die Seite nicht auf eine einzige Ausrichtung festlegen

Prüft, dass keine @media (orientation: portrait|landscape)-Regel ein transform: rotate(...) auf die Seite anwendet, eine bekannte Technik, um die Geräteausrichtung auszuhebeln, und fragt bei jeder solchen Regel nach, die den Hauptinhalt der Seite ausblendet.

Anwendbarkeit. Jedes zugängliche Stylesheet (im selben Dokument, nicht Cross-Origin): Inline-<style>-Blöcke und bereits in document.styleSheets geladene <link>-Stylesheets desselben Ursprungs, vom Dokument übernommene (adopted) Stylesheets und die jedes offenen Shadow Root, deren Regeln mit den Elementen dieses Roots abgeglichen werden.

Erwartung. Kein @media (orientation: portrait)- oder @media (orientation: landscape)-Block setzt eine Drehung per transform/-webkit-transform/rotate um etwa 90 Grad (mod 180, also ~90 oder ~270). Das ist die bekannte Technik, um visuell eine Ausrichtung zu erzwingen, unabhängig von der tatsächlichen Ausrichtung des Geräts, und sie hebelt die Anforderung von WCAG 1.3.4 aus, dass Inhalte ihre Darstellung nicht auf eine einzige Bildschirmausrichtung beschränken, sofern diese nicht wesentlich ist. Eine solche Drehung wird an den sichtbaren Elementen beurteilt, auf die ihr Selektor passt (ACT b33eff), wobei die Sichtbarkeit ohne die Drehung selbst beurteilt wird: Sie ergibt fail, wo eines davon den Inhalt der Seite enthält (wie unten für ausgeblendete Inhalte definiert), und zu jedem anderen so gedrehten Element wird nachgefragt (cantTell): Ein Pfeil, der in der einen Ausrichtung auf ein Panel daneben und in der anderen auf eines darunter zeigt, sperrt nichts. Eine Regel, die kein sichtbares Element oder nur ein Pseudo-Element dreht, hat nichts zu beurteilen. Eine zweite Form wird nachgefragt (cantTell): ein Ausrichtungs-Media-Block, der den Inhalt der Seite mit display: none oder visibility: hidden ausblendet, die übliche Form von WCAG F100 (Inhalt in einer Ausrichtung durch eine Meldung wie „rotate your device“ ersetzt). Das ausgeblendete Element gilt als Inhalt der Seite, wenn es html oder body ist, die main-Landmark, ein Vorfahre davon oder, auf einer Seite ohne main-Landmark, ein Element, das mindestens die Hälfte des Textes im body enthält. Hat die Seite weder ein <main> noch role="main", ist ein Custom Element, dem seine ElementInternals die Rolle main geben (this.attachInternals().role), die main-Landmark. Ob die Ausrichtung wesentlich ist und ob die Seite nutzbar bleibt, entscheidet eine Person.

Beispiele

<html>
  <head>
    <title>Page title</title>
    <style>body { background: #fff; }</style>
  </head>
  <body>Hi</body>
</html>

<html>
  <head>
    <title>Page title</title>
    <style>
      @media (orientation: landscape) {
        body { transform: rotate(90deg); }
      }
    </style>
  </head>
  <body>Hi</body>
</html>

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

Quellcode ansehen