How do I confirm that content is not restricted based on display orientation?

To comply with the WCAG Success Criteria 1.3.4: Orientation, content cannot restrict its view and functionality to a single display orientation unless it is essential to its intended functionality. Examples of display orientations include portrait (vertical) and landscape (horizonal).

One way to test if a view is restricted is to utilize the developer tools (commonly called “DevTools”) within your browser to emulate different types of displays. Then, change the display orientation to ensure that all content (aside from exceptions) adjusts accordingly.

Example

One way to test for content that is restricted to certain orientations can be done in Google Chrome by opening the developer tools via either the vertical ellipsis of the browser > “More tools” > “Developer tools” or by utilizing a secondary click and choosing “Inspect” from the menu that appears. To access the tool for changing screen orientation, select the “Toggle device toolbar” button or use the keyboard shortcut “Ctrl + Shift + M” while the DevTools are in focus.

At this point, there will now be a toolbar at the top of the page or application’s viewport. Here there will be a “Dimensions” dropdown that allows the user to select a predetermined or custom viewport as needed. Next, selecting the “Rotate” button will simulate the change in display orientation.

Finally, analyze the page to locate and identify any content that is locked to a specific orientation. This will typically look like things that do not rotate with the rest of the content.

Exceptions

Exceptions to this rule include components with functionality that relies on being in a certain orientation. Examples include:

• A piano simulator application, which must be in a horizontal (landscape) orientation to function correctly
• An application for scanning and depositing checks with a mobile device, which must be in a horizontal orientation to function correctly

Learn more

Display orientation is one of several factors that impact how well web content adjusts to user needs. For a deeper dive, explore the Adaptive Content & Other Page Requirements course from Accessible Web Academy.