1.3.4 Orientación
Criterio de éxito oficial
El contenido no restringe su visualización y funcionamiento a una única orientación de pantalla, como vertical u horizontal, a menos que una orientación de pantalla específica sea esencial.
Nota
Algunos ejemplos donde una orientación específica puede ser esencial: un cheque bancario, una aplicación de piano, diapositivas para un proyector/televisor, o contenido de realidad virtual.
¿Qué es?
Las páginas web no deberían obligar al contenido a tener una única orientación de pantalla. El contenido debe ajustarse a la preferencia del usuario, ya sea vertical (portrait) u horizontal (landscape). Algunos sitios y aplicaciones configuran y restringen automáticamente la pantalla a una orientación específica, esperando que el usuario gire su dispositivo, pero esto puede ser imposible para algunos usuarios.
¿Por qué es importante?
Si el contenido se queda bloqueado en una orientación, los usuarios con dispositivos montados podrían tener problemas graves. Por ejemplo, un dispositivo montado lateralmente en una silla de ruedas no funcionará bien con una página bloqueada en modo vertical.
Bloqueo de autor vs. bloqueo de dispositivo
Bloqueo por el usuario
El usuario bloquea la orientación de su dispositivo mediante la configuración del sistema. Todas las apps respetan esta preferencia.
Esto está bien y es decisión del usuario.
¿Quién se ve afectado?
Personas con baja visión — Pueden preferir una orientación u otra para ampliar el texto. En modo horizontal, pueden ver más texto ampliado.
Personas con dificultades de destreza — Pueden tener sus dispositivos montados en una posición fija, como en el brazo de una silla de ruedas. Si la página está bloqueada en una orientación diferente, el contenido queda inutilizable.
Cómo implementar 1.3.4
No bloquear la orientación
La implementación es conceptualmente simple: no restrinjas la orientación del contenido. Deja que se adapte automáticamente a la preferencia del usuario. Esto significa evitar el uso de la Screen Orientation API o transformaciones CSS para forzar una orientación específica.
Opción para cambiar la orientación
Si por alguna razón la presentación del contenido está vinculada a una orientación, la interfaz debe incluir una opción visible que permita a los usuarios cambiar la orientación manualmente, sin necesidad de girar el dispositivo físicamente.
Cambios por tamaño vs. orientación
Los cambios en el contenido o la funcionalidad debidos al tamaño de pantalla (diseño responsive) no se contemplan en este criterio. Este criterio se centra exclusivamente en las restricciones de orientación.
Excepciones esenciales
La orientación fija se permite cuando es esencial para que el contenido funcione:
Necesita orientación horizontal para capturar su formato alargado
El teclado necesita ancho suficiente para las teclas
Para proyector o televisor con formato panorámico
La orientación depende de las gafas, no del usuario
Ejemplos prácticos
Cumple Sitio de vídeos online
Un vídeo se muestra tanto en formato vertical como horizontal según la orientación elegida por el usuario. El reproductor se adapta automáticamente al espacio disponible sin forzar ninguna rotación.
Cumple Aplicación web de eReader
Una aplicación de lectura muestra el contenido del libro tanto en vertical como en horizontal. En vertical muestra una columna; en horizontal, puede mostrar dos páginas lado a lado o una columna más ancha.
Esencial Depósito de cheques en app bancaria
Una app bancaria requiere modo horizontal para capturar la imagen de un cheque con precisión. Los cheques tienen aproximadamente el doble de ancho que de alto. Esta es una excepción legítima porque la orientación horizontal es esencial para la funcionalidad.
Fallo Página web bloqueada con mensaje de rotación
Una página web muestra un mensaje «Por favor, gire su dispositivo a posición vertical» cuando se accede en horizontal, impidiendo el uso del contenido. Esto incumple el criterio tanto por bloquear la orientación como por mostrar un mensaje que solicita reorientar el dispositivo (fallo F100).
Técnicas recomendadas
| Código | Técnica | Tipo |
|---|---|---|
| G214 | Utilizar un control para permitir el acceso a contenido en diferentes orientaciones que de otro modo estaría restringido | Suficiente |
Errores comunes
- Usar
screen.orientation.lock()en JavaScript para forzar una orientación sin que sea esencial. - Aplicar
transform: rotate(90deg)en CSS para forzar contenido horizontal en dispositivos verticales. - Diseñar solo para orientación vertical sin probar nunca en horizontal.