Articles sur : Paramètres

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 les normes WCAG 2.2, Section 508 et EN 301 549, et a publié les résultats dans un rapport de conformité au format VPAT 2.5.


L'audit couvre chaque couche que le visiteur peut ouvrir : la notice cookies, les préférences et le détail des cookies. Il comprenait des tests manuels avec les lecteurs d'écran JAWS, NVDA et VoiceOver, la Loupe Windows, le contrôle vocal Dragon, ainsi que VoiceOver et TalkBack sur mobile. Chaque critère WCAG 2.2 des niveaux A et AA a été évalué Supports ou Not Applicable.


La déclaration de conformité complète est disponible sur notre site : Accessibility conformance.


Nouvelle bannière. Pour les boutiques qui affichent le badge New version sur Cookie banner. Pour la bannière Legacy, consultez Comment passer à la nouvelle bannière ou revenir à la version précédente.


WCAG, ADA et votre boutique


L'ADA ne prévoit aucun certificat officiel pour les sites web. Aux États-Unis, les WCAG sont la référence la plus utilisée lorsque l'ADA est appliquée aux sites web. Dans l'Union européenne, l'Acte européen sur l'accessibilité renvoie à la norme EN 301 549, qui intègre les WCAG. La bannière respecte les deux.


La certification porte sur la bannière elle-même. Votre thème, vos contenus produits et votre checkout doivent aussi respecter ces règles de leur côté. Cet article est informatif et ne constitue pas un conseil juridique.


Si vous transmettez nos résultats à un auditeur, la page Accessibility conformance est le meilleur lien à envoyer.


Remarques fréquentes des audits, expliquées


Les outils automatiques et certains audits signalent souvent les trois mêmes points. Voici comment la bannière se comporte et ce que vous pouvez modifier.


« Le focus n'est pas piégé dans 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 : le clavier passe donc de la bannière à la page, et inversement. C'est voulu : les WCAG n'attendent un focus maintenu dans une boîte de dialogue que lorsque celle-ci bloque le reste de la page, et le critère 2.1.2 (Pas de piège au clavier) exige que le visiteur puisse toujours sortir d'un contenu non modal.


Si vous souhaitez 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 en arrière-plan est bloquée, et Tab et Maj + Tab restent dans la bannière jusqu'à ce que le visiteur fasse un choix.


  1. Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
  2. Allez dans Cookie banner.
  3. Ouvrez l'onglet Advanced.
  4. Sous Enforced consent (modals), activez Enforced consent (modals).
  5. Facultatif : activez Lock background scroll.
  6. Enregistrez.


Plus de détails : Comment utiliser le consentement imposé (modales) sur la nouvelle bannière.


« Le focus ne revient pas sur la page après la fermeture de la bannière »


À l'ouverture de la bannière, le focus clavier s'y place, afin que les utilisateurs du clavier et des lecteurs d'écran commencent par le message de la bannière.


À la fermeture, le focus quitte la bannière et revient sur la page :


  • Si le visiteur a ouvert la bannière depuis le Consent widget ou un lien de réouverture, le focus revient sur ce widget ou ce lien.
  • Lors de la première visite, aucun élément de la page n'avait le focus avant la bannière : la touche Tab suivante reprend donc à partir de l'emplacement 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 arrive sur un élément précis après la fermeture (par exemple le lien Skip to content de votre thème), il s'agit d'une modification de votre thème, pas 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, section 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 une non-conformité WCAG 2.2 de niveau A ou AA, mais un avertissement reste utile. Vous pouvez l'ajouter de deux façons :


  1. Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
  2. Allez dans Cookie banner.
  3. Ouvrez l'onglet Content et descendez jusqu'à Links.
  4. Désactivez Always open links in a new tab pour que vos propres pages s'ouvrent dans le même onglet, ou ajoutez l'avertissement au texte du lien, par exemple Politique de confidentialité (s'ouvre dans un nouvel onglet).
  5. Enregistrez, puis reportez la modification dans All settings > Translations pour vos autres langues.


Plus de détails : Comment modifier les textes et les liens de la bannière (nouvelle version).


Garder 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é :


  • Couleurs : gardez un contraste suffisant entre le texte et le fond, et entre les boutons et leurs libellés. En cas de doute, utilisez un preset dans l'onglet Style.
  • Custom styling (CSS) : ne masquez pas le contour de focus, ne réduisez pas le texte sous une taille lisible et ne masquez pas les boutons.
  • Textes : gardez des libellés de boutons clairs, comme Accepter, Refuser et Préférences.


Vos retours


Si vous ou votre auditeur trouvez un élément de la bannière difficile à utiliser, contactez-nous via le chat de l'application. Nous préférons être informés d'un obstacle plutôt que de voir un visiteur quitter la boutique à cause de lui.


Articles associés


Mis à jour le : 12/10/2026

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !