Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.4-A»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 6: Línea 6:
|wcag_version=2.2
|wcag_version=2.2
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio1
|wcag_principio_url=Principio_1
|wcag_pauta=1.3_Adaptable
|wcag_pauta=1.3_Adaptable
|wcag_grupo=Diseño adaptable
|wcag_grupo=Diseño adaptable

Revisión del 12:13 1 nov 2025

1.3.4-A. Contenido adaptable a la orientación

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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

  1. Paso 1. Abrir la página y acceder a las herramientas de desarrollo del navegador.
  2. Paso 2. Activar la simulación de dispositivo (por ejemplo, “Toggle device toolbar” en Chrome o “Vista de diseño adaptable” en Firefox).
  3. Paso 3. Cambiar entre orientación vertical y horizontal.
  4. Paso 4. Verificar que el contenido se visualiza correctamente y que las funciones siguen siendo operables en ambas orientaciones.
  5. 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. Captura que muestra el contenido en orientación vertical


Otras herramientas de evaluación

Usa directamente un móvil o tablet para visualizar las dos orientaciones en el dispositivo.










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ 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...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.4-A&oldid=2742»