WCAG 1.3.4 Orientation (level AA) explained

What it asks for, in plain English

People hold phones and tablets in whichever orientation suits them, and some cannot change it at all because the device is mounted to a wheelchair or a bed frame. Your content has to work in both portrait and landscape and must not force one of them.

Working in both does not mean looking identical in both. Rearranging the layout is fine. Showing a 'please rotate your device' screen, or rotating the whole page with CSS to fake a lock, is not.

The only exception is when a particular orientation is essential to the thing itself, for example a piano keyboard app, or a cheque that is photographed in landscape so the whole thing fits.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.3.4 page has the full intent, techniques and definitions.

Who it affects

Someone with a tablet mounted on their wheelchair cannot rotate the device and simply cannot use a page that insists on landscape.

A person lying in bed using a phone one-handed holds it in portrait and is told to rotate it to watch a video.

Anyone with a phone in a car mount or on a stand has the orientation fixed by the mount, not by preference.

Example

Broken

<style>
@media (orientation: portrait) {
  main { display: none; }
  .rotate-me { display: block; }
}
</style>
<p class="rotate-me">Please rotate your device to landscape to view this page.</p>
<main>...</main>

The page hides itself in portrait and asks the person to do something they may not be able to do.

Fixed

<style>
main { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  main { grid-template-columns: 1fr 1fr; }
}
</style>
<main>...</main>

Lay the content out by available width instead. It works in either orientation, and on a desktop window of any size.

How to check it

Open the page on a phone, or in the browser's device emulator, in portrait. Use the main features.
Rotate to landscape and repeat. Everything should still be reachable and usable, even if arranged differently.
Look for any 'rotate your device' message or a page that goes blank in one orientation.
If something only works one way round, ask whether that is genuinely essential or just how it was designed.

What Websight checks for 1.3.4

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

axe-core also has a rule for 1.3.4 that Websight does not run (marked experimental or deprecated):

not run AA Do not lock the page to portrait or landscape css-orientation-lock Some sites decide they only work in landscape and use a media query to rotate the whole page 90 degrees when the phone is held upright, or show a please rotate your device overlay.

Only a person can check this reliably. A scanner can sometimes spot CSS that rotates or hides the page under an orientation media query, but locks set in script, in a video player or by an app wrapper are invisible to it, so test on a real device.

Practical tips

Write layouts against width breakpoints, not orientation media queries.
If a video or game truly needs landscape, keep the rest of the page working in portrait and let the player itself offer a full-screen landscape mode.
Check embedded third-party widgets as well; some lock orientation on their own.

1.3.1 Info and Relationships (level A)
1.3.2 Meaningful Sequence (level A)
1.3.3 Sensory Characteristics (level A)
1.3.5 Identify Input Purpose (level AA)