WCAG Principle: Perceivable
Guideline 1.3: Adaptable (Create content that can be presented in different ways without losing information or structure)
Conformance Level: AA (Recommended Requirement)
What is Success Criterion 1.3.4?
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape unless a specific display orientation is essential.
Websites and applications should not be limited to only landscape (horizontal) or portrait (vertical) view unless absolutely necessary. Exceptions to this rule are situations where the content could only be understood in a particular orientation or where the technology restricts the possible orientations. Examples are in a messaging app, a piano-type application, projector slides and television or virtual reality content.
How does it make your website accessible?
Some users prefer to view web content a certain way or may have visual or physical impairments that make this necessary. Giving users the choice between portrait or landscape orientations helps them adapt page views to suit their needs.
Who benefits?
- People with low-vision impairments
- People with physical or dexterity limitations
How to Meet Success Criterion 2.5.3
Common mistakes:
- Users are restricted to viewing web content in only one orientation because no other option is provided.
- When the website detects an undesirable orientation for the device, it displays a message that suggests the user reorient the device instead of reorienting all content.
How to fix mistakes:
- Use CSS to enable both portrait and landscape orientations.
- Provide a control button to allow users to change the orientation of a locked page.
How to test if you’ve met compliance:
If the device’s orientation does not change when it is rotated:
- Ensure that the user interface includes a control for adjusting the orientation of the content.
- Verify that the orientation of the content changes when the control is enabled.
- Check that the content retains its meaning and function when viewed in either portrait and landscape orientations.
Bad and Good Examples (With Developer Code)
BAD Code Snippet
.orientation {
height: 100vh;
}
@media screen and (orientation: landscape) {
.orientation {
width: 100vw;
height: auto;
}
}
In this CSS, we use a container with a class of .orientation that sets its height to 100vh to make it fill the entire viewport. When the device is in landscape orientation, we change the width to 100vw and height to auto to make the content adapt to the new orientation. However, this approach doesn’t ensure that the content retains its meaning and function in both portrait and landscape orientations and may lead to content becoming distorted or unreadable.
Good Code Snippet
.orientation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
@media screen and (orientation: landscape) {
.orientation {
flex-direction: row;
}
}
.orientation img {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
In this CSS, we use a container with a class of .orientation that uses flexbox to center and vertically align its content. When the device is in landscape orientation, we change the flex-direction property to row to make the content adapt to the new orientation. Additionally, we use the max-width property on images to ensure that they don’t exceed their container’s width and the height property is set to auto to maintain the aspect ratio of the image.
Frequently Asked Questions
What is Success Criterion 1.3.4 of the WCAG 2.1?
Success Criterion 1.3.4 of the WCAG 2.1 requires that content can be presented in different orientations, such as portrait or landscape mode, without losing information or functionality.
What are some common barriers that users may encounter if a website does not meet this criterion?
Common barriers that users may encounter if a website does not meet this criterion include information being cut off or truncated, difficulty navigating the site, or issues with interactive elements not functioning properly in different device orientations.
What are the consequences of not meeting this criterion?
The consequences of not meeting this criterion include access barriers for users who rely on specific device orientations. This can result in legal liabilities and reputational damage for the website owner.
Is it possible to meet this criterion without sacrificing the design of my website?
Yes, it is possible to meet this criterion while maintaining the design of your website. Techniques such as responsive and accessible graphic design and fluid layouts can help ensure that your website adapts to different device orientations while preserving the visual design.
