Menu de la documentation
Accessibilité (WCAG)
Accessibilité de la bannière CookieHug : sémantique de dialogue, navigation au clavier, gestion du focus, lecteurs d'écran et mouvement réduit.
Accessibilité de la bannière (WCAG)
La bannière de consentement est souvent le premier élément interactif que rencontre un visiteur — y compris ceux qui utilisent un clavier ou un lecteur d'écran. La bannière CookieHug est conçue pour répondre aux critères WCAG 2.1 AA et s'utilise entièrement sans souris, sans configuration supplémentaire de votre part.
Sémantique pour les technologies d'assistance
- La bannière est une boîte de dialogue (
role="dialog") avec un titre et une description liés (aria-labelledby/aria-describedby) — les lecteurs d'écran l'annoncent correctement à l'ouverture. - En position centrée (avec fond assombri), la bannière est marquée modale (
aria-modal="true"). - Les interrupteurs de catégorie sont de véritables éléments
checkboxavec étiquette — les lecteurs d'écran annoncent le nom de la catégorie et son état. - Les sections dépliables (catégories, détails des cookies) portent
aria-expandedetaria-controls, si bien que l'état replié est toujours annoncé. - Les éléments décoratifs (icône cookie, chevrons) sont masqués aux lecteurs d'écran (
aria-hidden). - Le bandeau Global Privacy Control a le rôle
status— son message est annoncé sans voler le focus.
Navigation au clavier et focus
| Touche | Action |
|---|---|
| Tab / Maj+Tab | Parcourt tous les contrôles de la bannière (boutons, interrupteurs, sections dépliables) ; en mode modal, le focus circule à l'intérieur de la boîte de dialogue (piège à focus) |
| Entrée / Espace | Active les boutons, bascule les interrupteurs de catégorie, déplie les sections et les détails des cookies |
| Échap | Ferme une bannière non modale (la décision pourra être prise plus tard via l'icône flottante) |
Le focus est géré automatiquement : lorsque le visiteur ouvre la bannière, il entre dans la boîte de dialogue et, à la fermeture, il revient à son point de départ. Lorsqu'une bannière non modale s'affiche automatiquement, le focus n'est pas retiré à la page. Chaque élément dispose d'un indicateur de focus visible (:focus-visible). L'icône flottante de réouverture est elle aussi un bouton accessible au clavier.
Mouvement réduit
Lorsque le système du visiteur signale la préférence prefers-reduced-motion, les animations et transitions de la bannière sont désactivées.
Ce qui reste de votre côté
- Contraste des couleurs — vous configurez vous-même les couleurs de la bannière ; maintenez un contraste texte/fond d'au moins 4,5:1 (WCAG 1.4.3). Les modèles de style fournis respectent ce seuil.
- Langue claire — si vous remplacez les textes de la bannière, gardez-les simples et sans jargon.
- Langue de la bannière cohérente avec celle de la page — le SDK la choisit automatiquement d'après l'attribut
langde la page, mais les textes remplacés doivent être rédigés dans la bonne langue.