F100Fallo del criterio de conformidad 1.3.4 debido a mostrar un mensaje que pide al usuario que cambie la orientación del dispositivo

Aplicabilidad

Esta técnica se aplica a las tecnologías de hojas de estilo en cascada (CSS) y HTML.

Descripción

Este documento describe la condición de fallo que se produce cuando un autor, tras detectar una orientación del dispositivo que considera no deseable, muestra un mensaje que indica al usuario que cambie la orientación del dispositivo, en lugar de reorientar todo el contenido.

Detectar la orientación del dispositivo del usuario y responder a ella no es un problema en sí mismo. Lo que incumple los requisitos del criterio de conformidad 1.3.4 Orientación de la pantalla es la decisión del autor de ofrecer el contenido en una sola orientación. No basta con mostrar únicamente un mensaje en la orientación detectada que indique a los usuarios que giren sus dispositivos (cuando no sea esencial para la actividad subyacente). Para cumplir el criterio de conformidad es necesario reorientar la totalidad del contenido controlado por el autor.

Existen varios métodos para que los dispositivos determinen si el contenido está en orientación horizontal o vertical. Uno de ellos consiste en observar la relación de aspecto entre anchura y altura de la ventana gráfica (viewport). Dicho de otro modo, comprobar si la anchura es menor o mayor que la altura. La característica de medios orientation de CSS es portrait cuando el valor de la característica de medios height es mayor o igual que el valor de la característica de medios width. En caso contrario, orientation es landscape.

Ejemplos

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

Pruebas