2526UFV3.3.7-A-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://wikiwcag.udl.cat/Principio_3/3.3_Assistencia_en_los_input/3.3.7-A
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Entrada redundante</title>
</head>
<body>
<h1>Ejemplo NO accesible – Entrada redundante</h1>
<form action="#" method="post">
<p>
<label for="email">Correo electrónico:</label><br>
<input type="email" id="email" name="email">
</p>
<p>
<label for="email-repeat">Confirme su correo electrónico:</label><br>
<input type="email" id="email-repeat" name="email-repeat">
</p>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Explicación del problema detectado:
Se pide al usuario que introduzca dos veces su correo electrónico sin una herramienta de ayuda (ej. comparar automáticamente, autocompletar, validar en tiempo real).
Esto genera duplicación innecesaria de entrada de datos.
Para el usuario, especialmente para quienes tienen discapacidad motriz, escribir la misma información dos veces es una barrera de accesibilidad.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con movilidad reducida, pues escribir el mismo dato dos veces aumenta el esfuerzo físico.
Personas con discapacidad visual, que sin retroalimentación, pueden cometer errores sin saberlo.
Personas con dificultades cognitivas, puesto que duplicar información memorística eleva la carga cognitiva.
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:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Entrada redundante</title>
</head>
<body>
<h1>Ejemplo accesible – Entrada redundante evitada</h1>
<form action="#" method="post">
<p>
<label for="email">Correo electrónico:</label><br>
<input type="email" id="email" name="email" autocomplete="email">
</p>
<p>
<label for="email-confirm">¿Confirmar correo?</label><br>
<input type="checkbox" id="email-confirm" name="email-confirm">
<label for="email-confirm">Usar el mismo correo de arriba</label>
</p>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Explicación de la solución aplicada:
Se evita pedir dos veces el correo electrónico.
Ofrecer una casilla de verificación para confirmar que se va a usar el mismo valor para que el usuario no tenga que volver a escribirlo y se reduce la repetición innecesaria.
Esto respeta el criterio porque elimina la redundancia de entrada salvo que el usuario quiera introducir otro dato.
