Restricted screen orientation

orientation/content-hidden

WCAG success criterion: 1.3.4 (level AA)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Structure & Semantics
Default severity: high
axe-core rule: css-orientation-lock

Why we flag this

Users with fixed-mount screens (e.g. wheelchair-mounted) cannot read the page.

CSS media queries lock the orientation.

What the rule checks

Scope. Style rules inside an orientation media query that hide (display: none, visibility: hidden) or rotate content, on selectors matching an element of the page.

Expectation. One page-level review when such a rule exists: content hidden or turned in one orientation (a timetable hidden in portrait behind a rotate hint, the body rotated in portrait). Re-laying out content (grid columns) is not hiding. Pseudo-elements (breakpoint markers) and selectors matching nothing are not content. A rotation applied by script through an inline style is not a stylesheet rule and not this id's (css-orientation-lock measures it). Review, not a violation: whether the hidden content is available in the other orientation, or the orientation essential, is a human decision.

Source. WCAG 2.2 SC 1.3.4 Orientation

Detection: shared; needs dom, stylesheets.

Failing example

The check flags this for review. Corpus case visual_orientation_hide. The page may contain further findings for other rules.

visual_orientation_hide.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timetable hidden in portrait behind a rotate hint</title>
<style>
  body { color: #111111; background: #ffffff; }
  .rotate-hint { display: none; }
  @media (orientation: portrait) {
    .timetable { display: none; }
    .rotate-hint { display: block; }
  }
</style>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Regional trains</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Timetable</h1>
  <p class="rotate-hint">Please turn your device to see the timetable.</p>
  <div class="timetable">
    <table>
      <caption>Departures from Central Station</caption>
      <tr><th scope="col">Train</th><th scope="col">Time</th></tr>
      <tr><td>RE 1</td><td>08:15</td></tr>
    </table>
  </div>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

Passing example

The check reports nothing here. Corpus case visual_orientation_ok. The page may contain further findings for other rules.

visual_orientation_ok.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layout that adapts to the orientation without hiding content</title>
<style>
  body { color: #111111; background: #ffffff; }
  /* A full turn and a plain shift: no rotation remains. */
  html { transform: rotate(360deg); }
  body { transform: translateX(0); }
  .gallery { display: block; }
  @media (orientation: landscape) {
    .gallery { display: grid; grid-template-columns: 1fr 1fr; }
    /* Breakpoint marker on a pseudo-element, and a rule for an element
       this page does not have: neither hides content here. */
    body::before { content: "landscape"; display: none; }
    .promo-banner { display: none; }
  }
</style>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Photo gallery</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Gallery</h1>
  <div class="gallery">
    <p>Harbour at dawn</p>
    <p>Old town square</p>
  </div>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.