2526UPSA3.3.2-B-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-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://auth.genially.com/es/signup/sso?accountType=professional#
2.1.2. Código HTML:
<h3>Crea tu cuenta, ¡gratis!</h3>
<form>
<input type="email" placeholder="Introduce tu email" value="p" style="padding: 10px; width: 100%;">
<p style="font-size: small;">
Al continuar con el registro aceptas los términos...
</p>
<button style="background-color: blue; color: white; width: 100%; padding: 10px;">
Regístrate con SSO
</button>
</form>
Explicación del problema detectado:
El campo de formulario carece de una etiqueta visual permanente situada fuera del área de entrada. Se usa un texto de marcador de posición (placeholder) dentro del campo, pero como muestra la imagen, al comenzar a escribir (la letra "p"), la instrucción desaparece. Esto deja al usuario sin contexto sobre qué información debe introducir si se distrae o revisa el formulario más tarde.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afecta especialmente a personas con dificultades cognitivas, problemas de memoria a corto plazo o déficit de atención, ya que pierden la instrucción de vista una vez que interactúan con el campo. También dificulta la revisión de datos antes del envío, pues no se puede verificar si el contenido de la casilla corresponde a lo solicitado.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://accounts.google.com/v3/signin/identifier?authuser=0&continue=http%3A%2F%2Fsupport.google.com%2Fmail%2Fanswer%2F56256%3Fhl%3Des&ec=GAlAdQ&hl=es&flowName=GlifWebSignIn&flowEntry=AddSession&dsh=S-1005540754%3A1766148644276425
2.2.2 Código HTML:
<div style="border: 1px solid #ccc; padding: 20px; border-radius: 8px;">
<label for="email" style="display:block; color:#1a73e8; font-size:0.8em; margin-bottom:4px;">
Correo electrónico o teléfono
</label>
<input type="text" id="email" name="email" value="pablomg411@gmail.com"
style="width: 95%; padding: 10px; border: 1px solid #1a73e8; border-radius: 4px;">
</div>
Explicación de la solución aplicada:
En este ejemplo de inicio de sesión, la etiqueta "Correo electrónico o teléfono" se mantiene visible permanentemente, situándose sobre el campo de texto cuando este contiene información. Al utilizar una etiqueta <label> correctamente asociada y visible, el usuario nunca pierde el contexto de la información solicitada, incluso después de haber rellenado el campo.
