La accesibilidad web garantiza que los usuarios puedan acceder al contenido sin importar el dispositivo o la orientación en la que lo utilicen. Sin embargo, algunas páginas restringen la visualización de contenido a una sola orientación (horizontal o vertical) y muestran un mensaje exigiendo al usuario que rote su dispositivo.
Este fallo afecta principalmente a personas con dispositivos montados en una orientación fija, como aquellos en sillas de ruedas motorizadas o estaciones de trabajo con soportes ajustables. Según las WCAG 2.1, esto incumple el Criterio de Conformidad 1.3.4: «Orientación», ya que no permite que el contenido sea accesible en ambas vistas, salvo que sea estrictamente necesario (por ejemplo, una app de nivel de burbuja para medir inclinación).
Acerca de este fallo
Este fallo ocurre cuando un sitio web o aplicación detecta la orientación del dispositivo del usuario y muestra un mensaje solicitando cambiar la orientación en lugar de adaptar el contenido.
Impacto en la accesibilidad:
- Personas con discapacidades motoras: Si su dispositivo está fijo en una orientación, no podrán acceder al contenido.
- Usuarios con baja visión: Algunos dispositivos usan soportes de aumento en una orientación específica.
- Personas con pantallas rotas o dañadas: No pueden cambiar de orientación y quedan bloqueadas.
Si el contenido no necesita estar en una orientación específica para funcionar, este fallo debe corregirse para garantizar el cumplimiento de WCAG 2.1.
Ejemplos
Ejemplo incorrecto 1: Bloqueo de orientación con CSS y HTML
En este código, si el usuario está en orientación horizontal, solo verá el mensaje «Por favor, gira tu dispositivo», impidiendo el acceso al contenido.
@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;
}
<div class=»rotate»>Por favor, gira tu dispositivo</div>
<div class=»content»>
<p>Este es el contenido principal.</p>
</div>
🔴 Problema:
- Se oculta el contenido en función de la orientación del dispositivo.
- No se adapta la información para ambas vistas.
- No se ofrece una solución para usuarios que no pueden cambiar la orientación.
Solución correcta: Diseño adaptable a todas las orientaciones
En lugar de bloquear el contenido, se debe aplicar un diseño responsivo que permita la correcta visualización en cualquier orientación.
.content {
display: block;
font-size: 1.2rem;
padding: 1rem;
}
@media (max-width: 768px) {
.content {
font-size: 1rem;
}
}
<div class=»content»>
<p>Este contenido se ajusta a cualquier orientación de pantalla.</p>
</div>
✅ ¿Qué mejora?:
- El contenido se adapta dinámicamente a la orientación sin restricciones.
- Se usa CSS responsivo en lugar de bloquear la vista.
- Se permite a los usuarios interactuar con el contenido en cualquier orientación.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Bloquear el acceso al contenido con un mensaje de orientación.
- No usar CSS responsivo para adaptar la visualización.
- Asumir que todos los usuarios pueden cambiar la orientación de su dispositivo.
Cómo evitar estos errores:
- Diseñar contenido adaptable sin restricciones de orientación.
- Usar CSS flexible con unidades relativas en lugar de valores fijos.
- Probar el sitio en diferentes dispositivos y orientaciones antes de publicarlo.
Preguntas frecuentes sobre el fallo común F100
¿Siempre es un error bloquear la orientación?
No. Si la orientación es esencial para la funcionalidad (por ejemplo, apps de realidad aumentada o videojuegos específicos), entonces no es un fallo.
¿Cómo puedo saber si mi sitio está bloqueando la orientación?
Abre tu sitio en un dispositivo móvil y rota la pantalla. Si ves un mensaje como «Gira tu dispositivo», tu sitio podría estar fallando el criterio 1.3.4.
¿Es suficiente con mostrar el mismo contenido en ambas orientaciones?
Sí. Siempre que el contenido sea accesible en ambas orientaciones, cumple con las WCAG 2.1.
¿Puedo usar media queries para ajustar el contenido según la orientación?
Sí, pero sin restringir el acceso. Puedes cambiar estilos con @media (orientation: portrait) {} o @media (orientation: landscape) {}, pero sin ocultar el contenido en una de ellas.
¿Cómo afecta este fallo a los usuarios con discapacidad?
Los usuarios con dispositivos montados en una posición fija pueden quedar bloqueados sin acceso al contenido si no pueden cambiar la orientación.
¿Cómo puedo probar mi sitio para evitar este fallo?
Usa herramientas como el inspector de Chrome para simular cambios de orientación o prueba en dispositivos físicos con orientación fija.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F100: Fallo del Criterio de Conformidad 1.3.4 debido a que muestra un mensaje solicitando reorientar el dispositivo
- Comprender el criterio de éxito 1.3.4: Orientación
Pruebas y validación
Procedimiento
- Abre el sitio web en un dispositivo móvil o usa el modo desarrollador en el navegador.
- Gira el dispositivo entre vista vertical y horizontal.
- Verifica si aparece un mensaje bloqueando el contenido.
- Comprueba si el contenido es accesible en ambas orientaciones.
- Si el sitio usa CSS para adaptar la orientación, asegúrate de que no oculta la información.
Resultados esperados
✅ Si las pruebas confirman que:
- El contenido se ajusta correctamente sin importar la orientación.
- No se muestra un mensaje que impida el acceso al contenido.
- No se bloquea la visualización en función de la orientación del dispositivo.
Entonces, el contenido cumple con WCAG 2.1.
❌ Si alguno de los elementos anteriores no se cumple, el contenido falla el criterio 1.3.4 y debe corregirse.
Bloquear la orientación de un sitio web es una práctica que afecta la accesibilidad de muchos usuarios. Para cumplir con WCAG 2.1, el contenido debe mostrarse correctamente sin importar la orientación del dispositivo, salvo que esta restricción sea esencial.
💡 ¡No limites la accesibilidad de tu sitio! Diseña con flexibilidad y haz que tu contenido sea usable para todos.
📩 ¿Necesitas ayuda con la accesibilidad de tu web? Contáctanos y optimiza tu sitio hoy. 🚀