WCAG 2.2 Guideline “1.3.4 Orientation” Level AA

Introduction

WCAG 2.2’s “1.3.4 Orientation” requires that content should not be restricted to a specific screen orientation (portrait or landscape) unless it is essential to the function. For example, a game or a graphic editing tool that inherently requires landscape orientation is exempt from this guideline.

This article provides a detailed explanation, aimed at beginners, on how to implement this guideline using HTML, CSS, and JavaScript.

1. What Does Screen Orientation Restriction Mean?

Many websites and apps are designed with a specific orientation (portrait or landscape) in mind. However, restricting orientation can lead to the following issues:

• Users unable to change device orientation face accessibility barriers.
• Difficulties in operation for those using fixed devices like wheelchairs or stationary terminals.
• Prevents users from choosing their preferred mode of operation.

Exceptions:

• Content that requires a specific orientation (e.g., video games, sheet music display apps).

2. Requirements and Implementation of the Guideline

a. Avoid Fixing Orientation

Avoid configurations in CSS or JavaScript that lock the screen orientation.

Poor Example

<style>
  body {
    transform: rotate(-90deg);
    overflow: hidden;
  }
</style>

This example fixes the content in landscape mode, making it unusable in portrait mode.

Improved Example

Do not restrict the screen orientation, enabling usability in both portrait and landscape modes.

<p>This content can be used in both portrait and landscape modes.</p>

b. Handling Content That Requires Specific Orientation

If specific orientation is necessary, provide clear alternatives or instructions.

Example of Requirement (For a Game)

<p>This game works only in landscape mode. Please rotate your device to landscape.</p>

Providing Users with Options

Use JavaScript to detect orientation and prompt users to switch or offer an alternative.

JavaScript Example

<script>
  window.addEventListener("orientationchange", () => {
    const orientation = screen.orientation.type;
    const message = document.getElementById("orientationMessage");
    if (orientation.includes("portrait")) {
      message.textContent = "This content works best in landscape mode.";
    } else {
      message.textContent = "";
    }
  });
</script>

<div id="orientationMessage"></div>
<p>This content works best in landscape mode but is also usable in portrait mode.</p>

c. Applying Responsive Design with CSS

Use CSS to create layouts that adapt to both portrait and landscape orientations.

CSS Example

@media (orientation: portrait) {
  body {
    background-color: lightblue;
  }
  p {
    font-size: 16px;
  }
}

@media (orientation: landscape) {
  body {
    background-color: lightgreen;
  }
  p {
    font-size: 20px;
  }
}

This code changes the background color and font size based on device orientation.

3. Common Failures and Their Solutions

a. Fixing Orientation to Landscape or Portrait

Failure Example

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=landscape">

This restricts the content to landscape mode, limiting user freedom.

Solution Avoid fixing the orientation and ensure usability in both modes.

<meta name="viewport" content="width=device-width, initial-scale=1">

b. Messages That Force Orientation

Failure Example

<p>This content cannot be used in portrait mode. Please switch to landscape.</p>

Solution Suggest orientation changes or provide alternative content.

<p>Landscape mode is recommended, but this content is also accessible in portrait mode.</p>

4. Accessibility Benefits

By following this guideline, you can accommodate:

• Users who cannot change device orientation: Fixed devices like wheelchairs still allow content access.
• Users who prefer their own operational choices: Switching freely between portrait and landscape enhances usability.
• Users in diverse environments: Flexible layouts ensure comfortable use across various devices.

Conclusion

WCAG 2.2’s “1.3.4 Orientation” emphasizes that content should not be locked to a specific orientation.

• Use CSS and JavaScript to create responsive designs that work in both portrait and landscape modes.
• When a specific orientation is necessary, provide alternatives or instructions to prevent confusion.

By implementing this guideline, you can create accessible web content that works on any device or in any situation!

We have released UUU Web Accessibility, which makes it easy to adopt web accessibility. If you’re interested in improving accessibility, please check out the details!