Las media queries de CSS no deben bloquear la orientación de la pantalla

Cuando una página web usa media queries de CSS como @media (orientation: portrait) o @media (orientation: landscape) para forzar el contenido a una sola orientación, impide que la página responda a la posición real del dispositivo del usuario. Esto se verifica con la regla de axe css-orientation-lock.

Por qué es importante

Muchos usuarios físicamente no pueden rotar sus dispositivos. Las personas con discapacidades motoras pueden tener su teléfono o tablet montado en una silla de ruedas, cama o escritorio en una orientación fija. Los usuarios con baja visión pueden preferir el modo horizontal para agrandar el texto, mientras que otros pueden encontrar más fácil de leer la orientación vertical. Bloquear la orientación les quita la capacidad de elegir lo que funciona mejor para ellos.

Más allá de las discapacidades motoras y visuales, el bloqueo de orientación también afecta a usuarios con discapacidades cognitivas y dislexia que pueden depender de un diseño particular para la legibilidad. Los usuarios videntes que usan teclado y que usan pantallas externas o soportes también pueden verse afectados.

Esta regla se relaciona con WCAG 2.1 Criterio de Éxito 1.3.4: Orientación (Nivel AA), que requiere que el contenido no restrinja su vista y funcionamiento a una sola orientación de pantalla a menos que una orientación específica sea esencial. Los casos de uso esenciales son raros —ejemplos incluyen una aplicación de teclado de piano, una interfaz de depósito de cheques bancarios, o una presentación de diapositivas donde la orientación es integral a la funcionalidad.

Cómo solucionarlo

1. Elimina el CSS que bloquea la orientación. Busca queries @media que usen la característica orientation combinada con estilos que efectivamente oculten o reorganicen completamente el contenido para solo una orientación (ej., establecer display: none o width: 0 en el body o contenido principal).
2. Usa diseño responsivo en su lugar. En lugar de verificar la orientación, usa media queries con min-width o max-width para adaptar tu diseño al espacio disponible. Esto naturalmente acomoda ambas orientaciones.
3. Prueba en ambas orientaciones. Rota tu dispositivo o usa las herramientas de desarrollador del navegador para simular tanto los modos vertical como horizontal. Verifica que todo el contenido permanezca visible y funcional.
4. Solo bloquea la orientación cuando sea esencial. Si tu aplicación genuinamente requiere una orientación específica para la funcionalidad principal (no solo preferencia estética), documenta la justificación. Esta es la única excepción válida.

Ejemplos

Incorrecto: bloquear contenido solo a modo vertical

Este CSS oculta el área de contenido principal cuando el dispositivo está en orientación horizontal, efectivamente forzando a los usuarios a usar el modo vertical:

<style>
  @media (orientation: landscape) {
    .content {
      display: none;
    }
    .rotate-message {
      display: block;
    }
  }
  @media (orientation: portrait) {
    .rotate-message {
      display: none;
    }
  }
</style>

<div class="content">
  <h1>Welcome to our site</h1>
  <p>This content is only visible in portrait mode.</p>
</div>
<div class="rotate-message">
  <p>Please rotate your device to portrait mode.</p>
</div>

Incorrecto: usar transform para forzar diseño vertical en horizontal

<style>
  @media (orientation: landscape) {
    body {
      transform: rotate(-90deg);
      transform-origin: top left;
      width: 100vh;
      height: 100vw;
      overflow: hidden;
      position: absolute;
    }
  }
</style>

Esto rota forzosamente toda la página, luchando contra la orientación elegida por el usuario y creando una experiencia confusa e inaccesible.

Correcto: diseño responsivo que funciona en ambas orientaciones

<style>
  .content {
    padding: 1rem;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 600px) {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>

<div class="content">
  <h1>Welcome to our site</h1>
  <div class="grid">
    <div>
      <p>Column one content.</p>
    </div>
    <div>
      <p>Column two content.</p>
    </div>
  </div>
</div>

Este enfoque usa min-width en lugar de orientation, adaptando el diseño basándose en el espacio disponible. El contenido permanece completamente accesible y legible sin importar si el dispositivo se mantiene en vertical u horizontal.

Correcto: usar queries de orientación para ajustes menores de estilo (sin bloquear)

<style>
  .hero-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  @media (orientation: landscape) {
    .hero-image {
      height: 300px;
    }
  }
</style>

<img class="hero-image" src="hero.jpg" alt="A scenic mountain landscape">

Usar media queries de orientation es aceptable cuando estás haciendo ajustes visuales menores sin ocultar o restringir el acceso al contenido. La clave es que todo el contenido y funcionalidad permanezcan disponibles en ambas orientaciones.

Learn more:

Deque Reference

Deque University - How To Fix

→