Rule ID: ace-meta-orientation-lock

Ensure content is not locked to a specific display orientation

WCAG 2.1 (AA) 1.3.4: Orientation Mobility Low Vision Legal Risk

What This Rule Checks

Some users mount their devices in a fixed orientation due to physical disabilities. CSS media queries that lock content to portrait or landscape mode prevent these users from accessing the content. Content must be operable in all orientations unless a specific orientation is essential.

Who Is Affected

This issue primarily affects: Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.

Why This Matters

Some users have their devices mounted in a fixed orientation due to physical disabilities. Locking content to one orientation makes it unusable for these users. WCAG 1.3.4 (Orientation) is a Level AA requirement in WCAG 2.1.

How to Fix

Remove CSS rules that use transform: rotate() within orientation media queries to force a specific layout. Ensure the page renders correctly in both portrait and landscape modes. Only lock orientation if essential to the content (e.g., a piano app).

Code Examples

Incorrect Markup Solutions:

Code example

/* Forces landscape display */
@media (orientation: portrait) {
  html {
    transform: rotate(-90deg);
  }
}

Copy

Correct Markup Solutions:

Code example

/* Adapts layout for both orientations */
@media (orientation: landscape) {
  .sidebar {
    float: left;
    width: 250px;
  }
}

@media (orientation: portrait) {
  .sidebar {
    width: 100%;
  }
}

Copy

Common Mistakes to Avoid

Using CSS transform: rotate() to force a specific orientation.
Not testing content in both portrait and landscape modes.
Assuming all users can physically rotate their device.

Tip: Page-level metadata and settings affect the entire browsing experience. Language declarations, viewport settings, and page titles are foundational to accessibility and affect every user on every page load.

Related WCAG Criteria

1.3.4: Orientation