Atenció, distraccions i disseny enganyós

L'atenció és un recurs limitat i moltes interfícies hi competeixen: finestres emergents, xats que s'obren sols, comptadors, carrusels, notificacions. Algunes van més enllà i aprofiten els límits cognitius per empènyer decisions que la persona no prendria amb calma: són els dark patterns, que aquí anomenarem patrons de disseny enganyós. A la lliçó anterior vas veure l'objectiu 5 de COGA («Ajudar a concentrar-se»). Aquí el desenvolupem amb els criteris WCAG implicats, codi que el resol bé, una classificació del disseny enganyós i el marc europeu que ja el prohibeix en diversos contextos.

El que costa una interrupció

Per a una persona amb TDAH, dany cerebral adquirit o fatiga cognitiva, una interrupció no només treu uns segons: trenca el fil i obliga a reconstruir la tasca amb la memòria de treball, que és justament la funció més fràgil. Les fonts habituals d'interrupció en webs i apps són:

• Finestres de subscripció que apareixen en arribar a la pàgina o en intentar sortir-ne.
• Xats que s'obren sols i saluden amb so.
• Avisos de galetes que tapen el contingut i la tasca principal.
• Vídeos que es reprodueixen sols, carrusels que avancen sense demanar-ho i animacions de fons.
• Notificacions emergents (toasts) que desapareixen abans de poder-les llegir.
• Missatges de pressió del tipus «12 persones estan mirant aquesta habitació».

Diverses d'aquestes situacions ja tenen un criteri WCAG 2.2 al darrere: 1.4.2 Control de l'àudio (A) exigeix poder posar en pausa o silenciar el so automàtic de més de 3 segons; 2.2.2 Posar en pausa, aturar, amagar (A) exigeix poder aturar el moviment automàtic que dura més de 5 segons i es presenta al costat d'un altre contingut; 3.2.1 En rebre el focus i 3.2.2 En introduir dades (A) prohibeixen els canvis de context inesperats; 1.4.13 Contingut en passar el cursor o en rebre el focus (AA) demana que el que apareix en passar el ratolí es pugui descartar i no desaparegui sol. Una notificació que s'esvaeix als tres segons funciona a la pràctica com un límit de temps per llegir-la, i s'analitza amb 2.2.1 Temps ajustable. En el nivell AAA, 2.2.4 Interrupcions demana que l'usuari pugui ajornar o suprimir les interrupcions llevat de les emergències, i 2.3.3 Animació a partir d'interaccions que es pugui desactivar l'animació provocada per la interacció.

Avisos sense soroll i moviment sota control

Les regions vives (aria-live) que vas veure al nivell 3 ajuden a anunciar canvis, però mal utilitzades es converteixen en una altra font d'interrupció, també per a qui fa servir lector de pantalla. La regla: role="status" (anunci cortès, espera que el lector acabi) per a confirmacions com «Desat»; role="alert" (anunci immediat) només per al que és urgent; i mai un comptador que s'anuncia cada segon.

<!-- Incorrecte: el lector anuncia el compte enrere cada segon -->
<div aria-live="assertive">Temps restant: 4:59</div>

<!-- Correcte: hora de caducitat visible, sense anuncis continus -->
<p>La teva sessió acaba a les 10:42.
  <button type="button">Necessito més temps</button></p>

<!-- S'insereix una sola vegada, 2 minuts abans del final -->
<div role="alert">Queden 2 minuts. Prem «Necessito més temps» per continuar.</div>

<!-- Confirmació discreta -->
<div role="status">Esborrany desat.</div>

Per al moviment, respecta la preferència del sistema operatiu «reduir el moviment» amb la consulta de mitjans prefers-reduced-motion, i ofereix a més un control visible per posar en pausa carrusels i animacions:

@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;
  }
}

Disseny enganyós: què és i per què colpeja més fort

Un patró de disseny enganyós és una decisió d'interfície que porta la persona a fer una cosa que no hauria triat amb informació clara i temps: acceptar una assegurança, compartir dades, no donar-se de baixa. Funcionen perquè exploten la pressa, la lectura en diagonal, la confiança en la jerarquia visual i la dificultat per processar negacions. Per això colpegen amb més força qui té menys marge cognitiu: persones amb discapacitat intel·lectual, amb deteriorament cognitiu, gent gran amb poca experiència digital o qualsevol persona sota estrès.

Patró	Exemple	Quina funció explota	Alternativa respectuosa
Falsa urgència	«L'oferta acaba en 09:59», i el comptador es reinicia en recarregar	Velocitat i atenció: impedeix llegir i comparar	Dates reals, sense comptadors ficticis
Preselecció	Casella de publicitat o d'assegurança ja marcada	Lectura: qui llegeix a poc a poc no la veu	Caselles desmarcades i consentiment actiu
Pregunta trampa	«Desmarqueu si no voleu deixar de rebre ofertes»	Llenguatge: dobles negacions	Pregunta directa en positiu
Culpabilització	«No, prefereixo pagar més»	Emoció davant de decisió	«No, gràcies»
Obstrucció	Alta en un clic; baixa només per telèfon i en horari d'oficina	Funció executiva i memòria	Baixa pel mateix canal i amb el mateix esforç
Interferència visual	«Acceptar» gran i de color; «Rebutjar» com un enllaç gris petit	Percepció: la jerarquia decideix per tu	Opcions equivalents amb el mateix pes visual
Insistència	La mateixa finestra torna a cada pàgina	Atenció i cansament	Respectar la resposta i recordar-la
Degoteig de preu	Despeses que apareixen a l'últim pas	Càlcul i memòria	Preu final visible des del principi

Alguns d'aquests patrons són a més fallades WCAG: un botó «Rebutjar» amb contrast insuficient incompleix 1.4.3 Contrast (mínim); una etiqueta ambigua, 3.3.2 Etiquetes o instruccions; un comptador real sense opció d'ampliar, 2.2.1; una compra sense possibilitat de revisar i corregir, 3.3.4 Prevenció d'errors (legals, financers, dades).

<!-- Incorrecte: preseleccionada i amb doble negació -->
<input type="checkbox" id="pub" checked>
<label for="pub">No vull deixar de rebre comunicacions de tercers</label>

<!-- Correcte: desmarcada, en positiu i concreta -->
<input type="checkbox" id="pub">
<label for="pub">Vull rebre ofertes d'empreses col·laboradores per correu</label>

El marc legal: ja no és només una qüestió ètica

• El Reglament de serveis digitals, Reglament (UE) 2022/2065, prohibeix a l'article 25 que les plataformes en línia dissenyin interfícies que enganyin, manipulin o minvin la capacitat de les persones de prendre decisions lliures i informades.
• La Directiva 2005/29/CE sobre pràctiques comercials deslleials, transposada a Espanya principalment a la Llei de competència deslleial, prohibeix les pràctiques enganyoses i agressives i protegeix de manera específica els consumidors especialment vulnerables per la seva edat o per una malaltia física o mental.
• El RGPD exigeix un consentiment lliure, específic, informat i inequívoc: el Tribunal de Justícia de la UE (assumpte Planet49, 2019) va confirmar que una casella premarcada no és un consentiment vàlid, i la guia de l'Agència Espanyola de Protecció de Dades sobre galetes demana que rebutjar sigui tan senzill com acceptar.
• El Reglament d'intel·ligència artificial prohibeix a l'article 5 els sistemes d'IA que exploten vulnerabilitats derivades de l'edat, la discapacitat o la situació social o econòmica per alterar de manera substancial el comportament i causar perjudicis.

Com a auditor d'accessibilitat no et correspon qualificar jurídicament una pràctica, però sí assenyalar la troballa, explicar a qui perjudica i recomanar que la valori l'assessoria jurídica.

Com detectar-lo en una revisió

1. Puc completar la tasca principal sense tancar res que no hagi demanat?
2. Puc rebutjar, cancel·lar o donar-me de baixa amb el mateix nombre de passos que per acceptar o donar-me d'alta?
3. Hi ha alguna cosa marcada per defecte que em compromet (pagaments, dades, publicitat, assegurances)?
4. Les opcions equivalents tenen la mateixa mida, el mateix contrast i un text neutre?
5. Hi ha pressió de temps? És real i es pot ampliar?
6. Conec des del principi el preu i les condicions finals?
7. Les preguntes estan en positiu i sense dobles negacions?

Resum

• Cada interrupció no demanada (so, moviment, finestres, xats, avisos que desapareixen) es paga amb atenció i memòria de treball.
• Criteris implicats: 1.4.2, 2.2.1, 2.2.2, 3.2.1, 3.2.2 i 1.4.13; en AAA, 2.2.4 Interrupcions i 2.3.3 Animació a partir d'interaccions.
• Fes servir role="status" per a les confirmacions, role="alert" només per al que és urgent, mai anuncis continus, i respecta prefers-reduced-motion.
• El disseny enganyós explota la pressa, la lectura superficial i la jerarquia visual, i perjudica més qui té menys marge cognitiu.
• El Reglament de serveis digitals, la normativa de consum, el RGPD i el Reglament d'IA ja el limiten: a l'auditoria, assenyala'l i recomana una valoració jurídica.