Content must not lock the display orientation

Rule orientation-lock · Document, language & navigation · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Someone with a device mounted to a wheelchair cannot rotate it. CSS that counter-rotates the page (a rotate transform inside an @media orientation block) or hides it in one orientation forces a single orientation on everyone. Only inline <style> CSS is visible here — external stylesheets are not fetched (recall limitation), so a clean result is not proof of conformance.

How to fix#

Let the layout adapt to both orientations. Remove orientation-conditional rotate transforms and display:none on the page root.

Example#

<style>@media screen and (orientation: portrait) { html { transform: rotate(-90deg); transform-origin: left top; } }</style>

<style>@media screen and (orientation: portrait) { .toolbar { flex-direction: column; } }</style>

Example#

<style>@media (orientation: portrait) { body { display: none; } }</style>

<style>@media (orientation: portrait) { body { font-size: 18px; } }</style>

Example#

<style>@media (orientation: portrait) { body:not(.ready) { display: none; } }</style>

<style>@media (orientation: portrait) { body .landscape-tip { display: none; } }</style>

Only rules whose selector targets the page root itself count — hiding a descendant (body .landscape-tip) is not an orientation lock.

WCAG success criteria#

1.3.4 Orientation — Level AA#

Content must work in both portrait and landscape — never restrict the view to a single display orientation unless that orientation is essential.

Understanding 1.3.4

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Orientation