2526UPSA3.3.3-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.3-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
2.1.2. Código HTML:
<div class="sc-gxMtzJ bNOWVe">
<h2>No se ha podido iniciar sesión</h2>
<p>Parece que el inicio de sesión no ha funcionado. Por favor, inténtalo de nuevo.</p>
</div>
Explicación del problema detectado:
En el formulario de inicio de sesión de IKEA, cuando el usuario introduce un correo o una contraseña incorrecta, aparece un mensaje genérico: “No se ha podido iniciar sesión. Parece que el inicio de sesión no ha funcionado. Por favor, inténtalo de nuevo.”
Este mensaje no explica qué ha fallado ni da ninguna pista sobre cómo corregirlo. No indica si el error está en el correo electrónico, en la contraseña o si la cuenta no existe. Entonces, el usuario no sabe qué debe cambiar para solucionar el problema.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Este tipo de error afecta especialmente a personas con discapacidad cognitiva que pueden sentirse confundidas al no recibir una instrucción clara para continuar.
También perjudica a los usuarios con discapacidad visual total porque el lector de pantalla lee el mensaje, pero no aporta información concreta sobre qué campo deben corregir.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://es-es.facebook.com/reg/
2.2.2 Código HTML:
<div class="campo-formulario" id="password_field">
<label for="password_step_input">Contraseña nueva</label>
<input
type="password"
id="password_step_input"
name="reg_passwd__"
autocomplete="new-password"
aria-required="true"
aria-invalid="true"
aria-describedby="password-help"
>
<p id="password-help" class="mensaje-error">
Introduce una combinación de al menos seis números, letras y signos de
puntuación (como ! y & ).
</p>
</div>
Explicación de la solución aplicada:
En este formulario de registro, Facebook detecta cuando la contraseña no cumple los requisitos mínimos y marca el campo como erróneo. Aparece un mensaje de ayuda que explica qué debe de hacer el usuario: “Introduce una combinación de al menos seis números, letras y signos de
puntuación (como ! y &)”.
Este texto está asociado al campo mediante aria-describedby, así que también lo leen los lectores de pantalla. De esta forma, la página no solo avisa del error, sino que ofrece una sugerencia concreta para corregirlo.
