Focused elements must not be hidden by sticky headers or overlays

When a sticky header, cookie bar or chat bubble covers the element a keyboard user has just moved to, they cannot see what is focused and may activate the wrong thing. On long category pages this can happen on almost every row of products.

Rule id
vs-focus-obscured
Source
Validiscan check
Impact
Serious
Fix tier
ASSISTED
on Shopify, Shopware, WooCommerce and Magento
Status
runs

What the check does

Detects elements that are completely covered by sticky or fixed content, such as headers, cookie bars or chat widgets, at the moment they receive keyboard focus (2.4.11).

The check takes up to 150 keyboard-reachable elements in document order, iframe included, and skips negative tabindex values and hidden, disabled or zero-size elements. Each gets a plain focus() call, which scrolls the page as keyboard focus does and respects scroll-padding. It runs at every scan viewport, by default 1440 and 390 px wide.

It then tests nine points: the center, the corners and the edge midpoints, up to 3 px inside the edges. Points outside the viewport are skipped. A point is covered when the topmost element there is, or sits inside, a position: fixed or position: sticky container that does not hold the focused element and has an effective opacity of at least 0.1.

When every tested point is covered, the element becomes a finding naming the container that covers most points. A partly covered element goes to needs review, because the check cannot tell whether the visible part still shows what has focus. The scanner does not turn needs review into findings today.

How to fix it

Set scroll-padding-top (and scroll-padding-bottom) to the height of sticky headers and bars so focused elements scroll into the visible area, keep chat launchers and cookie bars clear of page content, and let visitors dismiss or minimise overlays.

WCAG success criteria

EN 301 549 clauses

The EN 301 549 clause of each criterion, by version of the standard
WCAG criterion Version 3.2.1 Version 4.1.1
2.4.11 not a clause in this version 9.2.4.11

Start with a free check of your shop.

Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.

Request a free check

Or write to info@validiscan.com.

What the free check covers, and what it leaves out
You send
your shop’s address
Pages scanned
up to 15
You get
every failure the scan can prove, with the page and the code
On your shop
public pages only; no login, nothing bought, no forms sent
What it is not
a full audit

Write to Validiscan

For a free check, give the address of your shop and its platform.

Validiscan uses what you send to answer you. Privacy notice