2526UFV3.3.2-D-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.2-D
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) 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>Formulario sin instrucciones - 3.3.2-D</title>
</head>
<body>
<h1>Registro de Usuario</h1>
<form>
<!-- No se indica el formato requerido para la fecha -->
<label for="fecha_nac">Fecha de nacimiento:</label>
<input type="text" id="fecha_nac" name="fecha_nac">
<br><br>
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono">
<button type="submit">Enviar</button>
</form>
</body>
</html>
Explicación del problema detectado:
El problema fundamental es que el formulario solicita datos estrictos ("Fecha de nacimiento" y "Teléfono") sin proporcionar ninguna instrucción visible, obligando al usuario a adivinar si debe usar separadores como barras o guiones, o en qué orden introducir la fecha.
Desde el punto de vista técnico, la ausencia de atributos de accesibilidad como aria-describedby significa que esta falta de información afecta igualmente a usuarios de lectores de pantalla. Al no cumplir con el criterio 3.3.2-D, se impide que los usuarios conozcan los requisitos de entrada de antemano, lo que resulta en fallos de validación evitables y barreras innecesarias para completar la tarea.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Esta falta de instrucciones afecta especialmente a personas con discapacidad cognitiva o dificultades de aprendizaje, quienes pueden sentirse confundidas o frustradas al no entender el formato exacto requerido para evitar errores. También impacta a usuarios de lectores de pantalla, que al no recibir feedback auditivo sobre las restricciones del campo (como "formato DD/MM/AAAA"), pueden introducir datos inválidos repetidamente sin saber por qué falla el formulario.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) 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>Formulario con instrucciones claras - 3.3.2-D</title>
<style>
.instruccion { font-size: 0.9em; color: #555; }
</style>
</head>
<body>
<!-- Si se indica el formato requerido para la fecha -->
<h1>Registro de Usuario</h1>
<form>
<label for="fecha_nac">Fecha de nacimiento:</label>
<input type="text" id="fecha_nac" name="fecha_nac" aria-describedby="ayuda-fecha">
<span id="ayuda-fecha" class="instruccion"> (Formato requerido: DD/MM/AAAA. Ejemplo: 12/05/1990)</span>
<br><br>
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono" aria-describedby="ayuda-tel">
<span id="ayuda-tel" class="instruccion"> (Sin espacios ni guiones, 9 dígitos)</span>
<br><br>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Explicación de la solución aplicada:
Este ejemplo es accesible porque añade instrucciones visibles y permanentes junto a los campos (como "DD/MM/AAAA" o "9 dígitos"), eliminando la ambigüedad sobre el formato requerido. Además, al vincular estos textos mediante aria-describedby, se asegura que los lectores de pantalla anuncien estas ayudas automáticamente, previniendo errores de entrada para todos los usuarios.
