css-orientation-lock

CSS must not lock the page to a single orientation

Checks that no @media (orientation: portrait|landscape) rule sets a transform: rotate(...) on the page, a known technique for defeating device orientation, and asks about any such rule that hides the page's main content.

Applies to. Any accessible (same-document, non-cross-origin) stylesheet, inline <style> blocks and same-origin <link> stylesheets already loaded into document.styleSheets, sheets adopted by the document, and those of each open shadow root, whose rules are matched against that root's elements.

Expectation. No @media (orientation: portrait) or @media (orientation: landscape) block sets a transform/-webkit-transform/rotate rotation of approximately 90 degrees (mod 180, i.e. ~90 or ~270), the well-known technique for visually forcing one orientation regardless of the device's actual orientation, which defeats WCAG 1.3.4's requirement that content not restrict its view to a single display orientation unless that orientation is essential. Such a rotation is judged on the visible elements its selector matches (ACT b33eff), visibility judged without the rotation itself: it fails where one of them holds the page's content (as defined below for hidden content), and any other element turned that way is asked about (cantTell): an arrow pointing to a panel beside it in one orientation and below it in the other locks nothing. A rule that turns no visible element, or only a pseudo-element, has nothing to judge. A second shape is asked about (cantTell): an orientation media block that hides the page's content with display: none or visibility: hidden, the usual form of WCAG F100 (content replaced by a "rotate your device" message in one orientation). The hidden element counts as the page's content when it is html or body, the main landmark, an ancestor of it, or, on a page without a main landmark, an element holding at least half of the body's text. Where the page has no <main> and no role="main", a custom element whose ElementInternals give it the main role (this.attachInternals().role) is the main landmark. Whether the orientation is essential, and whether the page stays usable, is left to a person.

Examples

<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>

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

View source