2526UPSA3.3.2-A-000
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-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://userinyerface.com/game.html
2.1.2. Código HTML:
<form>
<input type="text" placeholder="Nombre de usuario">
<input type="password" placeholder="Contraseña">
<input type="text" placeholder="Fecha de nacimiento">
<button type="submit">Enviar</button>
</form>
Explicación del problema detectado:
En la imagen puesta de ejemplo aparece un formulario que no tiene etiquetas que indiquen que hay que escribir en cada campo del formulario. Además, en cada campo aparece texto y si quieres escribir en el formulario el texto aparece, ni siquiera se quita como si el texto se hubiera puesto en un atributo placeholder dentro la etiqueta <input>. En un formulario no se puede poner texto que se borre como el de un placeholder ni poner texto que no se borre al querer escribir como en el formulario de la imagen.
En el código HTML se puede ver un formulario que no es accesible, ya que no hay una etiqueta label para cada etiqueta input que indique claramente con que información hay que rellenar cada campo del formulario. También aparecen los atributos placeholder en cada input, que genera texto en gris claro que se quita al escribir en ese input del formulario, algo que no hay que hacer.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
El incumplimiento de este criterio afecta a usuarios con discapacidad visual, ya que, sin etiquetas de texto vinculadas a cada input del formulario, los lectores de pantalla son incapaces de anunciar el propósito de un campo, dejando al usuario sin información ante formularios mudos que no puede rellenar.
Por otro lado, la ausencia de instrucciones claras y el uso de etiquetas que desaparecen (el texto de un atributo placeholder de un input) también afecta a personas con discapacidad cognitiva, TDAH o problemas de memoria, ya que pierden el contexto de la información requerida en cuanto empiezan a escribir.
Esta carencia de guías preventivas —como no especificar el formato de una fecha o las reglas de una contraseña— genera una barrera de frustración y ansiedad que también afecta a personas mayores o con un bajo nivel digital, quienes suelen abandonar el proceso ante mensajes de error inesperados.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.once.es/contact-info
2.2.2 Código HTML:
<form>
<label for="usuario">Nombre de usuario:</label>
<input type="text" id="usuario" name="usuario">
<label for="nacimiento">Fecha de nacimiento:</label>
<span id="ayuda-fecha">Formato requerido: DD/MM/AAAA</span>
<input type="text" id="nacimiento" name="nacimiento">
<label for="clave">Contraseña:</label>
<span id="ayuda-clave">Mínimo 8 caracteres y un número.</span>
<input type="password" id="clave" name="clave">
<button type="submit">Enviar datos</button>
</form>
Explicación de la solución aplicada:
En la imagen se ve un formulario sin texto gris de placeholder que se quita al escribir en él. Además, encima de cada campo hay etiquetas que te indican claramente que hay que escribir en cada campo del formulario.
El código HTML de ejemplo aparece un formulario donde hay inputs sin placeholder y con su correspondiente label que indica que hay que escribir en cada campo. Además para más ayuda, se pone en un span, información adicional sobre campos que requieren un formato específico como la fecha o la contraseña.
