> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 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](https://pandectes.io/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](/fr/article/comment-passer-a-la-nouvelle-banniere-ou-revenir-a-la-version-precedente-12cd6wh/). ### 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](https://pandectes.io/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](/fr/article/comment-utiliser-le-consentement-impose-modales-sur-la-nouvelle-banniere-10mg6r/). #### « 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)](/fr/article/comment-modifier-les-textes-et-les-liens-de-la-banniere-nouvelle-version-zn5i7v/). ### 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 * [Comment utiliser le consentement imposé (modales) sur la nouvelle bannière](/fr/article/comment-utiliser-le-consentement-impose-modales-sur-la-nouvelle-banniere-10mg6r/) * [Comment modifier les textes et les liens de la bannière (nouvelle version)](/fr/article/comment-modifier-les-textes-et-les-liens-de-la-banniere-nouvelle-version-zn5i7v/) * [Comment passer à la nouvelle bannière ou revenir à la version précédente](/fr/article/comment-passer-a-la-nouvelle-banniere-ou-revenir-a-la-version-precedente-12cd6wh/)