Do not lock display orientation with CSS
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Some users lock device orientation or cannot rotate the device. Forcing a single orientation can block access to content or controls.
How to fix this issue
Avoid CSS/JS that forces a specific orientation. Design responsive layouts that work in both portrait and landscape.
Developer guidance
Include orientation tests in QA and CI. Prefer responsive Grid/Flex over transforms that rotate or hide UI.
Code examples
Incorrect Implementation
<style>@media (orientation: portrait) { body { transform: rotate(90deg); overflow: hidden; } }</style>Correct Implementation
<!-- Do not lock orientation; ensure UI works in both orientations -->
Trusted by organizations across Europe working toward WCAG and EAA conformance