How do I make a cookie consent banner accessible?

An accessible cookie consent banner is one every visitor can find, read, understand and answer, using a keyboard, a screen reader, a phone or high zoom, and that never hides what they are working on. In practice that means the banner comes early in the keyboard and reading order, every choice is a real button with a clear name, text and buttons meet contrast and size minimums, and the banner either behaves as a proper modal dialog or stays clear of focused content. W3C's guidance on WCAG 2.4.11 names cookie consent notices specifically: a sticky notice fails if it entirely covers the component that has keyboard focus.¹

Why cookie banners deserve extra care

For many visitors, the cookie banner is the first thing on the page. If it cannot be operated, the rest of the site may be unusable or permanently half-covered. It is also usually third-party code from a consent app or plugin, so it can change without you noticing. And because it appears on every page until answered, one problem affects every page.

The requirements that apply

Sources: WCAG 2.2² and the Understanding documents for each criterion.¹⁴⁵⁶⁷

Modal or non-modal: pick one and build it properly

There are two sound ways to build a banner.

As a modal dialog

The banner takes focus when it appears and blocks the page until the visitor chooses. W3C says a properly constructed modal dialog will always pass 2.4.11, because it takes focus and prevents interaction outside it.¹ Follow the modal dialog pattern: move focus into the banner, keep Tab inside it, give it a name with aria-labelledby pointing to its heading, and return focus sensibly when it closes.³ The pattern lists Escape as the key that closes a dialog;³ for a consent banner, decide what Escape means and make sure it does not record a choice the visitor did not make.

As a non-modal banner

The banner sits at the top or bottom of the page while the visitor carries on. This is friendlier, but it is where 2.4.11 failures happen: a visitor tabs down the page and the focused link slides underneath a bottom banner. W3C lists passing approaches: use scroll padding so the banner does not overlap content, or close the banner when focus leaves it.¹ Put the banner's HTML near the start of the page so keyboard and screen reader users meet it first, rather than at the very end after hundreds of links.

Buttons, names and choices

• Use real buttons. "Accept all", "Reject all" and "Manage preferences" should be button elements, not styled div or span elements that cannot get keyboard focus.
• Make names specific. "Accept all cookies" and "Reject non-essential cookies" are clearer than "OK" and "No". A close icon needs a name such as "Close cookie banner".
• Give equal weight to the choices you offer. If "Reject" is pale grey text on white while "Accept" is a bold button, the reject option may fail contrast, and some visitors will not see it at all.
• Label category toggles. Each switch, such as "Marketing cookies", needs its name and its on or off state exposed to assistive technology, which is what 4.1.2 asks for custom controls.⁷ A native checkbox does this for free.
• Link the cookie policy with descriptive text, such as "Read our cookie policy", not "here". See link text that makes sense out of context.

Colour, size and zoom

Low contrast text is the most common accessibility failure on the web: WebAIM found it on 83.9% of the top million home pages in 2026.⁸ Banners are a frequent source, because they are often styled with light grey text to look unobtrusive. WCAG 1.4.3 asks for at least 4.5:1 for normal text and 3:1 for large text, which is 18 point, or 14 point bold.⁴

Buttons need to be easy to tap. WCAG 2.5.8 sets a minimum of 24 by 24 CSS pixels, with exceptions such as enough spacing around smaller targets and links inside a sentence.⁵ A cookie policy link in the banner's text is covered by the inline exception; the "Accept" and "Reject" buttons are not.

Zoom is where big banners fail. At 400% zoom on a desktop, the viewport is roughly the width of a small phone, about 320 CSS pixels.⁶ A banner that takes half the screen at normal size can cover all of it. W3C's guidance on reflow notes that fixed or sticky content reduces the space left for reading at high zoom, and recommends making it static at small sizes or letting people dismiss it.⁶ Check that the banner's text wraps, its buttons stack, and the visitor can scroll to every choice.

Shopify and WordPress tips

Shopify

Shopify's built-in cookie banner is set up under Settings, then Customer privacy, then Cookie banner. You can adjust its appearance, including colours, choose its position and edit its content.⁹ After any change, check the colours against your theme's background for contrast, and preview the banner on a phone and at high zoom. Shopify also says its automated privacy settings are not a substitute for legal advice.⁹

WordPress and WooCommerce

Cookie banners on WordPress almost always come from a plugin. Before you choose one, test its demo with a keyboard: can you reach "Reject" and the settings panel, and does focus come back after closing? Check its colour settings against your theme, and retest after plugin updates.

How to test your banner

1. Open your site in a private window so the banner appears. Press Tab. Do you reach the banner straight away, or only after the whole page?
2. Operate every choice with the keyboard alone, including the preferences panel and each category toggle.
3. If the banner is not modal, keep tabbing down the page with it showing. Does any focused link disappear behind it?
4. Listen with a screen reader. Is the banner announced? Do the buttons and toggles have clear names and states?
5. Zoom to 400%, or use a phone. Can you read the text and reach every button?

An automated check finds the measurable problems, such as low contrast, unnamed buttons and small targets. Jralo's free check runs in a real browser, so it sees the banner as a visitor does, and it also reads your terms, privacy and contact pages to suggest which countries' accessibility laws are likely relevant, with a link to a guide for each (general information, not legal advice). It cannot tell whether the banner's wording is clear or whether focus behaves sensibly, so do the keyboard test too. Accessibility and privacy law are separate questions; for the consent rules that apply to you, talk to a lawyer.