# 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.