Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device

Metadata

css

sufficient

When to Use

This technique is applicable to Cascading Style Sheet / HTML technologies.

Description

This describes the failure condition that results when an author, having detected a device orientation that is considered undesirable, displays a message telling the user to reorient the device -- instead of the author reorienting all the content.

Detecting and responding to a user's device orientation is not itself a problem. The author decision to only offer one orientation of content is what fails the requirements of Success Criterion (SC) 1.3.4 Orientation. It is inadequate to display only a message in the detected orientation, telling users to rotate their devices (when not essential to the underlying activity). The entirety of the author-controlled content needs to be re-oriented in order to meet the SC.

There are various methods for devices to determine if the content is in landscape or portrait orientation. One of these methods involves looking at the width-to-height aspect ratio of the viewport. In other words, checking if the width is smaller or larger than the height. The CSS orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. Otherwise, orientation is landscape.

Examples

Block an orientation ("door slam") by using HTML and CSS

The following example uses HTML and CSS to show a message asking to reorient the device if in landscape.

The message will disappear if the orientation is changed to portrait. When the portrait property matches the viewport space defined via media queries, the message will disappear or vice versa. This particular example uses the CSS landscape, portrait media query properties.

<style>
/* Orientation "door slam" Styling */

@media all and (orientation: landscape) {
  .rotate { display: block; }
  .content { display: none; }
}

@media all and (orientation: portrait) {
  .rotate { display: none; }
  .content { display: block; }
}

.rotate {
  text-align: center;
  font-size: 2rem;
  margin-top: 4rem;
}
</style>

<!-- Orientation "door slam" HTML -->

<div class="rotate">Please rotate your device!</div>

<div class="content">
  ...
</div>

Working example: Show message asking to reorient device

Tests

Procedure

  1. Open the content in landscape view. Check if a message appears asking to reorient the device.
  2. Open the content in portrait view. Check if a message appears asking to reorient the device.
  3. Check if portrait or landscape view is essential for the viewing and operation of the content.

Expected Results

If check #1 or #2 is true, and check #3 is false, then this failure condition applies and content fails the Success Criterion.