Fallo común WCAG 2.2

F100Pedir que se gire el móvil en lugar de adaptar el contenido

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.3.4 debido a mostrar un mensaje que pide al usuario que cambie la orientación del dispositivo

En pocas palabras

El error consiste en mostrar un aviso del tipo «Gire su dispositivo» cuando la pantalla está en horizontal o en vertical, en lugar de mostrar el contenido. La web debe funcionar en las dos orientaciones, salvo que una de ellas sea imprescindible para la tarea.

Por qué es importante

Muchas personas no pueden girar la pantalla. Por ejemplo, quien lleva la tableta sujeta a la silla de ruedas o a un soporte fijo, o quien tiene poca movilidad en las manos.

Si la web solo muestra «Gire su dispositivo», esa persona se queda fuera. No puede pedir la cita, leer la noticia ni terminar la compra.

Cómo evitarlo

Diseñe la página para que se adapte a horizontal y a vertical. Use un diseño adaptable, que se reorganiza según el tamaño de la pantalla.
Puede detectar la orientación con la consulta de medios orientation de CSS. Úsela solo para recolocar el contenido, nunca para ocultarlo.
No muestre avisos que tapen o sustituyan la página según la orientación.
Si quiere recomendar una orientación, hágalo con un aviso que no impida seguir usando la página.
Fije una sola orientación solo si es imprescindible para la tarea. Es algo muy poco frecuente.

Cómo comprobarlo

Abrir la página en un móvil o una tableta en vertical y ver si aparece un aviso que pida girar el dispositivo.
Girar el dispositivo a horizontal y repetir la revisión.
En el ordenador, se puede simular con las herramientas del navegador (F12, modo dispositivo) y su botón de girar.
Si en alguna orientación solo se ve el aviso y no el contenido, y esa orientación no es imprescindible, hay fallo.

Ejemplo

Código incorrecto: en horizontal se oculta la página y solo se ve un aviso.

<style>
  .girar { display: none; }
  @media (orientation: landscape) {
    main { display: none; }
    .girar { display: block; }
  }
</style>
<p class="girar">Gire su dispositivo para ver esta página.</p>
<main>…</main>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica F100 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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

Bloquear una orientación («portazo») usando HTML y CSS

El siguiente ejemplo usa HTML y CSS para mostrar un mensaje que pide cambiar la orientación del dispositivo si está en landscape.

El mensaje desaparecerá si la orientación cambia a portrait. Cuando la propiedad portrait coincide con el espacio de la ventana gráfica definido mediante las consultas de medios (media queries), el mensaje desaparece, o viceversa. Este ejemplo concreto usa las propiedades de consulta de medios landscape y portrait de CSS.

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

Ejemplo práctico: Mostrar un mensaje que pide cambiar la orientación del dispositivo

Pruebas

Procedimiento

Abrir el contenido en vista horizontal. Comprobar si aparece un mensaje que pide cambiar la orientación del dispositivo.
Abrir el contenido en vista vertical. Comprobar si aparece un mensaje que pide cambiar la orientación del dispositivo.
Comprobar si la vista vertical u horizontal es esencial para la visualización y el funcionamiento del contenido.

Resultados esperados

Si la comprobación n.º 1 o la n.º 2 es verdadera, y la comprobación n.º 3 es falsa, entonces se da esta condición de fallo y el contenido falla el criterio de conformidad.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F100 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.