A focused control must not be hidden by a sticky or fixed overlay

Rule focus-not-obscured · Component patterns (best practice) · impact serious · Live only (static → incomplete)

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A keyboard user who Tabs to a control whose focus indicator is covered by a sticky/fixed overlay cannot see where focus is. The engine Tabs through the live page and, at each stop, hit-tests the focused control’s center: if a visible position:fixed or position:sticky element (that is not the control’s own ancestor) paints on top of it, focus is obscured.

How to fix#

Keep focused controls clear of sticky/fixed overlays: add scroll-padding (or scroll-margin) equal to the overlay height so focus scrolls into the clear, reduce the overlay’s size, or dismiss it while navigating with the keyboard.

Example#

<header style="position:fixed;top:0;left:0;width:100%;height:80px;background:#123;z-index:99"></header><a href="/" style="position:absolute;top:24px;left:20px">Home</a>

<header style="position:static;height:80px;background:#123"></header><a href="/">Home</a>

WCAG success criteria#

2.4.11 Focus Not Obscured (Minimum) — Level AA#

When a component receives keyboard focus, it must not be entirely hidden by author-created content (e.g. a sticky header or cookie bar).

Understanding 2.4.11

Standards#

This rule contributes to the following standards:

WCAG AA EN 301 549

References#

• WCAG — Focus Not Obscured (Minimum)