• 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 

<a href="#recipient-section">Jump to recipient details</a>
...
<h2 id="recipient-section" tabindex="-1">Recipient Details</h2>

.app-header {
  position: fixed;
  top: 0;
  height: 56px;
}

Why it matters

Clicking the jump link scrolls Recipient Details to land exactly behind the fixed 56px header, hiding the heading and focus point entirely.

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

This single property fixes every anchor jump and focus() scroll on the page at once, not just this one link.

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

Outcome

A customer clicks the jump link and sees Recipient Details appear fully clear of the header.

Who is affected

Keyboard users following in-page jump links can't see the section they just navigated to.

Learn more

Related scenarios