You’ve designed your website or mobile app to work perfectly in portrait mode — but in landscape mode, you notice some issues. Some navigation options disappear with a wider screen orientation, and the text doesn’t appear in the right order. When you view a video, the user is forced to switch to a portrait orientation, which disrupts the experience. Is this a serious accessibility concern?
Unfortunately, yes. Many people prefer to use a landscape orientation to enjoy a more comfortable browsing experience. By restricting your content to portrait mode, you may be ignoring those users.
WCAG 2.1 Guidelines for Screen Orientation
The Web Content Accessibility Guidelines (WCAG) is widely considered the international standard for digital accessibility. WCAG addresses the importance of screen orientation in Success Criterion (SC) 1.3.4, “Orientation,” which states:
“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.”
In other words, supporting landscape mode is important, with few exceptions (we’ll discuss examples of those exceptions later in this article).
Another relevant criterion is WCAG 2.1 SC 1.4.10, “Reflow,” which requires that content can be presented “without a loss of information or functionality" when users enlarge text by up to 400%. Supporting reflow is also known as responsive web design. If landscape mode causes responsive design problems, those issues need to be addressed.
Related: Responsive Design and Accessibility
What if my content doesn’t support landscape mode?
The WCAG requirements for “Reflow" and “Orientation" are Level AA criteria, and failing these guidelines may impact compliance with certain accessibility laws. Depending on the nature of your content, other WCAG criteria may also apply, and you’ll need to pass all Level AA and Level A requirements to accommodate your users.
More importantly, a poor user experience will prevent people from interacting with your content — and since user experience metrics are an important factor in search engine rankings, you might miss an opportunity to expand your audience.
Screen orientation can affect layout, but shouldn’t remove important content
If you’re following the best practices of responsive design, your content may change slightly with screen orientation to improve the user experience. That’s perfectly acceptable under many circumstances.
For instance, many websites use simplified navigation menus on smaller displays, and in landscape mode, content may be reorganized for a better visual appearance. Mobile apps may provide additional controls when in landscape mode (note that these controls should still be accessible through menus in a portrait orientation).
To follow WCAG’s requirements, you don’t need to provide identical views for every orientation. However, you should ensure that components that appear in different orientations have a consistent order.
For example, your landscape orientation shouldn’t switch the arrangement of the “home" and “contact" buttons on your home page. Some people may use both landscape and portrait orientations, and rearranging important components can frustrate these users.
What if a certain display orientation is essential?
WCAG provides an exemption for essential functionality. For example, if a banking application requires users to take photos of their checks for mobile deposit, the mobile device must remain in a landscape orientation during that process — otherwise, the user couldn’t take a high-quality photo of the check. In this case, the banking app can still conform with WCAG 2.1 Level AA.
However, accessibility benefits when users can make adjustments to fit their preferences. If you decide to restrict users to a certain orientation, make sure that the orientation is truly essential.
Related: Which WCAG Success Criteria Apply to Mobile Accessibility?
Make sure your content operates with different screen orientations
Some automated accessibility audits may fail to detect orientation issues, so it’s a good idea to test your website or mobile app with different types of devices. Try accessing your content in landscape mode, then ask questions:
- Do I have access to all important controls and navigation elements?
- Can I use keyboard controls to navigate in landscape mode?
- Do videos, forms, or other interactive elements force me to change my screen orientation?
- Does the organization of the content change, and if so, can users still understand it?
Finally, remember that your goal is to provide a clean, navigable experience for all users. As such, it’s a good idea to spend time designing your landscape orientation to make use of all available space.
