Start free

WCAG AA · 2.4.11Checked on paid plansEU · US

Focused items are hidden behind sticky bars or banners

What does WCAG 2.4.11 Focus Not Obscured mean?

Short answer

A focused element must not be fully hidden by your own content (WCAG 2.4.11, new in 2.2). On stores the culprits are sticky headers, announcement bars and cookie banners.

Why it matters

A keyboard user who Tabs onto a link hidden under a sticky header can’t see what they are about to press. It is a common side effect of sticky designs and is easy to miss with a mouse.

How to fix it

Shopify

  1. Go to Theme settings, Custom CSS and add html { scroll-padding-top: 120px; } using your header’s height.
  2. Add scroll-padding-bottom too if you have a sticky footer bar or chat button.
  3. Keep the cookie banner from covering the page while it is open, or make it move focus into itself.

WooCommerce

  1. Add the same scroll-padding rule in Additional CSS, sized to your sticky header.
  2. Check sticky header settings in your theme or page builder; some let you turn stickiness off on small screens.
  3. In your cookie banner plugin, pick a layout that doesn’t sit over content, or one that takes focus.

In the code

  1. Add scroll-padding-top (and -bottom) to html equal to the sticky header (or footer) height.
  2. Make sure cookie banners don’t cover the page while they are open, or move focus into them.

Automated tools test one window size and the order Tab walks. Content covered only at other sizes, or only after scrolling a certain way, can be missed. Partly covered items pass this AA criterion but may still be hard to use.

The standard behind this rule

WCAGW3C, WCAG 2.2 success criterion 2.4.11 Focus Not Obscured (Minimum) (Level AA)WCAGW3C WAI, Understanding 2.4.11 Focus Not Obscured (Minimum)EUDirective (EU) 2019/882, the European Accessibility ActEUETSI, EN 301 549 V3.2.1 (2021-03), clause 9 covers web contentEUDeque, EN 301 549 v4.1.1 is final (WCAG 2.2 AA)

A plain summary, not legal advice.