2526UPSA3.3.8-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.8-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.drupal.org/project/disabled_paste_on_login"> https://www.drupal.org/project/disabled_paste_on_login </a> <a rel="nofollow" class="external free" href="https://www.drupal.org/project/disabled_paste_on_login"> https://www.drupal.org/project/disabled_paste_on_login </a>]
2.1.2. Código HTML:
<form id="kc-register-form">
<div class="form-group">
<label for="password">Contraseña*</label>
<input type="password" id="password" class="pf-c-form-control"
onpaste="return false;"
oncopy="return false;"
oncontextmenu="return false;">
</div>
<div class="form-group">
<label for="password-confirm">Confirmar Contraseña*</label>
<input type="password" id="password-confirm" class="pf-c-form-control"
onpaste="return false;">
</div>
</form>
<style>
.pf-c-form-control {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
</style>
Explicación del problema detectado:
El incumplimiento del criterio 3.3.8-A Autenticación Accesible en este formulario de registro radica en la restricción técnica impuesta a los campos de entrada de datos sensibles, específicamente en la contraseña y su confirmación. Al implementar atributos como onpaste="return false;", el sitio web impide que el usuario utilice la función de "pegar" del sistema operativo o del navegador. Esta acción técnica, a menudo aplicada bajo una falsa premisa de seguridad, se convierte en una barrera de accesibilidad insalvable para muchos perfiles de usuario.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afectados: personas con discapacidad cognitiva (memoria a corto plazo, dislexia) y motora.
Barrera: impide el uso de gestores de contraseñas (como 1Password o Chrome Password Manager), obligando a memorizar y teclear secuencias largas, lo que aumenta drásticamente la tasa de error y bloqueos de cuenta.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://eurofrance.es/customer/account/create/">https://eurofrance.es/customer/account/create/ </a> <a rel="nofollow" class="external free" href="https://eurofrance.es/customer/account/create/">https://eurofrance.es/customer/account/create/ </a>]
2.2.2 Código HTML:
<form id="accountcreate" method="post" autocomplete="on">
<div class="field required">
<label for="email_address" class="label">Correo electrónico*</label>
<div class="control">
<input type="email" name="email" id="email_address"
autocomplete="email"
required
class="form-input">
</div>
</div>
<div class="field required">
<label for="password" class="label">Contraseña*</label>
<div class="control relative">
<input type="password" id="password" name="password"
autocomplete="new-password"
required
class="form-input w-full">
<button type="button" class="absolute right-2 top-2">
<i class="fa fa-eye"></i>
</button>
</div>
</div>
</form>
<style>
.form-input {
border: 1px solid #ccc;
padding: 12px;
border-radius: 4px;
display: block;
width: 100%;
}
.label {
font-weight: 600;
margin-bottom: 8px;
display: block;
}
</style>
Explicación de la solución aplicada:
El cumplimiento del criterio 3.3.8 Autenticación Accesible en la plataforma de Eurofrance se basa en permitir que el usuario complete el proceso de identificación sin depender exclusivamente de su memoria o de la transcripción manual de caracteres. Al analizar el código fuente, se observa que los campos críticos, como el correo electrónico y la contraseña, no contienen scripts ni atributos que inhabiliten la función de "pegar" del sistema operativo. Esta libertad técnica permite que cualquier persona, independientemente de sus capacidades cognitivas o motoras, pueda copiar sus credenciales desde una fuente externa segura e introducirlas en el formulario de manera directa.
