1.3.4: Orientation – Level AA (Added in WCAG 2.2)
High-Level Description
This criterion ensures that content is not locked into a single display orientation (portrait or landscape) unless essential. Users must be able to access and interact with content in the orientation of their device or assistive technology, such as a mobile phone or mounted tablet. This supports users with mobility impairments, low vision, or those who use fixed-position assistive devices.
Detailed Description
When it Applies:
- Mobile apps and web content that adapt to screen rotation.
- Interfaces presented on tables, phones, kiosks, or custom screens.
What’s Required:
- Do not restrict orientation to only landscape or only portrait unless:
- It's essential to the activity - piano keyboard app, game simulation, or map navigation.
- Content should be usable and complete in either orientation.
Note: It's acceptable to design responsive layouts, but users must be able to interact with the content regardless of how their device is held.
Indicators of Non-Compliance:
- Content forces landscape mode and hides or blocks functionality in portrait.
- A user is required to rotate their device or sees a "rotate screen" message.
- Buttons or controls become inaccessible when in the unsupported orientation.
- Video or images fill the screen and prevent scrolling in portrait mode.
Real-World Examples
| Scenario | Compliant | Non-Compliant |
|---|---|---|
| A user on a wheelchair mounts a tablet in portrait mode while using their Banking App | The app can rotate into portrait mode with the user able to reach all controls | The app locks to landscape orientation, making some key controls unreachable |
| Online video | The video can be watched in either orientation based on the user's preferences. | The video forces full-screen landscape mode even when the user holds the device in portrait. |
Disability Impact
| Disability Group | Without Orientation Support | With Orientation Support |
|---|---|---|
| Motor Impairments | Device may be fixed or non-rotatable | Full control without needing to reorient |
| Low Vision | Orientation may affect zoom/magnification | Preferred layout supported (e.g. larger text in portrait) |
Supporting Documentation
- WCAG 2.2 Success Criterion 1.3.4 - Orientation
- G217 – Ensuring content is not restricted to one display orientation
- Understanding Mobile Accessibility - W3C Guide
Remediation Strategies
1 - Avoid Orientation Locking
Ensure your content doesn't force one view:
< !-- Avoid meta tags or scripts that block rotation -- >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
2 - Use CSS Media Queries for Both Modes
Design layouts that adapt gracefully to either portrait or landscape mode.
@media screen and (orientation: portrait) {
/* Portrait layout adjustments */
}
@media screen and (orientation: landscape) {
/* Landscape layout adjustments */
}
3 - Test on Physical Devices
Use mobile phones and tablets with screen readers, switch control, and magnifiers to ensure content works without forced rotation.