A cookie banner that does no harm: focus order, closing it, and the right to change your mind

A cookie banner is the first thing a visitor meets on a website, and in accessibility evaluations it regularly turns out to be the worst part of the entire site. Not because cookie consent is a hard problem, but because almost nobody solves it themselves: a plugin gets dropped in, it renders whatever it renders, and nobody ever checks what that does to keyboard users and screen readers. This article covers the three things that matter most, and explains why a plugin usually fails at all of them.

1. Focus order: the banner is not a modal window

Most banners behave like a modal window: as soon as the page loads, they grab keyboard focus, lock scrolling and cover the content. For someone using a keyboard or a screen reader, that means they can only reach the page they actually came for once they've dealt with the banner somehow. That's the wrong order of priorities: cookie consent is not why they came.

A correctly built banner is a region with its own heading, placed early in the document, right after the skip links, but it never moves focus onto itself. A keyboard user finds it after three presses of Tab; a screen reader user sees it in the list of regions and, on top of that, hears one polite sentence saying the banner exists and where it is. The whole page stays usable even before a decision is made, because until someone decides, nothing beyond the essential is stored.

A modal window only makes sense when you genuinely cannot proceed without a decision. That doesn't apply to cookies: without consent, the analytics and marketing scripts simply don't load. Anyone who insists on a modal window is admitting they want to force consent.

2. It can always be closed, and rejecting is exactly as easy as accepting

Two requirements, one technical and one ethical. Technical: the banner must be closable with the Escape key, and its content must not be a keyboard trap (criterion 2.1.2). Closing it without a decision counts as rejecting non-essential cookies; that follows from the requirement for consent to be freely given and active.

Ethical: the "Accept all" and "Reject non-essential" buttons must be equally visible and equally close together. A greyed-out "Reject" hidden behind a "Settings" button and three clicks away is a dark pattern, which European supervisory authorities — including the Slovak Office for Personal Data Protection and the European Data Protection Board — repeatedly flag as invalid consent. For a user with reduced attention or a cognitive impairment, it's not just an inconvenience, it's a barrier.

Closing also means the banner must not obscure the focused element (criterion 2.4.11 in WCAG 2.2). A banner pinned to the bottom of the window covers every button a keyboard user reaches at the end of the page. The fix is simple: while the banner is showing, it writes its height into the document's scroll-padding, and the browser scrolls the focused element above it automatically.

3. The right to change your mind

Consent that can't be withdrawn as easily as it was given is not consent. In practice that means a permanent link or "Change cookie settings" button, typically in the footer of every page, which opens the same banner with the current choice already set. On closing, focus returns to the button the user came from, exactly as with any other disclosure widget.

Two small things people tend to forget. First, remembering a rejection needs no cookie at all; the browser's local storage is enough. Second, the stored choice should carry a version: when a new category or a new tool is added, you bump the version and the banner asks again, instead of the new tool quietly hiding behind old consent.

Why not to use a plugin

This isn't dogma; it's experience from audits. Consent management platforms (plugins) regularly have these problems:

• They load third-party scripts before consent is given. The plugin itself is often a script from someone else's domain, carrying its own cookies and its own tracking. Cookie consent ends up being collected by a tool that breaches it itself.
• Generic ARIA instead of semantics. A window with no heading, buttons built from div elements, toggles with no labels, aria-hidden slapped on the whole page and forgotten after closing. For a screen reader, the site goes silent.
• A focus trap. Focus gets locked inside the banner, but Escape doesn't work and the only way out is to give consent.
• Content gets covered, with zero support for zooming. At 400% zoom the banner fills the whole screen and can't be scrolled away.
• It can't be checked or fixed. The code changes without your knowledge, an accessibility evaluation is only valid until the next update, and any bug you find, you can't fix.
• Legal risk stays yours. The duty to obtain consent under Article 5(3) of the ePrivacy Directive (2002/58/EC) as transposed by national law (in Slovakia, § 109(8) of Act No. 452/2021 Coll. on Electronic Communications) and the GDPR's conditions for consent rests with the website operator, not the plugin vendor.

A banner you build yourself is a few dozen lines: a region with a heading, three buttons, one group of toggles, and storing the choice. If you need to manage consent for dozens of tools, what you actually need is fewer tools.

What this looks like in practice

The accessible component patterns page has a banner that meets everything above, complete with a keyboard map, screen reader announcements and code to copy. This website doesn't use cookies at all, so the banner is just a demonstration — which makes it all the easier to try out.

Checklist

• The banner is a region with a heading, placed early in the document, with no focus moved onto it after loading.
• The page is usable without a decision; nothing non-essential loads before consent.
• Escape closes the banner and counts as rejection; keyboard focus can always get out of it.
• "Accept" and "Reject" are equal buttons; no categories are pre-checked by default.
• The banner doesn't obscure the focused element; the content behind it can still be scrolled into view even at 400% zoom.
• The choice can be changed from any page; closing returns focus to the button.
• The choice carries a version, and the banner asks again when the categories change.
• After saving, a status message sounds, which a screen reader reads without interruption.