Principio 1/1.3 Adaptable/1.3.4-A
De WCAG Wiki
< Principio 1 | 1.3 Adaptable
1.3.4-A. Contenido adaptable a la orientación
- Nivel: AA
- Versión: 2.2
- Principio: [[{{{wcag_principio_url}}}|1.Perceptible]]
- Pauta: [[{{{wcag_pauta_url}}}|1.3.Adaptable]]
- Grupo: Diseño adaptable
- Subgrupo: Orientación de pantalla
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Motriz –
Barrera grave
-
Baja visión –
Barrera moderada
-
Cognitiva –
Barrera leve
Enunciado del criterio (Observatorio de Accesibilidad Web)
- El contenido no debe obligar al usuario a visualizarlo o manejarlo en una única orientación (vertical u horizontal), salvo cuando esta orientación sea indispensable para comprender o utilizar correctamente el contenido.
Comprensión del criterio
Descripción resumida
El sitio o aplicación debe adaptarse correctamente a cualquier orientación del dispositivo (vertical o horizontal) sin pérdida de información ni bloqueo de funciones, salvo cuando una orientación específica sea esencial para la funcionalidad.
Objetivo
Garantizar que las personas con movilidad reducida o que usan dispositivos fijos puedan acceder y manejar el contenido sin necesidad de rotar el dispositivo. Este criterio mejora la accesibilidad y la experiencia de uso en todo tipo de pantallas.
Importancia de cumplir el criterio
Bloquear la orientación puede generar zonas invisibles o inaccesibles, pérdida de información y dificultad de interacción. Cumplir este criterio evita barreras graves para personas con movilidad limitada y mejora la adaptabilidad general del diseño web.
Referencias WCAG
Recursos de apoyo
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Abrir la página y acceder a las herramientas de desarrollo del navegador.
- Paso 2. Activar la simulación de dispositivo (por ejemplo, “Toggle device toolbar” en Chrome o “Vista de diseño adaptable” en Firefox).
- Paso 3. Cambiar entre orientación vertical y horizontal.
- Paso 4. Verificar que el contenido se visualiza correctamente y que las funciones siguen siendo operables en ambas orientaciones.
- Paso 5. Asegurar que no existen mensajes que obliguen al usuario a girar el dispositivo ni código que bloquee la orientación.
Resultado esperado
El contenido se muestra correctamente y es completamente operable tanto en orientación vertical como horizontal, sin pérdida de información ni funcionalidad.
Ejemplo ilustrativo
Se muestra un diseño flexible que se adapta automáticamente a cualquier orientación de pantalla.
Otras herramientas de evaluación
{{{wcag_otras_herramientas_evaluacion}}}
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 1.3.4-A. Contenido adaptable a la orientación
Loading comments...
