WCAG 1.3.4 Orientation

Success criterion 1.3.4 helps people whose phone or tablet is mounted in one position — for example on a wheelchair — and people who cannot easily rotate a device. They must be able to use the site in the orientation they have. It was added in WCAG 2.1, is level AA and part of EN 301 549 (clause 9.1.3.4).

What the criterion requires

Content must not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.

That means:

• the site works and shows all content in both portrait and landscape;
• the layout may adapt (one column in portrait, two in landscape) — that is fine;
• a message like "please rotate your device" or a layout that rotates the content by 90° in one orientation fails.

Essential examples from WCAG: a bank check, a piano application, slides for a projector or television, and virtual reality content.

Typical failures on an online shop

• a product configurator or 3D viewer that shows "rotate your phone" in portrait;
• CSS that hides the checkout or the main content in landscape on small screens;
• a mobile web app wrapper that locks the whole shop to portrait;
• an image gallery that only opens in landscape.

How to check it

Automated: our checker detects CSS that locks content to one orientation, for example by rotating or hiding it inside an orientation media query (rule CSS orientation lock). Locks set in JavaScript, by a web app manifest or by a native app wrapper are not covered, so test on a device as well.

By hand: open the key pages — home, category, product, cart, checkout, account — on a phone and a tablet. Turn off rotation lock and rotate the device in each view. All content and functions must remain available and nothing should ask you to rotate.

How to fix it

• Remove CSS that rotates or hides content in @media (orientation: …) rules; use width-based breakpoints instead.
• Remove "rotate your device" overlays.
• Do not set a fixed orientation in the web app manifest unless one is truly essential.
• Design components such as galleries and configurators to work in a narrow portrait layout.

Related criteria

• 1.4.10 Reflow — content that fits narrow screens without horizontal scrolling.
• 1.4.4 Resize Text — zooming text to 200 %.
• WCAG checker — test a page of your site.

Frequently asked questions

Does my shop have to look the same in portrait and landscape?

No. The layout can change, but the content and functions must be available in both orientations. Only locking the view to one orientation, or telling users to rotate their device, fails.

When is a fixed orientation allowed?

Only when one orientation is essential. WCAG gives examples such as a bank check, a piano app, slides for a projector or TV and virtual reality content.

Can an automated tool find orientation locks?

It can find CSS that rotates or hides content based on the orientation media query. Locks done in JavaScript or in a native app need a manual test on a device.