Accesibilidade do consentimento de cookies: cumprimento do WCAG 2.2 para os banners de consentimento

Un banner de cookies que os usuarios de teclado non poden pechar, que os lectores de pantalla non poden anunciar ou que os visitantes con daltonismo non poden ler non é só mala experiencia de usuario — é un fallo de cumprimento en dúas frontes. Desde que a Lei europea de accesibilidade entrou en vigor en xuño de 2025, as interfaces de consentimento nos sitios web comerciais que atenden a usuarios da UE deben cumprir co WCAG 2.1 Nivel AA, sendo o WCAG 2.2 fortemente recomendado para 2026. Xunto co requisito do GDPR de que o consentimento sexa "outorgado libremente, específico, informado e sen ambigüidade", os banners inaccesibles levan agora dobre risco legal. Esta guía explica exactamente como é un banner de cookies conforme co WCAG en 2026.

Por que a accesibilidade e o consentimento se solapan agora

O GDPR esixe que o consentimento se poida obter de cada usuario, non só dos que poden ver e facer clic nun banner. O Comité Europeo de Protección de Datos aclarou que se un interesado non pode interactuar de xeito significativo coa interface de consentimento — debido a unha discapacidade que o sitio non accommodou — o consentimento non foi obtido validamente. Iso significa que as cookies nunca deberían terse cargado.

No ámbito da accesibilidade, a Lei europea de accesibilidade (EAA), transposta á lexislación nacional en todos os Estados membros da UE, fai do WCAG 2.1 AA o mínimo para os sitios web e aplicacións do sector privado que ofrecen servizos ao consumidor. O réxime sancionador varía segundo o país, pero normalmente oscila entre 50.000 e 500.000 euros por infracción, ademais de ordes de retirada do mercado para o incumprimento persistente.

Os requisitos básicos do WCAG para os banners de cookies

Operabilidade co teclado

Cada control do banner — Aceptar, Rexeitar, Xestionar preferencias, pechar — debe ser accesible e operativo só co teclado. Os usuarios deben poder moverse entre os botóns en orde lóxica con Tab e activalos con Enter ou Space. O foco debe ser visible cunha relación de contraste mínima de 3:1 contra o fondo.

Captura do foco en banners modais

Se o banner bloquea a interacción co resto da páxina, o foco do teclado debe quedar atrapado dentro do banner ata que o usuario faga unha elección. Os usuarios non deben poder saír do banner con Tab para desprazarse pola páxina subxacente. Cando o foco estaba atrapado e o banner péchase, o foco debe volver ao elemento que activou o banner ou a un valor predeterminado razoable.

Anuncios do lector de pantalla

O banner debe ser anunciado como un diálogo cun nome e un papel accesibles. Usa `role="dialog"` ou `role="alertdialog"` con `aria-labelledby` que apunte ao encabezado do banner e `aria-describedby` que apunte ao texto explicativo.

Contraste de cor

O texto principal debe cumprir un contraste de 4,5:1 contra o fondo; o texto grande (18pt+ ou 14pt negrita) precisa 3:1. O texto dos botóns, as iconas e os indicadores de foco teñen todos os seus propios mínimos de contraste. Un botón "Rexeitar" gris claro sobre fondo branco é un fallo frecuente do WCAG que vemos nas auditorías.

Sen indicios só de cor

Non te apoies só na cor para diferenciar Aceptar de Rexeitar. Usa etiquetas, iconas ou formas distintas para que os usuarios con daltonismo poidan distinguir os botóns.

Patróns escuros e accesibilidade

O WCAG 2.2 introduce novos criterios que apuntan directamente aos patróns escuros — especialmente relevantes para o consentimento:

RTL e internacionalización

A accesibilidade esténdese ás linguas de dereita a esquerda (árabe, hebreo, persa, urdú) e á pronunciación do lector de pantalla:

Probar o teu banner para o cumprimento do WCAG

Non confíes nunha única ferramenta. Combina o escaneo automatizado con probas reais de tecnoloxía de asistencia:

Fallos comúns de accesibilidade que vemos

Como FlexyConsent ofrece accesibilidade

FlexyConsent cumpre co WCAG 2.2 AA de serie:

  • Todos os controis son operables co teclado con indicadores de foco visibles de 3:1.
  • `role="dialog"` adecuado con `aria-labelledby` e `aria-describedby`.
  • Trampa de foco con Escape para pechar nos banners opcionais.
  • Contraste de 4,5:1+ en cada elemento de texto, incluído Rexeitar.
  • Inversión RTL automática para as localidades árabe, hebreo, persa e urdú.
  • Atributo `lang` establecido por tradución para a pronunciación correcta do lector de pantalla.
  • Deseño tolerante ao zoom que segue sendo usable ao 400%.
← Blog Ler todo →