Zoom, reflow & spacing

The Page Is Locked to Portrait or Landscape

The page forces one screen orientation, so people whose device is fixed in the other position must read sideways or can't use it at all.

css-orientation-lockWCAG 2.1Introduced in WCAG 2.1.Level AAAA — the Australian baseline (WCAG 2.2 AA) most laws and policies ask for.

Status: SeriousSerious — Significant friction, or information that is lost.Experimentalaxe-core has this rule, but runs it only when a team turns experimental rules on.
Owner: DesignDevTestProduct
Audit: Automated+ManualA scanner finds it; a person confirms the fix.

Experimental rule. Experimental in axe-core: it runs only when a team turns experimental rules on, so a clean default scan says nothing about it. WCAG 1.3.4 Orientation still applies.

Why it matters

Some people can't turn their device. A tablet may be mounted to a wheelchair or bed in one position. Others hold a phone sideways to make text bigger.

If your CSS rotates or locks the page, those people get content turned on its side. They may not be able to read it or tap anything.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Low-vision users (magnification)	They turn the phone to landscape for bigger text, but the page rotates against them.	High impact
Motor and dexterity	Their device is mounted in one position, so the page appears sideways and they can't turn it back.	High impact
Screen reader users	Mostly not affected — the words are still read out, though touch gestures may land in odd places.	Partial impact
Cognitive and neurodivergent users	A page that suddenly turns sideways is disorienting and hard to follow.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	Orientation has been required at WCAG Level AA since 2.1, and it stays in WCAG 2.2. Complaints under Australia's Disability Discrimination Act point to WCAG, and EN 301 549 includes it too.	High impact
Conversion	A tablet or phone user who sees a sideways page will often just leave.	Moderate impact
SEO	Search engines don't check for this. No real search benefit.	Low impact
Brand trust	A page that fights how people hold their device looks broken to everyone.	Moderate impact
Cost to fix	Usually a small CSS change. A layout built to flex is cheaper than keeping two locked versions.	Moderate impact

Fixing it in code

Don't rotate the page in portrait

Don't

@media (orientation: portrait) {
  html {
    transform: rotate(90deg);
  }
}

A screen reader says: “On a portrait screen, the whole page shows on its side.”

@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

A screen reader says: “On a portrait screen, the page reads upright with a one-column layout.”

Change the layout to fit the screen, instead of turning the content.

Fixing it in design and content

Design both orientations

Don't

Only a landscape design exists, with a note saying "Please rotate your device".

A screen reader says: “People who can't rotate their device are stuck.”

Mock up portrait and landscape for each key screen, rearranging content to fit.

A screen reader says: “The page works however the device is held.”

Everyone can use the page in the position they have.

Designer's handoff note

Design every key screen in portrait and landscape.

Only lock orientation when it is truly essential, such as a piano app or a bank cheque scan. Most content is not.

Quick test

Tool

Your phone or tablet, or the browser's device toolbar (free in Chrome and Firefox)

Duration

1 min

Checklist

Step 1: Open the page on a phone, or turn on the device toolbar in developer tools.
Step 2: View it in portrait.
Step 3: Rotate to landscape, or switch the toolbar's orientation.
Step 4: Check the content in both positions.

Pass: The content stays upright and usable in both positions.
Fail: The content turns sideways, or a message tells you to rotate the device.

Check these at the same time

Inline text spacing is locked with !important avoid-inline-spacing
The page stops people from zooming in meta-viewport
The page stops people zooming in past a low limit meta-viewport-large
A button or link is too small to tap easily target-size

What a green scan still misses

This rule is experimental and only spots CSS rotations in media queries. It can't see locks made with JavaScript, app settings or "please rotate" messages, so try both positions yourself.

Reference

Status: ExperimentalExperimental in axe-core: it runs only when a team turns experimental rules on, so a clean default scan says nothing about it. WCAG 1.3.4 Orientation still applies.
Rule ID: css-orientation-lock
Raised by: axe-core: “CSS Media queries must not lock display orientation”
WCAG: 1.3.4 Orientation (opens in a new tab) · Level AA · since WCAG 2.1
Other standards: EN 301 549 9.1.3.4 · RGAA 13.9.1
Read more: Deque University: css-orientation-lock (opens in a new tab)
Last reviewed: 16 October 2026