Users must be able to view and operate content in both portrait and landscape orientations unless a particular orientation is essential. Orientation is considered locked when a website hides content, blocks interaction, or disables functionality based on whether a device is held vertically (portrait) or horizontally (landscape).
Locking orientation through CSS or scripting prevents many users, especially those who cannot physically rotate their device, from accessing content comfortably and independently.
WCAG Success Criterion
This requirement corresponds to Success Criterion 1.3.4 Orientation (Level AA).
Content must not restrict its view and functionality to a single display orientation, such as portrait or landscape, unless a specific orientation is essential for the content or functionality.
What Proper Orientation Support Looks Like
Content satisfies this requirement when:
- The page displays and functions correctly in both portrait and landscape
- Rotating the device does not hide content or disable controls
- CSS media queries are used to adapt the layout, not to block orientations
- All functionality remains available regardless of device rotation
Orientation restriction is allowed only when orientation is essential, such as:
- A piano or musical keyboard simulation that requires landscape width
- A VR or AR experience tied to device orientation
- A physical activity app that must align with external equipment
What “Locking Orientation” Means in Practice
Orientation is effectively locked when authors:
- Hide content in one orientation
- Display blocking overlays like “Rotate your device” messages
- Disable buttons or inputs based on orientation
- Trap keyboard or touch focus when orientation changes
These techniques prevent users from choosing how they view and interact with content.
Why This Matters
Not all users can rotate their device. Some rely on:
- Mounted phones (wheelchairs, hospital beds, car dashboards)
- Switch access or head-tracking systems
- External keyboards or controllers
- Assistive technologies that do not convey or depend on device rotation
Assistive technologies rely on authors not blocking content when orientation changes. They cannot compensate for interfaces that hide or disable functionality based on rotation.
When orientation is locked, users may be unable to:
- Read content comfortably
- Access controls or complete tasks
- Navigate forms or reach critical functionality
Supporting both orientations preserves user choice, independence, and accessibility.
Examples
Fails when
A page forces landscape mode using CSS:
@media screen and (orientation: portrait) {
body {
display: none;
}
}Users who cannot rotate their device are completely blocked.
Other common failures include:
- Full-screen overlays that block interaction in one orientation
- Disabled form controls when the device is rotated
- Messages that instruct users to rotate without providing access otherwise
Passes when
A page uses responsive layouts that adapt naturally to orientation changes. No content or functionality is hidden when the device rotates.
Passes (Essential Orientation)
A racing game requires landscape mode because the field of view and controls cannot function meaningfully in portrait. Orientation restriction is permitted because it is essential to the experience.
What Is Not Considered Essential
Orientation is not essential simply because:
- The layout looks better in one orientation
- The interface is dense or complex
- Tables or dashboards are hard to design responsively
- Development time is limited
- Designers prefer a specific presentation
These are design constraints, not accessibility justifications.
Common Techniques to Meet This Rule
To support orientation flexibility:
- Do not use CSS or scripting to hide or disable content based on orientation
- Design responsive layouts that adapt to both portrait and landscape
- Ensure forms, navigation, and interactive components remain usable in both views
- Test orientation changes without relying on “rotate device” instructions
Who Is Affected
Incorrect orientation handling impacts:
- Users with mobility impairments
- Users who mount devices in fixed positions
- Users relying on assistive technologies or external controls
- Anyone who prefers a specific orientation for comfort or readability
The Algorithm
- Check whether content blocks or disables functionality in portrait or landscape
- If so, determine whether orientation is truly essential to the content’s purpose
- If the same functionality could work in both orientations, the restriction fails
Wrapping Up
Display orientation must never be locked for convenience or aesthetics. Users must be free to choose how they view and operate content without losing access to information or functionality.
When orientation changes are handled flexibly and not used as a gate, content remains accessible to users of all mobility levels, device setups, and assistive technologies.
