Las media queries de CSS no deben bloquear la orientación de 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 mediante la regla de axe css-orientation-lock.

Por qué es importante

Muchos usuarios no pueden rotar físicamente 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 ampliar el texto, mientras que otros pueden encontrar más fácil leer en vertical. Bloquear la orientación elimina su 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 con pantallas externas o soportes también pueden verse afectados.

Esta regla se relaciona con el Criterio de Conformidad 1.3.4: Orientación de WCAG 2.1 (Nivel AA), que requiere que el contenido no restrinja su vista y operación 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 pantalla de diapositivas de presentación donde la orientación es integral para la funcionalidad.

Cómo solucionarlo

1. Elimina el CSS que bloquea 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 orientación, usa media queries de min-width o max-width para adaptar tu diseño al espacio disponible. Esto acomoda naturalmente 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 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 vertical

Este CSS oculta el área de contenido principal cuando el dispositivo está en orientación horizontal, forzando efectivamente 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 forzadamente 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 basado en el espacio disponible. El contenido permanece completamente accesible y legible ya sea que el dispositivo se sostenga 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

→