Do not lock display orientation with CSS
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.
Overview
Why this matters
Some users cannot rotate devices easily or use system orientation lock. If content works in only one orientation, critical tasks can become unusable.
How to fix this issue
Do not force portrait or landscape in CSS/JS. Build responsive layouts that remain usable in both orientations, unless a single orientation is truly essential to the activity.
Developer Guidance
Remove orientation hacks (rotation transforms, viewport locks) and solve layout issues with responsive structure instead. Validate primary journeys (login, form submit, checkout/dashboard actions) in portrait and landscape.
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 Implementation
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. Test the page on phone/tablet in portrait and landscape.
- 2. Verify core actions are available in both orientations without clipped UI.
- 3. Check for forced transforms/rotation behavior that overrides user choice.
- 4. Enable device orientation lock and confirm workflows still function.
- 5. Record any screen where orientation becomes a blocker and refactor layout.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance