• Success Criterion 2.4.11
  • Conformance level AA

Anchor Link Landing an Element Directly Under a Fixed Header

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

A bank's mobile money-transfer screen

What’s wrong

Anchor/scrollIntoView behavior placing focused element exactly under fixed header (fully hidden without scroll-padding (spacing that keeps sticky bars off content)).

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

Use an in-page anchor link or scrollIntoView-triggered navigation: if the target lands exactly under a fixed header with no scroll-padding offset, it's fully hidden and fails.

How to fix

The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays. .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 bank's mobile money-transfer screen, 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

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

Learn more