2526UdL3.3.2-D-001

De WCAG Wiki

Edición de la página como formulario

1. Información básica

Id del criterio: 3.3.2 - Etiquetas o instrucciones (Nivel: A)
Título del subcriterio: 3.3.2-D
Universidad participante: UdL
Curso académico: 2025-26

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

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://padron.atm-maggioli.es/publico/132

2.1.2. Código HTML:

<thead><th scope="col" id="c_A2"...



Explicación del problema detectado:
El formulario solicita información que requiere un formato específico, pero no proporciona instrucciones textuales ni ejemplos de cómo rellenar los campos correctamente. Esto hace que los usuarios no sepan exactamente qué formato se espera, lo que impide la solicitud de los documentos.

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:

<form>

<label for="fecha_nac">Fecha de nacimiento:</label>
<input type="text"
       id="fecha_nac"
       name="fecha_nac"
       required
       aria-describedby="ayuda-fecha"
       placeholder="DD/MM/AAAA"
       pattern="(0[1-9]|[12][0-9]|3[01])/(0[1-9]|1[0-2])/[0-9]{4}">
<div id="ayuda-fecha">
Formato requerido: DD/MM/AAAA. Ejemplo: 12/05/1990.
</div>

<br><br>

<label for="telefono">Teléfono:</label>
<input type="tel"
       id="telefono"
       name="telefono"
       required
       aria-describedby="ayuda-tel"
       placeholder="123456789"
       pattern="[0-9]{9}">
<div id="ayuda-tel">
Debe contener exactamente 9 dígitos, sin espacios ni guiones.
Ejemplo: 612345678.
</div>

<br><br>

<button type="submit">Enviar</button>

</form>



Explicación de la solución aplicada:
El formulario es accesible porque proporciona instrucciones claras y ejemplos antes de que el usuario introduzca los datos, indicando el formato exacto que debe utilizar (por ejemplo, DD/MM/AAAA para la fecha o 9 dígitos sin espacios para el teléfono). Esto ayuda a los usuarios a comprender cómo deben completar cada campo, reduce errores por falta de información y facilita que todas las personas, incluidas aquellas con discapacidad, puedan rellenarlo correctamente.






1 de enero de 20261 de octubre de 2025