Do not lock display orientation with CSS

WCAG 1.3.4
Orientation

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

The interface must work in both orientations unless the task literally requires one.

Why this matters and how to fix it

Why this matters

Some users cannot physically rotate their device or may have orientation lock enabled. If the UI is forced into only portrait or landscape, those users may be unable to read content, activate controls, or complete tasks.

How to fix this issue

Do not use CSS or JavaScript to force orientation. Instead, build responsive layouts that work in both orientations. Only enforce orientation if it is essential to the function (e.g., a horizon-based AR view or musical keyboard simulation).

Automated detection · Manual review recommended

Developer guidance

Orientation locking often comes from legacy designs optimized for phones or tablets. Use Flexbox, Grid, and fluid typography so layouts adapt naturally. Test key workflows in both orientations and on devices with forced-rotation accessibility settings enabled.

Code examples

Incorrect Implementation

<style>@media (orientation: portrait) { body { transform: rotate(90deg); overflow: hidden; } }</style>

Correct Implementation

<!-- Layout is responsive and works correctly in both portrait and landscape -->

Real-World Examples

Before

<div class="app" style="transform: rotate(90deg);"> <!-- Forces landscape even in portrait mode -->

After

<div class="app"> <!-- Uses responsive layout; no forced rotation -->

Manual testing

  1. 1. Open the page on a mobile or tablet device.
  2. 2. Rotate the device from portrait to landscape (or vice versa).
  3. 3. Confirm that no CSS transforms or forced layout changes distort the UI.
  4. 4. Confirm that all controls remain visible and usable in both orientations.
  5. 5. Enable system-level orientation lock and verify the UI is still operable.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance