Per Què l'Accessibilitat i el Consentiment Ara es Superposen

El GDPR requereix que el consentiment sigui obtenible de cada usuari, no només d'aquells que poden veure i fer clic en un banner. El Comitè Europeu de Protecció de Dades ha aclarit que si un interessat no pot interactuar de manera significativa amb la interfície de consentiment — a causa d'una discapacitat que el lloc no ha acomodat — el consentiment no s'ha obtingut válidamente. Això significa que les cookies no haurien d'haver-se carregat en primer lloc.

Pel que fa a l'accessibilitat, la Llei Europea d'Accessibilitat (EAA), transposada a la legislació nacional en tots els estats membres de la UE, fa que WCAG 2.1 AA sigui el mínim per als llocs web i aplicacions del sector privat que ofereixen serveis als consumidors. El règim de sancions varia per país però normalment oscil·la entre 50.000 i 500.000 euros per infracció, a més d'ordres de retirada del mercat per a l'incompliment persistent.

Els Requisits Bàsics de WCAG per als Banners de Cookies

Operabilitat amb Teclat

Cada control del banner — Acceptar, Rebutjar, Gestionar Preferències, tancar — ha de ser accessible i operable només amb el teclat. Els usuaris han de poder navegar pels botons en un ordre lògic amb Tab i activar-los amb Enter o Space. El focus ha de ser visible amb una relació de contrast mínima de 3:1 respecte al fons.

Trampa de Focus en Banners Modals

Si el banner bloqueja la interacció amb la resta de la pàgina, el focus del teclat ha de quedar atrapat dins del banner fins que l'usuari faci una elecció. Els usuaris no haurien de poder fer Tab fora del banner per desplaçar-se per la pàgina subjacent. Quan el focus estava atrapat i el banner es tanca, el focus hauria de tornar a l'element que va desencadenar el banner o a un valor predeterminat raonable.

Anuncis del Lector de Pantalla

El banner ha de ser anunciat com a diàleg amb un nom accessible i rol. Useu role="dialog" o role="alertdialog" amb aria-labelledby apuntant a l'encapçalament del banner i aria-describedby apuntant al text explicatiu.

Contrast de Color

El text del cos ha de complir un contrast de 4.5:1 respecte al fons; el text gran (18pt+ o 14pt en negreta) necessita 3:1. El text dels botons, les icones i els indicadors de focus tots tenen els seus propis mínims de contrast. Un botó «Rebutjar» de color gris clar sobre un fons blanc és un error freqüent de WCAG que veiem en les auditories.

Sense Pistes Basades Únicament en Color

No us baseu únicament en el color per diferenciar Acceptar de Rebutjar. Useu etiquetes, icones o formes diferenciades perquè els usuaris amb daltonisme puguin distingir els botons.

Patrons Foscos i Accessibilitat

WCAG 2.2 introdueix nous criteris que apunten directament als patrons foscos — especialment rellevants per al consentiment:

• 3.3.8 Autenticació Accessible — prohibeix els trencaclosques cognitius com a fricció de consentiment.
• 3.3.7 Entrada Redundant — els usuaris no haurien de tornar a introduir informació per retirar el consentiment.
• 2.4.11 Focus No Ocult — el banner en si no hauria d'ocultar l'indicador de focus dels elements que hi ha darrere.
• 2.5.7 Moviments d'Arrossegament — si el vostre banner utilitza una interacció d'arrossegament per acceptar, ha d'existir una alternativa d'un sol punter.

RTL i Internacionalització

L'accessibilitat s'estén als idiomes de dreta a esquerra (àrab, hebreu, persa, urdú) i a la pronunciació del lector de pantalla:

• Establiu dir="rtl" al banner quan l'idioma del document sigui RTL perquè l'ordre dels botons i el flux del focus coincideixi amb la direcció de lectura.
• Useu atributs lang correctes en la còpia del banner traduïda perquè els lectors de pantalla pronunciïn les paraules amb la fonètica correcta.
• Mirall de la iconografia — els xifretes, fletxes i indicadors de progrés s'han de girar per als entorns regionals RTL.

Prova del Vostre Banner per al Compliment de WCAG

No us baseu en una sola eina. Combineu l'escaneig automatitzat amb proves reals de tecnologia d'assistència:

• axe DevTools o Lighthouse — detecta aproximadament el 30-40% dels errors de WCAG automàticament.
• NVDA o JAWS a Windows, VoiceOver a Mac/iOS, TalkBack a Android — feu proves amb lectors de pantalla reals. Es pot anunciar, navegar i rebutjar el banner usant només el lector de pantalla?
• Navegació només amb teclat — desconnecteu el ratolí. Si no podeu Acceptar, Rebutjar i gestionar preferències, els usuaris de teclat tampoc ho podran fer.
• Simulació de daltonisme — Chrome DevTools té simuladors de deficiències visuals integrats. Comproveu que Acceptar i Rebutjar es puguen distingir sota protanopia, deuteranopia i tritanopia.
• Zoom al 400% — WCAG requereix que el contingut romangui usable al 400% de zoom sense desplaçament horitzontal. Els banners de posició fixa sovint fallen aquesta prova.

Errors d'Accessibilitat Habituals que Veiem

• Rebuig amagat darrere d'una icona d'engranatge — patró fosc a més d'error d'accessibilitat (sense nom accessible al botó de la icona).
• El focus mai arriba al banner — banners que roben l'atenció visual però s'ometen en l'ordre de Tab.
• Banner modal sense trampa de focus — els usuaris poden navegar amb Tab a la pàgina de fons mentre el banner pretén bloquejar la interacció.
• Cap aria-live en els canvis de preferències — els usuaris del lector de pantalla no escolten la confirmació que la seva elecció s'ha desat.
• Banners traduïts sense atribut lang — els lectors de pantalla pronuncien el text en espanyol amb la fonètica anglesa.

Com FlexyConsent Ofereix Accessibilitat