2526UPSA1.3.2-C-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://www.wikiwcag.udl.cat/index.php/Principio_1/1.3_Adaptable/1.3.2-C
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<div style="display: flex; flex-direction: row-reverse;">
<p>Paso 1: Introduce tus datos personales</p>
<p>Paso 2: Selecciona tu método de pago</p>
<p>Paso 3: Confirma tu pedido</p>
</div>
Explicación del problema detectado:
El contenido usa flex-direction: row-reverse que invierte visualmente el orden de los pasos (se muestra "Paso 3, Paso 2, Paso 1") pero el orden del DOM sigue siendo el original. Los lectores de pantalla y herramientas de navegación leerán "Paso 1, Paso 2, Paso 3" mientras que visualmente aparece en orden inverso, creando confusión.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas con discapacidad visual que usan lectores de pantalla recibirán información contradictoria. Escucharán el orden lógico de los pasos pero no podrán seguirlo correctamente porque la presentación visual es diferente, generando confusión y errores al completar procesos críticos como un formulario de compra.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<ol>
<li>Paso 1: Introduce tus datos personales</li>
<li>Paso 2: Selecciona tu método de pago</li>
<li>Paso 3: Confirma tu pedido</li>
</ol>
Explicación de la solución aplicada:
- que mantiene la secuencia significativa tanto en el DOM como en la presentación visual. El orden de lectura es claro y coherente para todos los usuarios, independientemente de la tecnología de asistencia que utilicen.
