WCAG (Level AA) SC 1.3.4 Orientation

WCAG (Level AA) SC 1.3.4 Orientation (w3.org)

Issue description

WCAG 1.3.4, “Orientation” is about ensuring that users can view and interact with web content in any display orientation (portrait or landscape) without losing information or functionality. This is important because:

Accessibility needs: Some users with disabilities may have difficulty physically rotating their devices. For example, someone using a wheelchair mount might have their device fixed in one orientation.
Situational limitations: Users might be in situations where rotating their device is impractical, like when holding onto a handrail on public transport.
User preferences: Some users simply prefer to use their devices in a specific orientation.

Some websites and applications restrict content to a single display orientation. This can happen when:

Fixed layouts: The layout is designed only for portrait or landscape mode, and elements become inaccessible or cut off when the device is rotated.
Forced orientation: The website forces the device into a specific orientation, preventing users from choosing their preferred view.
Loss of functionality: Some features or content might only be available in one orientation.

When content is restricted to a single orientation, it can exclude users who cannot rotate their devices or prefer a different orientation. This limits their access to information and functionality.

This guideline ensures that users have the flexibility to view and interact with content in any orientation that suits their needs and preferences. It promotes inclusivity and provides a better user experience for everyone.

Who this issue impacts

Follow the links for additional information on user impairments:

Suggestions for remediation

Remediating WCAG 1.3.4, “Orientation” involves ensuring that your website or application can be used in both portrait and landscape orientations without loss of information or functionality. Here’s how:

Responsive design

Fluid layouts: Use CSS techniques like relative units (percentages, ems) instead of fixed widths for layout, font sizes, and spacing. This allows content to adapt to different screen sizes and orientations.
Flexible images: Use max-width: 100% and height: auto for images to prevent them from overflowing their containers when the orientation changes. Consider using the element or srcset attribute for responsive images.
Media queries: Utilize media queries in CSS to adjust styles based on screen orientation. This allows you to optimize the layout for both portrait and landscape modes.

Avoid forced orientation

Don’t lock orientation: Do not use JavaScript or other methods to force the device into a specific orientation. Allow users to choose their preferred view.

Test in both orientations

Thorough testing: Test your website or application thoroughly in both portrait and landscape orientations on different devices.
Check for accessibility: Ensure all content, functionality, and interactive elements remain accessible and usable in both orientations.
Identify and fix issues: Address any issues where content is cut off, overlaps, or becomes unusable when the orientation changes.

Consider user needs

Provide clear instructions: If specific interactions or content require a certain orientation, provide clear instructions to users.
Offer alternatives: If some functionality is truly only available in one orientation, consider providing alternative ways to access that functionality in the other orientation.

Example

If you have a website with a fixed-width layout that breaks in landscape mode, you can:

Use a fluid layout: Change the fixed widths to percentages or use a flexible grid layout.
Adjust with media queries: Use media queries to adjust font sizes, spacing, and element positioning for landscape orientation.

By implementing these techniques, you can ensure that your website or application is accessible and usable in any orientation, providing a better experience for all users.