La autenticación es un elemento clave en la seguridad digital, pero cuando se implementa sin considerar la accesibilidad, puede generar barreras para los usuarios. Uno de los problemas más comunes es impedir que los usuarios vuelvan a ingresar una contraseña o código en el mismo formato en que fue creado, lo que puede hacer que las personas con discapacidades cognitivas o motoras enfrenten dificultades significativas.
Este problema está relacionado con los criterios de conformidad 3.3.8 (Autenticación Accesible) y 3.3.9 (Autenticación Accesible sin Excepción) de WCAG 2.2. Estos criterios buscan garantizar que los usuarios puedan autenticarse sin realizar pruebas de función cognitiva que los excluyan del acceso.
Un estudio de WebAIM indica que el 67% de los usuarios con discapacidades tienen dificultades con CAPTCHA y sistemas de autenticación complejos. Imponer restricciones en la entrada de contraseñas o códigos puede afectar su capacidad de acceso.
Acerca de este fallo
Este fallo ocurre cuando un sistema de autenticación impide que los usuarios vuelvan a ingresar su contraseña o código en el mismo formato en que fue creado. Esto puede incluir restricciones como:
- Exigir ingresar caracteres específicos de una contraseña en campos separados.
- Dividir códigos de verificación en múltiples campos sin permitir pegado automático.
- Requerir que los usuarios seleccionen caracteres de una contraseña desde listas desplegables.
Estas prácticas impiden el uso de gestores de contraseñas y dificultan la autenticación para personas con discapacidades cognitivas o motoras.
Situaciones donde ocurre este fallo:
- Un formulario que solicita la 2ª, 5ª y última letra de la contraseña, en lugar de permitir escribirla completa.
- Un campo de código de verificación que separa cada dígito en diferentes inputs sin permitir el pegado del código completo.
- Un sistema que obliga a los usuarios a seleccionar caracteres de la contraseña desde menús desplegables, en lugar de escribirla normalmente.
Ejemplos
Ejemplo incorrecto 1: Solicitar caracteres específicos de una contraseña
<form>
<label>Introduce el 2º, 5º y último carácter de tu contraseña:</label>
<input type="text" maxlength="1" aria-label="Segundo carácter">
<input type="text" maxlength="1" aria-label="Quinto carácter">
<input type="text" maxlength="1" aria-label="Último carácter">
<button type="submit">Ingresar</button>
</form>🔴 Problema:
- No permite que los usuarios utilicen gestores de contraseñas.
- Obliga a recordar la posición exacta de caracteres, lo que afecta a personas con dificultades cognitivas.
Solución correcta: Permitir ingresar la contraseña completa
<form>
<label for="password">Introduce tu contraseña:</label>
<input type="password" id="password" autocomplete="current-password">
<button type="submit">Ingresar</button>
</form>✅ ¿Qué mejora?:
- Permite a los usuarios copiar y pegar su contraseña sin restricciones.
- Compatible con gestores de contraseñas para facilitar el ingreso.
Ejemplo incorrecto 2: Código de verificación dividido en múltiples campos
<form>
<label>Introduce el código de verificación:</label>
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<button type="submit">Verificar</button>
</form>🔴 Problema:
- No permite pegar el código completo.
- Afecta a usuarios con movilidad reducida o dificultades para recordar secuencias.
Solución correcta: Campo único con pegado automático
<form>
<label for="code">Introduce el código de verificación:</label>
<input type="text" id="code" inputmode="numeric" autocomplete="one-time-code">
<button type="submit">Verificar</button>
</form>✅ ¿Qué mejora?:
- Permite pegar el código completo.
- Compatible con autocompletado de códigos enviados por SMS.
Ejemplo correcto: Solución ideal
<form>
<label for="password">Introduce tu contraseña:</label>
<input type="password" id="password" autocomplete="current-password">
<label for="code">Código de verificación:</label>
<input type="text" id="code" inputmode="numeric" autocomplete="one-time-code">
<p>O usa un método alternativo:</p>
<button type="button">Iniciar sesión con biometría</button>
<button type="button">Recibir enlace de acceso</button>
<button type="submit">Ingresar</button>
</form>✅ ¿Qué mejora?:
- Permite autenticación sin barreras.
- Compatible con gestores de contraseñas y autocompletado.
- Proporciona alternativas como biometría o enlaces de un solo uso para garantizar accesibilidad.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Impedir el uso de gestores de contraseñas: Algunos sitios bloquean intencionalmente la funcionalidad de autocompletado, dificultando la autenticación para usuarios con discapacidad.
- Dividir contraseñas o códigos en múltiples campos: Obligar a escribir caracteres en diferentes campos impide el pegado y aumenta la carga cognitiva.
- Exigir selección de caracteres específicos de una contraseña: Este método excluye a personas con problemas de memoria o dificultades motoras.
- No ofrecer métodos alternativos de autenticación: Si un usuario tiene dificultades para ingresar una contraseña, deberían existir opciones como autenticación biométrica o enlaces de un solo uso.
Cómo evitar estos errores:
- Permitir el pegado de contraseñas y códigos.
- Utilizar un solo campo para ingresar contraseñas o códigos.
- Facilitar la compatibilidad con gestores de contraseñas.
- Ofrecer métodos alternativos como autenticación biométrica o autenticación sin contraseña.
Preguntas frecuentes sobre el fallo común F109
¿Por qué es importante permitir el pegado de contraseñas y códigos?
Para facilitar la autenticación de personas con dificultades motoras o cognitivas y mejorar la seguridad al fomentar el uso de gestores de contraseñas.
¿Está permitido dividir códigos de verificación en múltiples campos?
Solo si se permite pegar el código completo en el primer campo y el sistema completa automáticamente los restantes.
¿Cómo afecta este fallo a la accesibilidad?
Obliga a los usuarios a recordar secuencias o escribir caracteres específicos, lo que genera barreras para personas con discapacidad.
¿Cuáles son las mejores alternativas de autenticación accesible?
Uso de gestores de contraseñas, autenticación biométrica, enlaces de acceso de un solo uso y autenticación sin contraseña.
¿Cómo puedo verificar si mi autenticación es accesible?
Intentando copiar y pegar contraseñas y códigos, probando con gestores de contraseñas y asegurando que haya métodos alternativos de autenticación.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F109: Incumplimiento del Criterio de Conformidad 3.3.8 y 3.3.9 debido a impedir el reingreso de contraseña o código en el mismo formato
- Comprender el criterio de éxito 3.3.8 Autenticación accesible (mínima)
- Comprender el criterio de éxito 3.3.9 Autenticación accesible (mejorada)
- Gestores de contraseñas y accesibilidad
Pruebas y validación
Procedimiento
- Revisar la estructura de los campos de autenticación: Verificar si los usuarios pueden ingresar su contraseña o código en un solo campo sin restricciones de formato.
- Comprobar si el pegado está permitido: Intentar copiar y pegar una contraseña o código en los campos de entrada.
- Probar compatibilidad con gestores de contraseñas: Intentar ingresar credenciales desde un gestor de contraseñas.
- Evaluar si hay métodos alternativos de autenticación: Verificar si el sistema permite otras opciones como autenticación biométrica o enlaces de un solo uso.
Resultados esperados
- ✅ Si el sistema permite el ingreso de contraseñas y códigos en un solo campo sin restricciones, cumple con WCAG 2.2.
- ❌ Si el sistema bloquea el pegado o impone restricciones innecesarias, no es conforme y debe corregirse.
- ✅ Si se ofrecen métodos alternativos de autenticación accesibles, se cumple con los criterios 3.3.8 y 3.3.9.
Garantizar autenticación accesible es clave para la inclusión digital. Elimina barreras y permite que todos los usuarios accedan a tu sitio sin dificultades.
🚀 ¡Optimiza la accesibilidad de tu web! Contáctanos si necesitas ayuda.