Skip to main content

Content supports all orientations

ab-000121 · accessibility-wcag.understandable.orientation
Severity: lowactive

Why it matters

Users who mount phones to wheelchairs or use assistive devices may be locked into one physical orientation and cannot rotate their device. Locking an app to portrait or landscape only permanently excludes these users from the content. WCAG 2.2 SC 1.3.4 (Orientation) is a Level AA requirement: content must not restrict its view to a single display orientation unless it is essential — a piano keyboard app being the canonical example of 'essential.'

Severity rationale

Low because orientation locks are an uncommon but deliberate mistake; most apps do not restrict orientation, so scope is limited, but where it occurs it is a hard exclusion violating WCAG 2.2 SC 1.3.4 at Level AA.

Remediation

Remove any CSS or JavaScript that enforces a single orientation. Responsive layouts should work in both portrait and landscape naturally.

/* Remove orientation lock from CSS */
/* Bad: hides content in landscape */
@media (orientation: landscape) {
  body { display: none; }
}

/* Good: layout adapts to available space */
@media (max-width: 768px) {
  .sidebar { display: none; } /* hides sidebar at narrow widths, not by orientation */
}

Search the codebase for screen.orientation.lock( in JavaScript files and orientation: portrait or orientation: landscape in CSS. Each instance needs a documented justification or removal. Check public/manifest.json for an orientation field set to anything other than any.

Detection

  • ID: accessibility-wcag.understandable.orientation

  • Severity: low

  • What to look for: Enumerate every relevant item. Check for orientation lock mechanisms: CSS @media (orientation: portrait/landscape) rules that hide or break content, JavaScript screen.orientation.lock() calls, or meta viewport restrictions. The default browser behavior supports all orientations automatically.

  • Pass criteria: At least 1 of the following conditions is met. Content is usable in both portrait and landscape orientations. No orientation lock is enforced except when essential (e.g., video player). Applications with no orientation lock in CSS, JS, or meta tags pass by default.

  • Fail criteria: App explicitly locks to portrait or landscape only via CSS, JavaScript, or manifest, or content is provably unusable in one orientation due to fixed-width layouts exceeding typical viewport constraints.

  • Skip (N/A) when: The project is desktop-only with no mobile support (no viewport meta tag and no responsive CSS).

  • Detail on fail: Example: "App locks to portrait orientation. Landscape view shows content off-screen or overlapping"

  • Remediation: Use responsive design and avoid orientation locks:

    /* Good: responsive layout works in all orientations */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

    Remove any CSS or JS that locks orientation unless essential.

External references

Taxons

accessibility

History