Atención, distracciones y diseño engañoso

La atención es un recurso limitado y muchas interfaces compiten por ella: ventanas emergentes, chats que se abren solos, contadores, carruseles, notificaciones. Algunas van más allá y aprovechan los límites cognitivos para empujar decisiones que la persona no tomaría con calma: son los dark patterns, que aquí llamaremos patrones de diseño engañoso. En la lección anterior viste el objetivo 5 de COGA («Ayudar a concentrarse»). Aquí lo desarrollamos con los criterios WCAG implicados, código que lo resuelve bien, una clasificación del diseño engañoso y el marco europeo que ya lo prohíbe en varios contextos.

Lo que cuesta una interrupción

Para una persona con TDAH, daño cerebral adquirido o fatiga cognitiva, una interrupción no solo quita unos segundos: rompe el hilo y obliga a reconstruir la tarea con la memoria de trabajo, que es justo la función más frágil. Las fuentes habituales de interrupción en webs y apps son:

• Ventanas de suscripción que aparecen al llegar a la página o al intentar salir.
• Chats que se abren solos y saludan con sonido.
• Avisos de cookies que tapan el contenido y la tarea principal.
• Vídeos que se reproducen solos, carruseles que avanzan sin pedirlo y animaciones de fondo.
• Notificaciones emergentes (toasts) que desaparecen antes de poder leerlas.
• Mensajes de presión del tipo «12 personas están viendo esta habitación».

Varias de estas situaciones ya tienen un criterio WCAG 2.2 detrás: 1.4.2 Control del audio (A) exige poder pausar o silenciar el sonido automático de más de 3 segundos; 2.2.2 Pausar, detener, ocultar (A) exige poder detener el movimiento automático que dura más de 5 segundos y se presenta junto a otro contenido; 3.2.1 Al recibir el foco y 3.2.2 Al recibir entradas (A) prohíben cambios de contexto inesperados; 1.4.13 Contenido con hover o foco (AA) pide que lo que aparece al pasar el ratón se pueda descartar y no desaparezca solo. Una notificación que se esfuma a los tres segundos funciona en la práctica como un límite de tiempo para leerla, y se analiza con 2.2.1 Tiempo ajustable. En nivel AAA, 2.2.4 Interrupciones pide que el usuario pueda posponer o suprimir las interrupciones salvo emergencias, y 2.3.3 Animación desde interacciones que se pueda desactivar la animación provocada por la interacción.

Avisos sin ruido y movimiento bajo control

Las regiones vivas (aria-live) que viste en el nivel 3 ayudan a anunciar cambios, pero mal usadas se convierten en otra fuente de interrupción, también para quien usa lector de pantalla. La regla: role="status" (anuncio cortés, espera a que el lector termine) para confirmaciones como «Guardado»; role="alert" (anuncio inmediato) solo para lo urgente; y nunca un contador que se anuncia cada segundo.

<!-- Incorrecto: el lector anuncia la cuenta atrás cada segundo -->
<div aria-live="assertive">Tiempo restante: 4:59</div>

<!-- Correcto: hora de caducidad visible, sin anuncios continuos -->
<p>Tu sesión termina a las 10:42.
  <button type="button">Necesito más tiempo</button></p>

<!-- Se inserta una sola vez, 2 minutos antes del final -->
<div role="alert">Quedan 2 minutos. Pulsa «Necesito más tiempo» para seguir.</div>

<!-- Confirmación discreta -->
<div role="status">Borrador guardado.</div>

Para el movimiento, respeta la preferencia del sistema operativo «reducir movimiento» con la consulta de medios prefers-reduced-motion, y ofrece además un control visible para pausar carruseles y animaciones:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Diseño engañoso: qué es y por qué golpea más fuerte

Un patrón de diseño engañoso es una decisión de interfaz que lleva a la persona a hacer algo que no habría elegido con información clara y tiempo: aceptar un seguro, compartir datos, no darse de baja. Funcionan porque explotan la prisa, la lectura en diagonal, la confianza en la jerarquía visual y la dificultad para procesar negaciones. Por eso golpean con más fuerza a quien tiene menos margen cognitivo: personas con discapacidad intelectual, con deterioro cognitivo, mayores con poca experiencia digital o cualquiera bajo estrés.

Patrón	Ejemplo	Qué función explota	Alternativa respetuosa
Falsa urgencia	«La oferta acaba en 09:59», y el contador se reinicia al recargar	Velocidad y atención: impide leer y comparar	Fechas reales, sin contadores ficticios
Preselección	Casilla de publicidad o de seguro ya marcada	Lectura: quien lee despacio no la ve	Casillas desmarcadas y consentimiento activo
Pregunta trampa	«Desmarque si no desea dejar de recibir ofertas»	Lenguaje: dobles negaciones	Pregunta directa en positivo
Culpabilización	«No, prefiero pagar más»	Emoción frente a decisión	«No, gracias»
Obstrucción	Alta en un clic; baja solo por teléfono y en horario de oficina	Función ejecutiva y memoria	Baja por el mismo canal y con el mismo esfuerzo
Interferencia visual	«Aceptar» grande y de color; «Rechazar» como enlace gris pequeño	Percepción: la jerarquía decide por ti	Opciones equivalentes con el mismo peso visual
Insistencia	La misma ventana vuelve en cada página	Atención y cansancio	Respetar la respuesta y recordarla
Goteo de precio	Gastos que aparecen en el último paso	Cálculo y memoria	Precio final visible desde el principio

Algunos de estos patrones son además fallos WCAG: un botón «Rechazar» con contraste insuficiente incumple 1.4.3 Contraste (mínimo); una etiqueta ambigua, 3.3.2 Etiquetas o instrucciones; un contador real sin opción de ampliar, 2.2.1; una compra sin posibilidad de revisar y corregir, 3.3.4 Prevención de errores (legales, financieros, de datos).

<!-- Incorrecto: preseleccionada y con doble negación -->
<input type="checkbox" id="pub" checked>
<label for="pub">No deseo dejar de recibir comunicaciones de terceros</label>

<!-- Correcto: desmarcada, en positivo y concreta -->
<input type="checkbox" id="pub">
<label for="pub">Quiero recibir ofertas de empresas colaboradoras por correo</label>

El marco legal: ya no es solo una cuestión ética

• El Reglamento de Servicios Digitales, Reglamento (UE) 2022/2065, prohíbe en su artículo 25 que las plataformas en línea diseñen interfaces que engañen, manipulen o mermen la capacidad de las personas de tomar decisiones libres e informadas.
• La Directiva 2005/29/CE sobre prácticas comerciales desleales, transpuesta en España principalmente en la Ley de Competencia Desleal, prohíbe las prácticas engañosas y agresivas y protege de forma específica a los consumidores especialmente vulnerables por su edad o por una dolencia física o mental.
• El RGPD exige un consentimiento libre, específico, informado e inequívoco: el Tribunal de Justicia de la UE (asunto Planet49, 2019) confirmó que una casilla premarcada no es consentimiento válido, y la guía de la Agencia Española de Protección de Datos sobre cookies pide que rechazar sea tan sencillo como aceptar.
• El Reglamento de Inteligencia Artificial prohíbe en su artículo 5 los sistemas de IA que explotan vulnerabilidades derivadas de la edad, la discapacidad o la situación social o económica para alterar de forma sustancial el comportamiento y causar perjuicios.

Como auditor de accesibilidad no te corresponde calificar jurídicamente una práctica, pero sí señalar el hallazgo, explicar a quién perjudica y recomendar que lo valore la asesoría jurídica.

Cómo detectarlo en una revisión

1. ¿Puedo completar la tarea principal sin cerrar nada que no haya pedido?
2. ¿Puedo rechazar, cancelar o darme de baja con el mismo número de pasos que aceptar o darme de alta?
3. ¿Hay algo marcado por defecto que me compromete (pagos, datos, publicidad, seguros)?
4. ¿Las opciones equivalentes tienen el mismo tamaño, contraste y un texto neutro?
5. ¿Hay presión de tiempo? ¿Es real y se puede ampliar?
6. ¿Conozco desde el principio el precio y las condiciones finales?
7. ¿Las preguntas están en positivo y sin dobles negaciones?

Resumen

• Cada interrupción no pedida (sonido, movimiento, ventanas, chats, avisos que desaparecen) se paga con atención y memoria de trabajo.
• Criterios implicados: 1.4.2, 2.2.1, 2.2.2, 3.2.1, 3.2.2 y 1.4.13; en AAA, 2.2.4 Interrupciones y 2.3.3 Animación desde interacciones.
• Usa role="status" para confirmaciones, role="alert" solo para lo urgente, nunca anuncios continuos, y respeta prefers-reduced-motion.
• El diseño engañoso explota la prisa, la lectura superficial y la jerarquía visual, y perjudica más a quien tiene menos margen cognitivo.
• El Reglamento de Servicios Digitales, la normativa de consumo, el RGPD y el Reglamento de IA ya lo limitan: en la auditoría, señálalo y recomienda valoración jurídica.