Principio 3/3.3 Assistencia en los input/3.3.8-A

De WCAG Wiki

3.3.8-A. Autenticación accesible

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Un "cognitive function test" (como recordar una contraseña o resolver un puzle) no se requiere para ningún paso de un proceso de autenticación, a menos que ese paso proporcione al menos uno de los siguientes:
    • Alternativa: otro método de autenticación que no depende de una prueba de función cognitiva.
    • Mecanismo: hay un mecanismo disponible para ayudar al usuario a completar la prueba cognitiva.
    • Reconocimiento de objetos: la prueba consiste en reconocer objetos (imágenes, vídeo o audio).
    • Contenido personal: la prueba usa contenido no textual proporcionado previamente por el usuario (imágenes, vídeo o audio).

Comprensión del criterio

Descripción resumida

No se debe exigir recordar datos complejos o resolver pruebas cognitivas para autenticarse, salvo que exista una alternativa accesible o apoyo.

Objetivo

Observar si se puede garantizar un método accesible, fácil de usar y seguro para iniciar sesión, beneficiando especialmente a personas con discapacidad cognitiva, memoria limitada o estrés al recordar contraseñas.

Importancia de cumplir el criterio

Recordar contraseñas largas, resolver puzzles o interpretar textos complejos puede excluir a personas con dificultades cognitivas, problemas de memoria, dislexia, daño cerebral adquirido o estrés cognitivo. Métodos como biometría, enlaces mágicos o claves de un solo uso son más inclusivos.

Referencias WCAG

Recursos de apoyo

  • Inicio de sesión con correo y enlace mágico ("magic link")
  • Autenticación biométrica accesible
  • Llaves de seguridad / WebAuthn / Passkeys
  • Autocompletado de contraseñas

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Intentar iniciar sesión siguiendo el proceso estándar.
  2. Paso 2. Verificar si se exige recordar información compleja o resolver pruebas no accesibles.
  3. Paso 3. Comprobar si existe alternativa accesible (passkeys, enlace mágico, segundo factor simple).
  4. Paso 4. Validar si hay mecanismos de ayuda (gestores de contraseñas, autocompletado).
  5. Paso 5. Confirmar que cualquier desafío cognitivo cumple las excepciones (reconocimiento no textual personal o universal).

Resultado esperado

El usuario puede autenticarse sin necesidad de resolver pruebas cognitivas complejas y con opciones accesibles de apoyo o alternativas.

Ejemplo ilustrativo

✅ Ejemplo accesible: autenticación sin memoria ni puzzles

<!-- Inicio de sesión con enlace mágico -->
<form>
  <label for="email">Correo electrónico</label>
  <input id="email" type="email" autocomplete="email">
  <button type="submit">Enviar enlace de acceso</button>
</form>

✅ Alternativa accesible: passkeys / biometría

<button type="button">Iniciar sesión con Passkey</button>
<!-- Permite autenticación sin recordar nada -->


Otras herramientas de evaluación

  • Pruebas con gestores de contraseñas
  • Verificación de soporte para WebAuthn / Passkeys
  • Revisión de flujos de autenticación paso a paso
  • Pruebas en móvil + biometría
  • Lectores de pantalla y navegación por teclado










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

Comentarios

A continuación se muestran comentarios sobre el criterio 3.3.8-A. Autenticación accesible

Loading comments...