TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si tu sitio web muestra un mensaje invasivo de "Por favor gira tu dispositivo a modo vertical para continuar", estás discriminando. Muchas personas con parálisis cerebral o movilidad reducida tienen sus tablets fijadas a sus sillas de ruedas y no pueden rotarlas físicamente.
La tiranía del viewport forzado
El Criterio WCAG 1.3.4 (Orientación) prohíbe restringir la visualización a una única orientación, salvo que sea una necesidad esencial absoluta (como un emulador de piano). Bloquear el diseño porque "la tabla no cabe en vertical" es una excusa inaceptable que castiga a la persona usuaria.
El patrón erróneo: Código Accesible Deficiente
Uso de media queries hostiles para oscurecer la pantalla y exigir la rotación física del hardware.
/* MAL: Extorsión visual basada en la rotación */
@media screen and (orientation: landscape) {
.main-content { display: none; }
.rotate-warning { display: block; }
}La Solución Accesible: Código Recomendado
Diseño verdaderamente responsivo. Si tienes una tabla enorme en móvil vertical, aplica un envoltorio con overflow-x: auto; tabindex="0", en vez de obligar a rotar la pantalla.
/* BIEN: Flujo elástico independientemente de la rotación */
.main-content {
display: flex;
flex-direction: column;
}
@media screen and (orientation: landscape) {
.main-content {
flex-direction: row;
}
}Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Incrementar el zoom del navegador al 200% (Ctrl++) y verificar que todo el contenido siga siendo legible sin scroll horizontal. En dispositivos móviles, realizar el gesto de pellizco (pinch-to-zoom) y confirmar que el sitio permita la ampliación sin bloquearla.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.3.4.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 1.3.4. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
