When a cookie banner covers the button you just tabbed to
A cookie banner that covers the button you just tabbed to is a keyboard problem. It is not a matter of taste.
You press Tab. The highlight lands on a link or a field. Then the banner, a sticky bar, or a chat bubble sits on top of it. The person who cannot use a mouse cannot see what they are about to open. WCAG 2.2 calls the rule Focus Not Obscured. The W3C write-up uses a cookie banner as the example: if that banner hides the focused control completely, the page fails.
How to see it in a minute
Start at the top of the page and press Tab. Watch the outline. If it vanishes behind something glued to the screen, you have found it. Sticky headers do this. Chat widgets in the corner do this. A full-width banner parked on the bottom does this when the next link scrolls underneath it.
A banner that stops the page until someone chooses can be fine. Focus stays on the banner, so there is nothing hidden behind it. The failure is the banner that hangs around while tabbing continues into the page.
On a phone the banner is often half the screen. One or two tabs and the next link is gone. Do that check on the homepage before you debate the rest of the site. A desktop bar can hide the same control under a thinner strip, so try both widths if the banner changes size.
This is also why the rule is in the news. The new European standard, EN 301 549 V4.1.1, moves websites toward WCAG 2.2. This is one of the additions. You still confirm it with the Tab key, not with a version number on a slide.
What the banner is not telling you
Covering a button and firing marketing tags are different mistakes. This one is about whether you can see the control. Do cookie banners stop pre-consent tracking? is about what loads before anyone clicks Accept. A tidy banner can fail both. It can also fail only one.
The cookie consent scanner records that first load. It will not tell you the highlight disappeared.
The fail is “completely hidden,” not “a little cropped.” If you can still see part of the button, you have not hit this particular rule, though the page can still be awkward. The fix is ordinary. Let the banner take over until the person dismisses it, or keep the page from sliding the next control underneath the banner. Then tab through again. If you can see every stop, you are done.
Questions
- Does a cookie banner always fail this check?
- No. A banner that takes over the page until the person chooses can keep focus inside the banner. A banner that stays on screen while you keep tabbing into the page underneath can hide the next control completely.
- Will an automated accessibility scan catch a banner covering a button?
- Do not count on it. The reliable check is to tab through the page and watch whether the highlight stays visible. A cookie scan records what loaded before Accept. It does not watch the keyboard.
Want evidence on a live URL? Run a free accessibility check.