css-orientation-lock

Description

Do not lock content orientation to only landscape or portrait using CSS or other settings. Users should be able to view content in their preferred orientation.

Restricting orientation can prevent users with disabilities from accessing content. For example, some users mount mobile devices to wheelchairs in a fixed position. If the content is locked to a different orientation, it becomes difficult or impossible for them to use.

The css-orientation-lock rule aligns with WCAG Success Criterion 1.3.4 (Orientation), which requires that content does not restrict its view and operation to a single display orientation, unless a specific display orientation is essential.

Examples

In the following example, CSS is used to hide the main content and force a “rotation” message when the device is in landscape mode.

In the following corrected example, the CSS allows the layout to adapt to either orientation using responsive design techniques:

How to fix?

To fix violations of the css-orientation-lock rule, follow these steps:

• Identify any CSS media queries or JavaScript that restrict content visibility based on the orientation property.

• Remove styles that use transform: rotate() to force a specific orientation on the entire body or main container.

• Ensure that your layout is responsive and functions correctly in both portrait and landscape modes.

• If a specific orientation is essential (like a bank check scan or a piano app), ensure it meets the WCAG “essential” exception criteria.

Reference

• WCAG Success Criterion 1.3.4: Orientation