• 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: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  z-index: 100;
}
<!-- first field sits directly under the header after an anchor jump -->
<label for="ssn">Social Security Number</label>
<input id="ssn">

Why it matters

When the SSN field receives focus after a jump link, the fixed header sits directly on top of it, hiding the field completely from view.

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

scroll-padding-top keeps anchor jumps and focus scrolling clear of a fixed header's height.

html {
  scroll-padding-top: 90px;
}

Outcome

A filer's SSN field scrolls fully into view the moment it receives focus.

Who is affected

Keyboard and low-vision users can't see the sensitive field they're about to type into, risking data entry errors.

Learn more

Related scenarios