Articles on: Settings

Is the cookie banner accessible? WCAG 2.2 AA and ADA (New Version)

Overview


The Pandectes cookie banner is WCAG 2.2 Level AA certified. Zoonou Limited, an independent accessibility testing company, audited it against WCAG 2.2, Section 508, and EN 301 549, and published the results in a VPAT 2.5 conformance report.


The audit covers every layer a visitor can open: the cookie notice, the preferences, and the cookie details. It included manual testing with the JAWS, NVDA, and VoiceOver screen readers, Windows Magnifier, Dragon voice control, and VoiceOver and TalkBack on mobile. Every WCAG 2.2 criterion at levels A and AA was rated Supports or Not Applicable.


You can read the full conformance statement on our website: Accessibility conformance.


New Banner. For stores with the New version badge on Cookie banner. On the Legacy Banner, see How to switch to the new banner or switch back to the previous version.


WCAG, ADA, and your store


The ADA has no official certificate for websites. In the United States, WCAG is the benchmark most widely used when the ADA is applied to websites. In the European Union, the European Accessibility Act points to EN 301 549, which includes WCAG. The banner meets both.


The certification covers the banner itself. Your theme, product content, and checkout still need to meet the guidelines on their own. This article is information, not legal advice.


If you share our results with an auditor, the Accessibility conformance page is the best link to send.


Common audit findings, explained


Automated scanners and some audits flag the same three points. Here is how the banner behaves and what you can change.


"Focus is not trapped inside the banner"


By default the banner is non-modal. Visitors can keep reading and browsing the page while it is open, so the keyboard moves from the banner to the page and back. This is intended: WCAG only expects focus to stay inside a dialog when the dialog blocks the rest of the page, and success criterion 2.1.2 (No Keyboard Trap) requires that a visitor can always move focus away from non-modal content.


If you want visitors to make a choice before they can use the page, turn on enforced consent. The banner then opens as a modal dialog: the page behind it is blocked, and Tab and Shift + Tab stay inside the banner until the visitor makes a choice.


  1. Open Shopify Admin > Apps > Pandectes GDPR Compliance.
  2. Go to Cookie banner.
  3. Open the Advanced tab.
  4. Under Enforced consent (modals), enable Enforced consent (modals).
  5. Optional: enable Lock background scroll.
  6. Save.


More details: How to use enforced consent (modals) on the new banner.


"Focus does not move to the page after the banner closes"


When the banner opens, keyboard focus moves into it, so keyboard and screen reader users start on the banner message.


When the banner closes, focus leaves the banner and goes back to the page:


  • If the visitor opened the banner from the Consent widget or a reopen link, focus returns to that widget or link.
  • On the first visit, nothing on the page had focus before the banner, so the next Tab press continues from the banner's position on the page.


Focus never stays on a hidden element, and no part of the page is skipped. If you want focus to land on a specific element after the banner closes (for example your theme's Skip to content link), that is a change in your theme, not in the banner.



The links in the banner are the ones you set on the Content tab under Links:


  • Privacy policy and Imprint open in the same tab by default. They only open in a new tab if you enable Always open links in a new tab.
  • The Google partners link always opens Google's page in a new tab.
  • In the preferences, Learn more about provider links open the provider's page in a new tab.


Opening a link in a new tab without a warning is not a WCAG 2.2 Level A or AA failure, but a warning is helpful. You can add one in two ways:


  1. Open Shopify Admin > Apps > Pandectes GDPR Compliance.
  2. Go to Cookie banner.
  3. Open the Content tab and scroll to Links.
  4. Either turn off Always open links in a new tab, so your own pages open in the same tab, or add the warning to the link text, for example Privacy policy (opens in a new tab).
  5. Save, then repeat the change in All settings > Translations for your other languages.


More details: How to edit banner texts and links (New Version).


Keep the banner accessible after you customize it


The certification applies to the banner as we ship it. Some changes can lower contrast or readability:


  • Colors: keep enough contrast between text and background, and between buttons and their labels. When in doubt, use a preset on the Style tab.
  • Custom styling (CSS): do not hide focus outlines, shrink text below a readable size, or hide buttons.
  • Texts: keep button labels clear, such as Accept, Decline, and Preferences.


Feedback


If you or your auditor find something in the banner that is hard to use, contact us through the chat in the app. We would rather hear about a barrier than have a visitor leave because of it.



Updated on: 12/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!