Orientation

Who this affects

Users with a device mounted to a wheelchair or a fixed stand cannot rotate it. Locking to portrait makes the content unusable for them.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<div class="rotate-nag">
  <p>Please rotate your device to portrait to use this page.</p>
</div>

<div class="app">
  <h1>Reserve a book</h1>
  <p>Search our catalogue and reserve a copy for collection.</p>
  <div class="field">
    <label for="q">Search the catalogue</label>
    <input type="search" id="q">
  </div>
  <button type="button" class="button">Search</button>
</div>

<!-- The failure is the LOCK, not the layout. Content may look different in
     each orientation - that is normal responsive design. What 1.3.4 prohibits
     is restricting the content to one orientation when the other is not
     essential. -->

<div class="app">
  <div>
    <h1>Reserve a book</h1>
    <p>Search our catalogue and reserve a copy for collection.</p>
    <div class="field">
      <label for="q">Search the catalogue</label>
      <input type="search" id="q">
    </div>
    <button type="button" class="button">Search</button>
  </div>
  <aside class="aside">
    <h2>Opening hours</h2>
    <p>Monday to Friday, 9am to 6pm.</p>
  </aside>
</div>

<!-- Who this protects: a user whose device is permanently mounted to a
     wheelchair, a desk stand or a mobility aid, and who physically cannot
     rotate it. A portrait lock makes your site unreachable for them.

     The exception is genuinely narrow - a piano keyboard app, a cheque-scanning
     camera view, or a game designed around one orientation. "It looks better"
     is not essential.

     What to look for when testing: CSS with @media (orientation: portrait)
     that hides content, a screen.orientation.lock() call in script, and an
     "orientation" field in a web app manifest. -->

How to test it

Rotate the device or resize the browser to both orientations. Content must reflow and remain usable in both. Check for CSS orientation media queries that hide content and for scripts that force rotation.

• Automated

  Scanners can flag a locked orientation in a web app manifest or a CSS transform used to force rotation, but not all approaches.

  This demo's failure is not machine-detectable. axe's css-orientation-lock rule detects one narrow technique: a CSS transform used to rotate the page inside an orientation media query. The failure shown here is different and far more common - hiding the content in one orientation and demanding the user rotate. No rule catches that, and none catches screen.orientation.lock() in script.

  Relevant axe rules:

  • css-orientation-lock

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.4.10 Reflow (Level AA)
• 1.3.3 Sensory Characteristics (Level A)

In the specification

• Understanding 1.3.4 Orientation — the W3C explanation, intent and exceptions
• 1.3.4 in the WCAG 2.2 Recommendation — the normative wording