WCAG 1.3.4: Orientación

Qué significa esta regla

WCAG 1.3.4 Orientation es un criterio de Nivel AA introducido en WCAG 2.1 y mantenido en WCAG 2.2. Establece que el contenido no debe bloquearse a sí mismo en una única orientación de pantalla—ya sea vertical (retrato) u horizontal (paisaje)—a menos que esa orientación específica sea esencial para la función del contenido. En la práctica, esto significa que las páginas web y las aplicaciones basadas en la web deben responder correctamente y seguir siendo totalmente operables independientemente de si el dispositivo de la persona usuaria se sostiene en vertical u horizontal, o de si la orientación está controlada por el sistema operativo del dispositivo o por las propias preferencias de la persona usuaria.

El criterio se dirige a situaciones en las que las personas desarrolladoras usan consultas de medios CSS, JavaScript o APIs del dispositivo para restringir deliberadamente el contenido a una sola orientación. Una infracción común es mostrar un mensaje como "Please rotate your device to landscape mode" mientras se oculta o deshabilita simultáneamente todo el contenido interactivo en modo vertical. Otra infracción se produce cuando una aplicación web aplica una transformación CSS o rota forzosamente el viewport, anulando la configuración de orientación del dispositivo de la persona usuaria.

Qué se considera un cumplimiento: El contenido es accesible tanto en orientación vertical como horizontal. Todo el texto, los elementos interactivos, formularios, navegación y medios siguen siendo visibles y operables independientemente de cómo esté orientado el dispositivo. El diseño puede adaptarse—usando técnicas de diseño responsivo como CSS Flexbox, CSS Grid o consultas de medios—pero nada se elimina ni se vuelve inoperable basándose únicamente en la orientación.

Qué se considera un incumplimiento: Contenido que oculta, deshabilita o bloquea la interacción en una orientación; mensajes que instruyen a las personas usuarias a rotar su dispositivo sin proporcionar una alternativa funcional; JavaScript que escucha DeviceOrientationEvent o screen.orientation y luego bloquea o deshabilita partes de la interfaz; o CSS que usa @media (orientation: portrait) para mostrar una superposición bloqueante o display: none en contenido crítico.

La excepción de esencialidad: WCAG reconoce que cierto contenido tiene un propósito intrínsecamente específico de la orientación. Una aplicación de teclado de piano puede requerir legítimamente el modo horizontal porque un diseño vertical no puede mostrar suficientes teclas para ser musicalmente útil. Una función de depósito de cheques bancarios que depende de que la cámara capture un cheque horizontal puede requerir el modo horizontal. Una interfaz de casco de realidad virtual puede requerir una orientación fija para funcionar. Sin embargo, el listón para considerar algo "esencial" es alto: la mera conveniencia de la persona desarrolladora o la preferencia estética no califican. La excepción debe estar justificada por un requisito fundamental del propio contenido, no por una decisión de diseño.

Por qué es importante

Las restricciones de orientación afectan de forma desproporcionada a las personas con discapacidades físicas y motoras. Pensemos en una persona usuaria de silla de ruedas cuya tablet está montada en una posición vertical fija en el reposabrazos de su silla. No puede inclinar físicamente el dispositivo, por lo que cualquier contenido que requiera orientación horizontal se vuelve completamente inaccesible para ella. Esto no es un caso límite hipotético: montar dispositivos de tecnología de apoyo en orientaciones fijas es una adaptación común para personas con afecciones como parálisis cerebral, lesiones medulares, ELA o artritis grave.

Más allá de los dispositivos montados, muchas personas usuarias dependen de la función de bloqueo de orientación del sistema operativo por motivos no relacionados con la discapacidad. Una persona usuaria tumbada en la cama puede bloquear su teléfono en vertical para evitar que la pantalla cambie constantemente de orientación. Una persona con trastorno vestibular—una afección que afecta al oído interno y al equilibrio—puede encontrar desorientadores o físicamente nauseabundos los cambios bruscos de diseño causados por cambios de orientación. Obligar a estas personas a desbloquear la orientación de su dispositivo para acceder a tu contenido crea una barrera innecesaria y discriminatoria.

La accesibilidad cognitiva también es un factor. Las personas con discapacidades cognitivas suelen beneficiarse de diseños coherentes y previsibles. Una aplicación que de repente bloquea el contenido o muestra un mensaje similar a un error pidiendo que se rote el dispositivo puede resultar confusa y alarmante, especialmente para quienes pueden no entender por qué su dispositivo muestra una advertencia en lugar del contenido esperado.

Desde una perspectiva de usabilidad y de negocio, las restricciones de orientación perjudican a todas las personas usuarias. Una parte significativa del tráfico web móvil se produce en modo vertical, y restringir un sitio al modo horizontal puede provocar un abandono inmediato. Los motores de búsqueda también tienen cada vez más en cuenta la compatibilidad con dispositivos móviles y los Core Web Vitals—incluido el comportamiento estable del diseño—en sus algoritmos de clasificación, lo que significa que los problemas relacionados con la orientación pueden tener un impacto negativo medible en el rendimiento SEO y el tráfico orgánico.

A nivel mundial, aproximadamente 1.3 billion de personas viven con algún tipo de discapacidad según la Organización Mundial de la Salud. Una proporción significativa de este grupo utiliza dispositivos móviles como su medio principal o único de acceso a internet, lo que hace que la accesibilidad de la orientación móvil sea especialmente relevante.

Reglas relacionadas de Axe-core

WCAG 1.3.4 Orientation requiere pruebas manuales. No existe una regla automatizada de axe-core que detecte de forma fiable las restricciones de orientación, porque la infracción depende del comportamiento en tiempo de ejecución, la lógica de renderizado condicional y el estado físico de un dispositivo—ninguno de los cuales puede evaluarse mediante análisis estático del DOM o escaneos automatizados de páginas. Lo siguiente explica por qué la automatización se queda corta y qué deben buscar las personas que realizan pruebas manuales:

• No hay regla automatizada de axe-core (se requieren pruebas manuales): Los escáneres de accesibilidad automatizados como axe-core, Lighthouse o IBM Equal Access Checker analizan el DOM y el CSSOM en un único momento. No pueden simular que un dispositivo se rote, evaluar qué ocurre con el diseño cuando cambia screen.orientation ni determinar si un bloque CSS @media (orientation: landscape) está ocultando contenido crítico. Un escáner puede ver que todos los elementos están presentes y técnicamente visibles en la orientación que probó, sin saber que la mitad de ellos desaparecen en la orientación alternativa. Por eso WCAG 1.3.4 se clasifica como un criterio que requiere pruebas manuales: ninguna herramienta puede sustituir el hecho de rotar realmente un dispositivo físico o simular la rotación en las herramientas de desarrollo del navegador.
• Detección de bloqueo de orientación en JavaScript: Los scripts que llaman a screen.orientation.lock() o escuchan window.addEventListener('orientationchange', ...) para redirigir o deshabilitar contenido no pueden detectarse mediante análisis estático. Un linter podría marcar el uso de estas APIs en el código fuente, pero no puede determinar si el comportamiento resultante constituye una infracción de WCAG sin un juicio humano sobre si se aplica una excepción esencial.
• Superposiciones de bloqueo basadas en CSS: Una hoja de estilos puede usar @media (orientation: portrait) { .orientation-warning { display: block; } } para mostrar un mensaje de bloqueo a pantalla completa en modo vertical. Axe-core, al escanear la página en modo horizontal, nunca encontraría este elemento en un estado visible y no informaría de ningún problema. Solo las pruebas en modo vertical—o la inspección del CSS en busca de patrones de bloqueo condicionales por orientación—revelan la infracción.

Cómo hacer las pruebas

1. Ejecuta un escaneo automatizado como línea base: Abre la página en Chrome, Firefox o Edge. Usa la extensión de navegador axe DevTools o ejecuta una auditoría de accesibilidad de Lighthouse para establecer una línea base. Aunque estas herramientas no detectarán directamente las infracciones de orientación, pueden señalar problemas relacionados con el diseño responsivo, problemas con la metaetiqueta viewport o ARIA faltante que agraven los fallos de accesibilidad relacionados con la orientación. Ten en cuenta que un informe automatizado limpio no confirma el cumplimiento de 1.3.4.
2. Usa la emulación de dispositivos de las DevTools del navegador: En Chrome o Edge, abre DevTools (F12), haz clic en el icono de la barra de herramientas de dispositivo (Ctrl+Shift+M / Cmd+Shift+M) y selecciona un dispositivo móvil como iPhone 14 o Galaxy S21. Alterna entre las orientaciones vertical y horizontal usando el icono de rotación en la barra de herramientas del dispositivo. Verifica sistemáticamente que todo el contenido—navegación, encabezados, texto principal, formularios, botones, imágenes y medios—permanece visible y operable en ambas orientaciones. Busca superposiciones de bloqueo, secciones ocultas o elementos interactivos deshabilitados que aparezcan en una orientación pero no en la otra.
3. Haz pruebas en dispositivos reales: Conecta un dispositivo Android o iOS y abre la página en el navegador móvil. Rota físicamente el dispositivo entre vertical y horizontal. Confirma que el bloqueo de orientación del sistema operativo (cuando está activado) no hace que el contenido se rompa ni muestre un aviso de rotación. Haz pruebas con el bloqueo de orientación tanto activado como desactivado.
4. Pruebas con lector de pantalla y simulación de orientación: En iOS con VoiceOver activado (triple clic en el botón lateral), navega por la página en orientación vertical usando gestos de deslizamiento. Luego rota a horizontal y verifica que el orden de lectura de VoiceOver y los nombres accesibles sigan siendo correctos. En Android con TalkBack, realiza la misma prueba. Usa NVDA con Firefox en escritorio y simula la orientación mediante DevTools para verificar que el árbol de accesibilidad sea coherente en todas las orientaciones.
5. Inspecciona el CSS y JavaScript en busca de restricciones de orientación: En DevTools, abre el panel Sources o Elements y busca en la hoja de estilos las consultas de medios orientation: portrait y orientation: landscape. Revisa qué hace cada bloque: ¿oculta contenido con display: none, aplica una superposición de bloqueo o simplemente ajusta el diseño? Busca en los archivos JavaScript screen.orientation, orientationchange y screen.orientation.lock. Evalúa si los patrones encontrados bloquean la interfaz o el contenido.
6. Verifica la excepción de esencialidad: Si el sitio restringe intencionalmente la orientación, confirma que existe un caso de uso esencial documentado y justificado. La excepción debe estar impulsada por el contenido, no por la estética. Documenta tu hallazgo con una captura de pantalla y la justificación específica.

Cómo solucionarlo

Superposición de bloqueo CSS en modo vertical — Incorrecto

<!-- A full-screen overlay shown only in portrait that blocks all content -->
<style>
  .rotate-prompt {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    text-align: center;
    padding: 2rem;
  }
  @media (orientation: portrait) {
    .rotate-prompt {
      display: flex; /* blocks all underlying content */
    }
  }
</style>
<div class='rotate-prompt'>
  <p>Please rotate your device to landscape mode.</p>
</div>
<main id='app-content'>
  <!-- All application content here -->
</main>

Superposición de bloqueo CSS en modo vertical — Correcto

<!-- Remove the blocking overlay entirely. Use responsive CSS to adapt the layout instead. -->
<style>
  /* Portrait layout: stack elements vertically */
  @media (orientation: portrait) {
    .dashboard-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Landscape layout: side-by-side columns */
  @media (orientation: landscape) {
    .dashboard-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>
<main id='app-content'>
  <div class='dashboard-grid'>
    <!-- Content adapts layout but is always accessible -->
  </div>
</main>

Bloqueo de orientación con JavaScript — Incorrecto

<script>
  // Locks screen to landscape and shows an error if it fails (e.g. on iOS)
  screen.orientation.lock('landscape').catch(function() {
    document.getElementById('orientation-error').style.display = 'block';
    document.getElementById('main-content').style.display = 'none';
  });
</script>
<div id='orientation-error' style='display:none'>
  This application only works in landscape mode.
</div>
<div id='main-content'>
  <!-- Application content -->
</div>

Bloqueo de orientación con JavaScript — Correcto

<script>
  /*
    Do not lock orientation via JavaScript.
    Instead, listen for orientation changes and adapt the UI
    without hiding or disabling content.
  */
  window.addEventListener('orientationchange', function() {
    var isPortrait = window.matchMedia('(orientation: portrait)').matches;
    // Adjust layout class for styling only — never hide content
    document.body.classList.toggle('portrait-layout', isPortrait);
    document.body.classList.toggle('landscape-layout', !isPortrait);
  });
</script>
<div id='main-content'>
  <!-- All content remains visible and operable in both orientations -->
</div>

Metaetiqueta viewport que impide el cambio de orientación — Incorrecto

<!-- Some older implementations tried to fix orientation via viewport -->
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
<!--
  While 'user-scalable=no' does not directly lock orientation,
  combining it with CSS transforms that rotate the viewport
  is a known anti-pattern that creates orientation accessibility failures.
-->
<style>
  /* Anti-pattern: rotating the entire body to simulate landscape on a portrait device */
  @media (orientation: portrait) {
    body {
      transform: rotate(90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
    }
  }
</style>

Metaetiqueta viewport que impide el cambio de orientación — Correcto

<!-- Use a standard responsive viewport tag. Never rotate the body via CSS transforms. -->
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!--
  Let the browser and operating system handle orientation naturally.
  Design responsively so the content works at all viewport aspect ratios.
  Use CSS Grid and Flexbox to reflow content, not transforms.
-->

Errores comunes

• Usar @media (orientation: portrait) para aplicar display: none a menús de navegación, barras laterales o áreas de contenido principal. Cualquier consulta de medios de orientación en CSS que elimine contenido de la vista—en lugar de simplemente reposicionarlo—es una posible infracción. Audita cada consulta de medios de orientación en tu hoja de estilos para asegurarte de que solo cambia el diseño, no la disponibilidad del contenido.
• Llamar a screen.orientation.lock() en aplicaciones no esenciales. Esta Web API está pensada para juegos y casos de uso específicos de medios. Usarla en una aplicación web estándar o en un sitio de comercio electrónico para "mejorar la estética" en modo horizontal no califica como una excepción esencial y crea una infracción directa de WCAG 1.3.4.
• Mostrar una pantalla de inicio de "rotate your device" sin una alternativa accesible. Incluso si se muestra una breve sugerencia de orientación, nunca debe bloquear el acceso al contenido. Si se muestra, debe poder descartarse, no cubrir el contenido principal y presentarse como una sugerencia en lugar de un requisito.
• Suponer que las personas usuarias móviles siempre prefieren el modo horizontal para contenido de vídeo. Incrustar un reproductor de vídeo que deshabilita los controles de reproducción o el botón de reproducir en modo vertical—obligando a las personas a rotar antes de poder interactuar—viola 1.3.4 a menos que el formato de vídeo realmente no pueda mostrarse en vertical (lo cual casi nunca es cierto para el vídeo web estándar).
• Aplicar CSS transform: rotate(90deg) al <body> o a un contenedor raíz en una orientación. Esto simula el cambio de orientación en CSS en lugar de permitir que el dispositivo lo gestione de forma natural, creando diseños rotos, contenido fuera de pantalla y una grave confusión en el árbol de accesibilidad para los lectores de pantalla.
• No probar el comportamiento de orientación durante el QA porque los equipos solo prueban en navegadores de escritorio. La simulación de orientación en las DevTools de navegadores de escritorio no siempre se usa durante los ciclos estándar de QA. La orientación debe ser un elemento explícito en los planes de prueba móvil, verificado en dispositivos reales tanto iOS como Android.
• Anular el comportamiento de orientación dentro de iframes sin tener en cuenta el estado de orientación de la página principal. Widgets de terceros, mapas incrustados e iframes de pago pueden bloquear la orientación de forma independiente. Incluso si tu página cumple, alojar un iframe bloqueado hace que tu página no cumpla, a menos que la excepción esencial del iframe esté documentada.
• Usar detección de user-agent del lado del servidor para servir una versión "solo horizontal" de una página a personas usuarias móviles. Redirigir a las personas usuarias móviles a una URL separada que solo funciona en modo horizontal, sin proporcionar una alternativa compatible con vertical, es una infracción sistémica que también crea un problema de SEO y de canonización de URL.
• Aplicar restricciones de orientación solo en compilaciones de producción, haciéndolas invisibles durante las pruebas de desarrollo. Los feature flags o los frameworks de pruebas A/B a veces activan código de bloqueo de orientación solo en entornos específicos o para segmentos específicos de personas usuarias, lo que hace que la infracción se pase por alto durante las auditorías de accesibilidad previas al lanzamiento.
• Suponer que la excepción de esencialidad se aplica porque una persona diseñadora prefiere el diseño horizontal. La excepción de esencialidad es un listón legal y ético alto. Requiere que la función principal del contenido sea fundamentalmente imposible en la orientación alternativa, no simplemente que se vea mejor o que el equipo se haya quedado sin tiempo para implementar un diseño vertical responsivo.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial n.º 2025/10 de Turquía, publicada en el Boletín Oficial (Resmî Gazete) n.º 32933 el 21 de junio de 2025, establece un marco nacional integral para la accesibilidad digital. La Circular exige que las entidades cubiertas cumplan con WCAG 2.2 Nivel AA, que incluye explícitamente WCAG 1.3.4 Orientation. Esto significa que cualquier servicio digital o sitio web operado por una entidad cubierta no debe restringir el contenido a una sola orientación, reflejando la intención de la Circular de garantizar que todas las personas ciudadanas—incluidas aquellas con discapacidad—puedan acceder a los servicios digitales independientemente de cómo interactúen físicamente con sus dispositivos.

Las entidades cubiertas por la Circular y obligadas a lograr la conformidad de Nivel AA incluyen: instituciones y organismos públicos (todos los organismos gubernamentales que operan sitios web y servicios digitales), bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, empresas de telecomunicaciones con 200,000 o más abonados, plataformas de comercio electrónico, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE). Para estas entidades, las restricciones de orientación que violan 1.3.4—como portales gubernamentales que exigen acceso solo en modo horizontal o aplicaciones bancarias que se bloquean en modo vertical por motivos no esenciales—constituyen un incumplimiento directo de la normativa nacional vinculante.

El Logo de Accesibilidad (Erişilebilirlik Logosu), emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı), es una marca de certificación que indica conformidad con la norma nacional de accesibilidad. Lograr la conformidad de Nivel AA es un requisito previo para obtener este logo. Las organizaciones que buscan el Erişilebilirlik Logosu deben demostrar que sus propiedades digitales superan todos los criterios de Nivel A y Nivel AA, incluido 1.3.4. Un fallo de restricción de orientación—incluso en una sección menor de un sitio—puede poner en peligro toda la certificación.

Dado que WCAG 1.3.4 requiere pruebas manuales y no puede confirmarse solo mediante escaneos automatizados, las entidades cubiertas deben incorporar casos de prueba específicos de orientación en sus procesos formales de auditoría de accesibilidad. La documentación de los resultados de las pruebas en orientaciones vertical y horizontal en dispositivos reales debe mantenerse como parte de los registros de conformidad de accesibilidad requeridos para el cumplimiento normativo y la certificación del logo. El SDK de Accsible ayuda a las organizaciones a identificar y abordar las barreras relacionadas con la orientación como parte de un enfoque holístico para cumplir con las obligaciones de accesibilidad digital en evolución de Turquía.