La accesibilidad web garantiza que los usuarios puedan interactuar con el contenido sin restricciones innecesarias. Sin embargo, un error común es bloquear la orientación de la pantalla en un solo modo (horizontal o vertical), lo que afecta a personas con dispositivos montados en una orientación fija, como usuarios de sillas de ruedas motorizadas.
Este problema incumple el Criterio de Conformidad 1.3.4 de WCAG 2.1 (Orientación), ya que impide a los usuarios visualizar el contenido en la orientación de su preferencia.
En este artículo, exploraremos el Fallo F97, su impacto en la accesibilidad y las soluciones adecuadas para garantizar una experiencia inclusiva.
Acerca de este fallo
El Fallo F97 ocurre cuando un sitio web o aplicación restringe el contenido a una sola orientación de pantalla, ya sea horizontal (landscape) o vertical (portrait), sin que esto sea esencial para la funcionalidad.
El criterio 1.3.4 de WCAG 2.1 establece que el contenido debe ser accesible en cualquier orientación, a menos que una orientación específica sea necesaria para su uso correcto (por ejemplo, una aplicación de realidad aumentada que requiera orientación específica).
Escenarios donde ocurre este fallo:
- Aplicaciones de noticias que solo permiten la lectura en modo vertical.
- Formularios en línea que no se ajustan correctamente en modo horizontal.
- Juegos que bloquean la pantalla en una orientación sin opción de cambio.
Ejemplos
Ejemplo incorrecto 1: Restricción de orientación con CSS
El siguiente código bloquea la vista en orientación vertical, impidiendo a los usuarios acceder al contenido en horizontal.
@media screen and (orientation: landscape) {
body {
transform: rotate(90deg);
transform-origin: center;
width: 100vh;
height: 100vw;
overflow: hidden;
}
}
🔴 Problema: Este código fuerza la rotación de la pantalla, obligando a los usuarios a cambiar la orientación de su dispositivo. Las personas con dispositivos montados en una orientación fija no podrán acceder correctamente al contenido.
Solución correcta: Permitir ambas orientaciones
@media screen and (orientation: landscape), screen and (orientation: portrait) {
body {
transform: none;
}
}
✅ ¿Qué mejora?
- Se respeta la elección del usuario.
- Se mantiene la accesibilidad para personas con necesidades específicas.
- La experiencia de usuario mejora en todos los dispositivos.
Ejemplo correcto: Solución ideal
El siguiente código permite que el contenido se ajuste de forma automática a la orientación de la pantalla sin imponer restricciones.
<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″>
✅ ¿Qué mejora?
- No se bloquea la orientación.
- Se adapta a diferentes dispositivos sin comprometer la experiencia del usuario.
- Permite a los usuarios interactuar con el contenido sin limitaciones.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Forzar la rotación del contenido con transformaciones CSS.
- Bloquear la orientación con JavaScript.
- No probar la accesibilidad en diferentes orientaciones.
Cómo evitar estos errores:
- Asegúrate de que tu contenido sea responsive y accesible en cualquier orientación.
- Evita el uso de
orientationen CSS para forzar la rotación. - Realiza pruebas en dispositivos reales para verificar el comportamiento del contenido.
Preguntas frecuentes sobre el fallo F97
¿Por qué bloquear la orientación afecta la accesibilidad?
Porque hay usuarios que tienen dispositivos fijos en una orientación específica (como personas en sillas de ruedas motorizadas o soportes de escritorio). Si el contenido solo se muestra en una orientación, estos usuarios no podrán acceder a él correctamente.
¿Cuándo es aceptable restringir la orientación de pantalla?
Cuando la orientación es esencial para la funcionalidad del contenido, como en aplicaciones de realidad aumentada o ciertos videojuegos.
¿Cómo puedo probar si mi sitio respeta la orientación?
Puedes cambiar la orientación de tu dispositivo o usar las herramientas de desarrollo en Chrome:
- Abrir DevTools (F12 o Ctrl+Shift+I).
- Seleccionar «Toggle Device Toolbar» (Ctrl+Shift+M).
- Rotar el dispositivo virtual y comprobar si el contenido se ajusta correctamente.
¿Qué pasa si mi contenido no se ajusta bien en ambas orientaciones?
Puedes usar media queries en CSS para optimizar la presentación del contenido en diferentes orientaciones sin bloquear ninguna.
¿Se puede solucionar este problema con JavaScript?
Sí, pero es mejor evitar restricciones innecesarias. Puedes detectar la orientación con JavaScript y ofrecer opciones en lugar de bloquear la visualización.
¿Qué frameworks o tecnologías ayudan a evitar este fallo?
Frameworks como Bootstrap y Tailwind CSS permiten diseñar contenido responsive sin bloquear la orientación.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F97: Fallo debido al bloqueo de la orientación en vista horizontal o vertical
- Comprender el criterio de éxito 1.3.4: Orientación
- Uso correcto de media queries en CSS
- G214: Utilizar un control para permitir el acceso a contenido en diferentes orientaciones que de otro modo estaría restringido
Pruebas y validación
Procedimiento
- Abrir la página en un navegador.
- Cambiar la orientación del dispositivo entre horizontal y vertical.
- Verificar que el contenido se muestre correctamente en ambas orientaciones.
Resultados esperados
- ✅ Si el contenido se ajusta automáticamente a ambas orientaciones, cumple con WCAG 2.1.
- ❌ Si la página bloquea la orientación, se considera un fallo F97 y debe corregirse.
Restringir la orientación de pantalla afecta la accesibilidad de usuarios con dispositivos montados en una posición fija. Para garantizar una experiencia inclusiva, es fundamental permitir ambas orientaciones y optimizar la presentación del contenido sin imponer restricciones innecesarias.
🔹 ¿Tu sitio web respeta la accesibilidad? Verifica si cumple con WCAG 2.1 y haz los ajustes necesarios.
👉 Si necesitas ayuda con la accesibilidad de tu web, contáctanos y optimiza tu contenido para todos los usuarios. 🚀