> ## 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).

# 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](https://pandectes.io/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](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/).

### 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](https://pandectes.io/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](/en/article/how-to-use-enforced-consent-modals-on-the-new-banner-x26siz/).

#### "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.

#### "Links do not announce that they open a new tab or another website"

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)](/en/article/how-to-edit-banner-texts-and-links-new-version-mb7883/).

### 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.

### Related articles

* [How to use enforced consent (modals) on the new banner](/en/article/how-to-use-enforced-consent-modals-on-the-new-banner-x26siz/)
* [How to edit banner texts and links (New Version)](/en/article/how-to-edit-banner-texts-and-links-new-version-mb7883/)
* [How to switch to the new banner or switch back to the previous version](/en/article/how-to-switch-to-the-new-banner-or-switch-back-to-the-previous-version-x1xdn9/)