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

Applicability

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

This technique relates to 1.3.4: Orientation (Failure).

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

<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;
}

/* Orientation "door slam" HTML */

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

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

Tests