missing-element-orientation

Description

You must ensure that elements remain present and functional when the device orientation changes between portrait and landscape. This rule supports users who may have their devices mounted in a fixed orientation, such as on a power wheelchair, preventing them from rotating the device. It also benefits users with low vision who might prefer a specific orientation to increase text size.

The missing-element-orientation 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 for its function.

Examples

In the following incorrect example, a navigation menu becomes hidden or unusable when the device changes from portrait to landscape orientation. This violates the missing-element-orientation rule because a critical element is no longer present and functional.

In the following corrected example, the navigation menu adapts to different orientations, remaining present and functional by using a responsive design approach with flexible widths and media queries for layout adjustments.

How to fix?

To fix violations of the missing-element-orientation rule, follow these steps:

• Test in multiple orientations: Thoroughly test your website or application in both portrait and landscape orientations on various devices and screen sizes.
• Employ responsive design: Use flexible layouts, responsive images, and CSS media queries to ensure content adapts gracefully to different orientations. Avoid fixed-width layouts that might break.
• Ensure functionality: Verify that all interactive elements, such as buttons, forms, and navigation menus, remain accessible and functional in all supported orientations.
• Prevent content cutoff: Check that no essential content is hidden, truncated, or requires horizontal scrolling (unless the content itself is a wide data table or image that legitimately requires it).
• Justify exceptions: If a specific display orientation is truly essential for your content’s function (e.g., a piano app or a check deposit feature), clearly communicate this to users and provide alternative means to complete tasks if possible.

Reference

WCAG Success Criterion 1.3.4: Orientation