Annex

Fixing Focus Not Obscured (Minimum) on WooCommerce (WCAG 2.4.11)

When a control receives keyboard focus, it must not be completely hidden behind other content such as a sticky header or a cookie banner.

Why it matters

New in WCAG 2.2, so almost no site audited before 2023 has been checked against it — and almost every modern storefront has the pattern that breaks it. A sticky header plus a sticky Add to Cart bar plus a cookie banner means a keyboard user tabbing down the page repeatedly loses sight of where they are: the browser scrolls the focused element just into view, and the sticky header covers it. The customer is still technically on the control, but has no way to know.

WooCommerce — where to look

Theme sticky header styles; consent plugin; sticky add-to-cart plugin.

What to do

Set scroll-margin-top globally in the child theme. Sticky add-to-cart plugins are a frequent cause and usually expose a height setting that can be fed into the same value.

Verification status

Checked by reading the platform’s own source code. Storefront sets no scroll-margin or scroll-padding at all, the same gap Dawn has. If your theme or a plugin adds a sticky header or sticky add-to-cart bar, assume this criterion fails until you add the offset yourself.

Source: https://github.com/woocommerce/storefront/blob/trunk/assets/css/base/_base.scss

Reference themes change. If your store runs a different or older theme, confirm the file before editing it.

How to verify the fix

  1. Tab slowly down a long page — a checkout or a product page with a long description — and watch whether the focused control ever disappears under the header.
  2. Repeat with the cookie banner still showing, before it is dismissed. This is the state most first-time visitors are in.
  3. Repeat with the chat widget open.
  4. Test at a short viewport height, such as a laptop screen with the browser not maximised, where sticky elements take a larger share of the screen.

Other platforms

The full criterion

Read the full explanation of WCAG 2.4.11 Focus Not Obscured (Minimum), or the formal W3C definition.