Bandeau cookies accessible : clavier, lecteurs d’écran et WCAG 2.2

Un bandeau cookies accessible est un bandeau que chaque visiteur peut comprendre et utiliser : au clavier seul, avec un lecteur d’écran, à 200 % de zoom, sur un petit téléphone, avec une basse vision ou un tremblement. Au-delà d’être la bonne chose à faire, c’est une condition de la validité du consentement : un visiteur qui ne peut pas atteindre le bouton Refuser ne s’est pas vu offrir un choix libre. Depuis le 28 juin 2025, l’acte législatif européen sur l’accessibilité (directive (UE) 2019/882) s’applique à toute une série de services en ligne, et le référentiel à l’aune duquel tout le monde mesure est WCAG 2.2, recommandation du W3C depuis le 5 octobre 2023 (l’édition en vigueur date du 12 décembre 2024). Voici la checklist, critère par critère.

Structure et sémantique

• Utilisez de vrais boutons. « Tout accepter », « Tout refuser » et « Personnaliser » sont des éléments <button>, pas des <div> stylés. Cela satisfait gratuitement le critère 4.1.2 Nom, rôle et valeur (niveau A) : le rôle est bouton, le nom est le texte, et l’état est exposé.
• Donnez un nom à la boîte de dialogue. Le conteneur du bandeau porte role="dialog" (ou alertdialog), aria-labelledby pointant vers son titre et aria-describedby pointant vers le texte explicatif, selon le modèle de boîte de dialogue des WAI-ARIA Authoring Practices.
• Indiquez la langue. Le texte du bandeau est dans la langue du visiteur, et le conteneur porte un attribut lang correspondant quand elle diffère de celle de la page, pour que le lecteur d’écran change de voix (3.1.1 et 3.1.2).
• Les interrupteurs ont le rôle switch. Dans le centre de préférences, chaque interrupteur de catégorie a role="switch" avec aria-checked, un libellé visible et une description de ce que fait la catégorie. La catégorie nécessaire est affichée comme toujours active et désactivée, pas masquée.

Clavier

• Tout est atteignable. Chaque commande fonctionne avec Tab, Maj+Tab, Entrée et Espace (2.1.1 Clavier, niveau A).
• Pas de piège sauf en modal. Une barre ou une boîte flottante ne doit pas piéger le focus ; un visiteur peut la dépasser avec Tab pour atteindre la page (2.1.2 Pas de piège au clavier, niveau A). Une fenêtre modale centrée qui bloque la page peut garder le focus à l’intérieur de la boîte de dialogue, selon le modèle de dialogue modal, et doit le libérer à la fermeture.
• Un ordre logique. Le focus se déplace titre, texte, Personnaliser, Tout refuser, Tout accepter (ou l’ordre que vous avez choisi), sans jamais sauter d’un endroit à l’autre (2.4.3 Parcours du focus, niveau A).
• Un focus visible. Chaque commande montre un contour de focus net (2.4.7 Visibilité du focus, niveau AA), et la commande qui a le focus n’est pas cachée derrière le bandeau lui-même ou un autre élément fixe (2.4.11 Focus non masqué (minimum), niveau AA, nouveau dans la version 2.2). Cela compte quand une barre en bas couvre un lien de la page qui a le focus.
• Échap. Pour une modale, Échap la ferme sans choisir, ce qui revient à ne pas encore consentir ; la page ne reste bloquée jusqu’à un choix que si vous avez décidé que le bandeau est modal.
• Pas de surprise au focus. Recevoir le focus ne doit pas déclencher un changement de contexte (3.2.1 Au focus, niveau A) : un interrupteur n’enregistre pas et ne ferme pas quand il reçoit le focus.

Conception visuelle

• Contraste. Le texte des deux boutons atteint 4,5:1 sur son fond (1.4.3 Contraste (minimum), niveau AA) ; les bordures de boutons, les contours de focus et les états des interrupteurs atteignent 3:1 (1.4.11 Contraste du contenu non textuel, niveau AA). Un libellé Refuser gris sur un bouton gris clair échoue ici et correspond aussi à la pratique du « contraste trompeur des boutons » décrite par la task force du CEPD en 2023.
• Taille. Les cibles font au moins 24 pixels CSS sur 24, avec de l’espace entre elles (2.5.8 Taille de la cible (minimum), niveau AA, nouveau dans la version 2.2). Agrandissez-les sur les écrans tactiles.
• Zoom et redistribution. Le bandeau reste utilisable à 200 % de taille de texte (1.4.4 Redimensionnement du texte, niveau AA) et dans une fenêtre de 320 pixels CSS de large sans défilement horizontal (1.4.10 Redistribution, niveau AA). Une barre en bas qui grandit jusqu’à couvrir tout l’écran du téléphone à 200 % est un échec courant ; laissez-la devenir une modale ou laissez-la défiler.
• Pas seulement la couleur. L’état actif d’un interrupteur est montré par la position ou une icône, pas seulement par la couleur (1.4.1 Utilisation de la couleur, niveau A).
• Mouvement. Aucune animation qui ne puisse être mise en pause ; respectez prefers-reduced-motion pour l’entrée.

Contenu

• Des mots simples, courts. Le premier écran dit de quoi parle le bandeau, quels sont les choix et où en lire plus.
• Des libellés équivalents. Tout refuser et Tout accepter sont des libellés parallèles ; rien ne présente le refus comme une perte.
• Les liens sont des liens. « Politique de cookies » et « Politique de confidentialité » sont de vrais liens au texte descriptif.
• Pas de limite de temps. Le bandeau ne disparaît pas et n’accepte pas automatiquement après un délai (2.2.1 Réglage du délai, niveau A).

Rouvrir les préférences

Un visiteur qui a refusé avec un lecteur d’écran doit pouvoir retrouver les réglages plus tard : un lien « Préférences de cookies » dans le pied de page, atteignable au clavier, qui ouvre le centre de préférences. La task force du CEPD demande un moyen facilement accessible de retirer son consentement, comme une icône visible en permanence ou un lien à un emplacement visible et standardisé.

Tests

1. Débranchez la souris. Parcourez le bandeau et les préférences avec Tab ; actionnez chaque commande ; vérifiez le contour de focus.
2. Activez VoiceOver (macOS, iOS), NVDA (Windows) ou TalkBack (Android) ; confirmez que la boîte de dialogue est annoncée avec son nom, chaque bouton avec son libellé, chaque interrupteur avec son état.
3. Zoomez à 200 % et réduisez la fenêtre à 320 pixels ; vérifiez que rien n’est coupé.
4. Passez un vérificateur de contraste sur les deux boutons et le contour de focus.
5. Lancez un vérificateur automatique (axe, Lighthouse) pour les erreurs évidentes, puis corrigez celles que seul un humain trouve.

Comment Cookiequiet gère l’accessibilité

Le bandeau de Cookiequiet s’affiche dans un shadow root avec de vrais boutons, une boîte de dialogue nommée, une utilisation au clavier, un focus visible, des interrupteurs avec états dans le centre de préférences, « Tout accepter » et « Tout refuser » à la même taille et au même poids, 24 langues choisies selon le navigateur du visiteur avec chaque texte modifiable, et trois dispositions (barre, boîte flottante, fenêtre modale centrée) pour choisir un comportement modal ou non. Les couleurs de votre marque restent les vôtres ; vérifiez leur contraste avec le vérificateur ci-dessus avant de publier.