2526UFV3.3.2-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.2-A
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:
<h1>Formulario de Registro</h1>
<form>
<input type="text" name="nombre" placeholder="Nombre">
<label>Dato:</label>
<input type="email" name="correo">
<div>
<input type="password" name="pass" placeholder="Password">
<input type="password" name="pass2" placeholder="Repetir">
</div>
</form>
Explicación del problema detectado:
Este ejemplo falla porque no hay etiquetas visibles y claras en todas las secciones del formulario que indiquen su función.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Las personas mayores o con dificultades cognitivas pueden tener confusiones al leer esas etiquetas ambiguas.
Se deben indicar de manera clara para hacer que sea facil y rapido completar los formularios.
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:
<h1>Formulario de Registro</h1>
<form>
<label for="nombre">Nombre completo</label>
<input type="text" id="nombre" name="nombre">
<label for="correo">Correo electrónico</label>
<input type="email" id="correo" name="correo">
<fieldset>
<legend>Datos de acceso</legend>
<label for="pass">Password</label>
<input type="password" id="pass" name="pass">
<label for="pass2">Repetir Password</label>
<input type="password" id="pass2" name="pass2">
</fieldset>
</form>
Explicación de la solución aplicada:
Al agregar etiquetas visibles en cada campo se puede identificar el propósito de cada grupo, y esto permite que los lectores de pantalla puedan anunciar el contexto antes de cada campo y los usuarios no tengan problemas comprensivos.
