1.3.4 Orientation

Description

Content must not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific orientation is essential for the content. Many users with physical disabilities mount their devices in a fixed orientation and cannot rotate them. Restricting a page or application to only one orientation prevents these users from accessing and using the content.

How To Test

Open the page on a mobile device or use browser developer tools to simulate a mobile device.
Switch between portrait and landscape orientations and verify the page content remains accessible and functional in both.
Check that no content is hidden or made inoperable when orientation changes.
Inspect the CSS for @media (orientation: portrait) or @media (orientation: landscape) rules that hide or disable content.
Check for JavaScript that uses the Screen Orientation API to lock orientation.
If an orientation lock is found, assess whether the specific orientation is truly essential to the functionality.

Testing Tools

NVDA — Free screen reader for Windows. Download, install, and open Firefox to test the demo. Navigate using Tab and arrow keys, and listen to role, name, and state announcements from the page.
VoiceOver (macOS) — Built into macOS. Enable with Cmd+F5, then open Safari or Chrome to test the demo. Use VO+arrow keys to navigate and hear semantic structure announcements.
Lighthouse — Browser accessibility audit in Chrome DevTools. Open DevTools (F12), go to Lighthouse, run the audit to identify semantic and labeling issues.

Demo

A simulated mobile screen showing content locked to landscape mode. Users with devices mounted in portrait (e.g. fixed to a wheelchair) cannot access this content.

Dashboard

Sales: £48,200 · Users: 1,240 · Uptime: 99.9%

↻

Please rotate to landscape

In code: @media (orientation: portrait) { main { display: none } }

Code

Check deposit form locked to portrait. Users cannot rotate to landscape even if they need wider view to see check fields.

Mobile Check Deposit

Check number input...

Amount field...

❌ Cannot rotate
to landscape

In code: @media (orientation: landscape) { body { display: none } }

Why this fails

A check deposit form that forces portrait orientation prevents users from rotating to landscape for a better view of form fields. Users with devices mounted in fixed positions cannot access the form at all. Even if the form looks acceptable in portrait, restricting it fails the criterion because users cannot override the restriction.

Why this passes

The form works in any orientation. If the essential use case is imaging a check (which may benefit from landscape), the user has control via a toggle button or natural device rotation. The restriction is not forced by CSS or JavaScript - the layout simply adapts to the available space.

Code

Fail Explanation

A failure occurs when a web page or application forces a specific orientation using CSS or JavaScript and does not provide a way to use the content in the user's preferred orientation. For example, a banking application that locks to landscape mode, or a form that locks to portrait mode, prevents wheelchair users or others who have fixed their device in a particular orientation from completing the task. The restriction typically occurs through the CSS orientation media query combined with hiding content, or through the JavaScript Screen Orientation API.

Pass Explanation

A passing implementation allows content to reflow and function correctly in both portrait and landscape orientations. The layout adapts using responsive design techniques so that all features remain usable regardless of how the device is held. If an orientation restriction is genuinely essential - such as for a piano keyboard application or a specific game mechanic - the restriction is permissible, but such exceptions are rare.

Notes

This criterion was added in WCAG 2.1 and is particularly important for users who have mounted tablets or phones in fixed positions due to physical disabilities. The "essential" exception is intended for genuinely content-specific needs, not developer convenience.

Techniques

WCAG techniques used in this demo: G199