1.3.4 Orientation

Level: AA | Principle: Perceivable | Since: WCAG 2.1 | Automation: Partial (axe-core)

What This Means

Content must not be restricted to a single display orientation — portrait or landscape — unless a specific orientation is essential for the content to function. Users must be able to view and operate the content in whichever orientation they prefer or require.

Some users mount their devices in a fixed orientation (e.g., wheelchair-mounted tablets in landscape, or phones attached to a stand in portrait). If your site forces a specific orientation, these users are locked out. Essential exceptions include a piano keyboard app (requires landscape) or a bank check deposit (requires landscape to match the check shape).

Who This Affects

1. Users with mounted devices — wheelchair users or those with motor impairments may have devices fixed in one orientation
2. Users with low vision — they may prefer a specific orientation for readability
3. Users with situational limitations — a device in a dock or stand may be locked to one orientation
4. All mobile users — locking orientation is a frustrating usability issue for everyone

Common Pitfalls

1. CSS media query that hides content in one orientation

/* Bad: hides all content and shows a "rotate your device" message in portrait */
@media (orientation: portrait) {
  .app-content {
    display: none;
  }
  .rotate-message {
    display: block;
  }
}

2. CSS transform that forces landscape display

/* Bad: rotates the entire page 90 degrees in portrait mode */
@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    transform-origin: top left;
    width: 100vh;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 100%;
  }
}

3. JavaScript that locks orientation

// Bad: forces screen orientation via the Screen Orientation API
screen.orientation.lock('landscape');

4. Manifest restricting orientation in a PWA

{
  "name": "My App",
  "orientation": "landscape"
}

How to Fix

Design responsive layouts that work in both orientations

/* Good: layout adapts to both orientations */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

Remove orientation locks

/* Good: no orientation-based content hiding or rotation */
/* Use responsive design instead of orientation locking */
@media (orientation: portrait) {
  .sidebar {
    /* Adjust layout, don't hide content */
    grid-column: 1 / -1;
  }
}

Allow natural orientation in PWA manifests

{
  "name": "My App",
  "orientation": "any"
}

How to Test

1. Open DevTools (F12), click the device toolbar (Ctrl+Shift+M / Cmd+Shift+M), and switch between portrait and landscape orientations.
2. Verify all content is accessible and functional in both orientations, with no "rotate your device" message blocking content.
3. Inspect the CSS for @media (orientation: portrait) or @media (orientation: landscape) rules that hide content or apply transforms to force a specific orientation.
4. Check the page source or manifest for screen.orientation.lock() calls or "orientation": "landscape" (or portrait) in PWA manifests.
5. Pass: All content works in both portrait and landscape orientations with no content hidden or layout forced.
6. Fail: Content is hidden, a "rotate device" message appears, or CSS/JS forces a specific orientation.

axe-core Rules

| Rule | What It Checks | |------|---------------| | css-orientation-lock | CSS media queries must not lock display orientation by using transforms to rotate content |

Sources

1. W3C WCAG 2.2 — Understanding 1.3.4