Success Criterion 2.4.11
Conformance level AA
W3C reference F110

Sticky Header or Footer Completely Covering the Focused Element

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

A government tax-filing portal

What’s wrong

A sticky header/footer completely covers the element that currently has keyboard focus — the user is 'somewhere' they cannot see.

Example

.sticky-header { position: sticky; top: 0; } /* covers focused fields below it */

Why it matters

Sighted keyboard users when sticky chrome would otherwise hide the focused control.

How to test

Tab to a control while a sticky footer/header is on screen: if the bar completely covers the focused element, it fails.

How to fix

Use scroll-padding (spacing that keeps sticky bars off content) or spacing so sticky bars never fully cover the focused element. .input-field { scroll-margin-top: 80px; } /* clears the sticky header on focus */ A focused element must not be entirely hidden behind sticky headers, footers, or other fixed content.

Outcome

On a government tax-filing portal, this barrier is gone for sighted keyboard users when sticky chrome would otherwise hide the focused control — they can finish what they came here to do.

Who is affected