
1.3.4: Orientation
The Orientation guideline requires that content can be displayed in both portrait and landscape views unless a specific display orientation is essential. This ensures that users who have their devices locked in a particular orientation or those using assistive technology can still access the content effectively. The goal is to provide flexibility and enhance the usability of web content regardless of the device orientation.
Importance of 1.3.4: Orientation Success Criterion
Orientation is a critical aspect of web accessibility because it addresses the needs of users who may not be able to easily change their device's orientation. For example, some users with motor impairments may lock their device orientation to avoid accidental rotation. Others may use mounted devices that cannot be easily turned. By ensuring content works well in both orientations, we enhance accessibility for a broader range of users, including those with disabilities, elderly users, and individuals in unique situational contexts. This flexibility contributes to an inclusive web environment, providing equal access to information and functionality for everyone.
Primary Use Cases and Requirements Under Guideline 1.3.4: Orientation (Level AA)
Elderly Users
Scenario: An elderly user has limited dexterity and locks their tablet in portrait mode to prevent accidental changes.
Example: A news website that automatically adjusts its layout to fit both portrait and landscape modes ensures the user can read articles comfortably.
Implementation:
@media (orientation: landscape) {
.content {
/* Styles for landscape mode */
}
}
@media (orientation: portrait) {
.content {
/* Styles for portrait mode */
}
}
Wheelchair Users
Scenario: A wheelchair user mounts their phone in a fixed landscape orientation on their wheelchair.
Example: A navigation app that adjusts its interface to landscape mode allows the user to input destinations and view maps without needing to change the device orientation.
Implementation:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 auto;
min-width: 300px; /* Ensures a minimum width suitable for both orientations */
}
Users with Motor Disabilities
Scenario: A user with a motor disability relies on a stand to keep their tablet in a stable landscape position.
Example: An online banking app that works seamlessly in landscape mode allows the user to manage their finances without adjusting their device.
Implementation:
/* Test your website on various devices and orientations */
Situational Limitations
Scenario: A chef follows a recipe on a tablet placed in landscape mode on a kitchen counter.
Example: A cooking website that supports both orientations ensures the chef can easily read instructions and view images without repositioning the tablet.
Implementation:
/* Avoid using fixed positioning for critical content elements */