La bannière de cookies est-elle accessible ? WCAG 2.2 AA et ADA (nouvelle version)
Vue d’ensemble
La bannière de cookies Pandectes est certifiée WCAG 2.2 niveau AA. Zoonou Limited, une société indépendante de tests d'accessibilité, l'a auditée selon WCAG 2.2, Section 508 et EN 301 549, et a publié les résultats dans un rapport de conformité VPAT 2.5.
L'audit couvre chaque couche qu'un visiteur peut ouvrir : la Cookie notice, les Preferences et les détails des cookies. Il comprenait des tests manuels avec les lecteurs d'écran JAWS, NVDA et VoiceOver, la loupe de Windows, la commande vocale Dragon, ainsi que VoiceOver et TalkBack sur mobile. Chaque critère WCAG 2.2 des niveaux A et AA a été évalué comme Supports ou Not Applicable.
Vous pouvez lire la déclaration de conformité complète sur notre site : Conformité en matière d'accessibilité.
WCAG, ADA et votre boutique
L'ADA ne prévoit pas de certificat officiel pour les sites web. Aux États-Unis, WCAG est la référence la plus utilisée lorsque l'ADA s'applique aux sites web. Dans l'Union européenne, l'European Accessibility Act renvoie à EN 301 549, qui inclut WCAG. La bannière respecte les deux.
La certification couvre la bannière elle-même. Votre thème, votre contenu produit et votre tunnel de paiement doivent encore respecter les recommandations par eux-mêmes. Cet article est une information, et non un conseil juridique.
Si vous partagez nos résultats avec un auditeur, la page Conformité en matière d'accessibilité est le meilleur lien à lui envoyer.
Constats d'audit courants, expliqués
Les outils de scan automatique et certains audits signalent les mêmes trois points. Voici comment la bannière se comporte et ce que vous pouvez modifier.
« Le focus n'est pas piégé à l'intérieur de la bannière »
Par défaut, la bannière est non modale. Les visiteurs peuvent continuer à lire et à naviguer sur la page pendant qu'elle est ouverte, donc le clavier passe de la bannière à la page et inversement. C'est voulu : WCAG n'exige que le focus reste dans une boîte de dialogue lorsque celle-ci bloque le reste de la page, et le critère 2.1.2 (No Keyboard Trap) exige qu'un visiteur puisse toujours sortir le focus d'un contenu non modal.
Si vous voulez que les visiteurs fassent un choix avant d'utiliser la page, activez le consentement imposé. La bannière s'ouvre alors comme une boîte de dialogue modale : la page derrière est bloquée, et Tab et Shift + Tab restent dans la bannière jusqu'à ce que le visiteur fasse un choix.
- Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
- Accédez à Cookie banner.
- Ouvrez l'onglet Advanced.
- Sous Enforced consent (modals), activez Enforced consent (modals).
- Facultatif : activez Lock background scroll.
- Enregistrez.
Plus de détails : Comment utiliser le consentement imposé (modals) sur la nouvelle bannière.
« Le focus ne revient pas sur la page après la fermeture de la bannière »
Lorsque la bannière s'ouvre, le focus clavier entre dedans, afin que les utilisateurs au clavier et de lecteurs d'écran commencent sur le message de la bannière.
Lorsque la bannière se ferme, le focus quitte la bannière et revient sur la page :
- Si le visiteur a ouvert la bannière depuis Consent widget ou un lien de réouverture, le focus revient sur ce widget ou ce lien.
- À la première visite, rien sur la page n'avait le focus avant la bannière, donc la prochaine pression sur Tab continue depuis la position de la bannière dans la page.
Le focus ne reste jamais sur un élément masqué, et aucune partie de la page n'est sautée. Si vous voulez que le focus atterrisse sur un élément précis après la fermeture de la bannière (par exemple le lien Skip to content de votre thème), c'est une modification de votre thème, et non de la bannière.
« Les liens n'annoncent pas qu'ils ouvrent un nouvel onglet ou un autre site »
Les liens de la bannière sont ceux que vous définissez dans l'onglet Content, sous Links :
- Privacy policy et Imprint s'ouvrent par défaut dans le même onglet. Ils ne s'ouvrent dans un nouvel onglet que si vous activez Always open links in a new tab.
- Le lien Google partners ouvre toujours la page de Google dans un nouvel onglet.
- Dans les préférences, les liens Learn more about provider ouvrent la page du fournisseur dans un nouvel onglet.
Ouvrir un lien dans un nouvel onglet sans avertissement n'est pas un échec des niveaux A ou AA de WCAG 2.2, mais un avertissement est utile. Vous pouvez en ajouter un de deux façons :
- Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
- Accédez à Cookie banner.
- Ouvrez l'onglet Content et faites défiler jusqu'à Links.
- Soit désactivez Always open links in a new tab, pour que vos propres pages s'ouvrent dans le même onglet, soit ajoutez l'avertissement au texte du lien, par exemple
Privacy policy (opens in a new tab). - Enregistrez, puis répétez la modification dans All settings > Translations pour vos autres langues.
Plus de détails : Comment modifier les textes et liens de la bannière (New Version).
Gardez la bannière accessible après personnalisation
La certification s'applique à la bannière telle que nous la livrons. Certaines modifications peuvent réduire le contraste ou la lisibilité :
- Colors: gardez un contraste suffisant entre le texte et l'arrière-plan, et entre les boutons et leurs libellés. En cas de doute, utilisez un préréglage dans l'onglet Style.
- Custom styling (CSS): ne masquez pas les contours de focus, ne réduisez pas le texte en dessous d'une taille lisible, et ne masquez pas les boutons.
- Texts: gardez des libellés de boutons clairs, comme Accept, Decline et Preferences.
Retour d'expérience
Si vous ou votre auditeur trouvez dans la bannière un élément difficile à utiliser, contactez-nous via le chat de l'application. Nous préférons connaître un obstacle plutôt que de voir un visiteur partir à cause de lui.
Articles associés
- Comment utiliser le consentement imposé (modals) sur la nouvelle bannière
- Comment modifier les textes et liens de la bannière (New Version)
- Comment passer à la nouvelle bannière ou revenir à la version précédente
Mis à jour le : 27/10/2026
Merci !