Menú de documentación
Accesibilidad (WCAG)
Accesibilidad del banner de CookieHug: semántica de diálogo, uso con teclado, gestión del foco, lectores de pantalla y movimiento reducido.
Accesibilidad del banner (WCAG)
El banner de consentimiento suele ser el primer elemento interactivo con el que se encuentra un visitante, incluidos quienes usan teclado o lector de pantalla. El banner de CookieHug está diseñado para cumplir los criterios WCAG 2.1 AA y se puede usar por completo sin ratón, sin ninguna configuración adicional por tu parte.
Semántica para tecnologías de apoyo
- El banner es un diálogo (
role="dialog") con título y descripción vinculados (aria-labelledby/aria-describedby): los lectores de pantalla lo anuncian correctamente al abrirse. - En la posición centrada (con fondo atenuado), el banner se marca como modal (
aria-modal="true"). - Los interruptores de categoría son elementos
checkboxreales con etiqueta: los lectores de pantalla anuncian el nombre de la categoría y su estado. - Las secciones desplegables (categorías, detalles de cookies) llevan
aria-expandedyaria-controls, de modo que el estado plegado siempre se anuncia. - Los elementos decorativos (el icono de cookie, las flechas) están ocultos a los lectores de pantalla (
aria-hidden). - El aviso de Global Privacy Control tiene el rol
status: su mensaje se anuncia sin robar el foco.
Uso con teclado y foco
| Tecla | Acción |
|---|---|
| Tab / Mayús+Tab | Recorre todos los controles del banner (botones, interruptores, secciones desplegables); en modo modal el foco circula dentro del diálogo (trampa de foco) |
| Intro / Espacio | Activa botones, cambia los interruptores de categoría, despliega secciones y detalles de cookies |
| Escape | Cierra un banner no modal (la decisión se puede tomar después con el icono flotante) |
El foco se gestiona automáticamente: cuando el visitante abre el banner, el foco entra en el diálogo, y al cerrarlo vuelve al punto de partida. Cuando un banner no modal aparece de forma automática, no se le quita el foco a la página. Todos los elementos tienen un indicador de foco visible (:focus-visible). El icono flotante para reabrirlo también es un botón accesible por teclado.
Movimiento reducido
Cuando el sistema del visitante indica la preferencia prefers-reduced-motion, las animaciones y transiciones del banner se desactivan.
Lo que queda de tu parte
- Contraste de color: los colores del banner los configuras tú; mantén un contraste entre texto y fondo de al menos 4,5:1 (WCAG 1.4.3). Las plantillas de estilo incluidas cumplen ese umbral.
- Lenguaje claro: si sustituyes los textos del banner, mantenlos sencillos y sin jerga.
- Idioma del banner acorde con el de la página: el SDK lo elige automáticamente a partir del atributo
lang, pero los textos que reemplaces deben estar escritos en el idioma correcto.