2.4.11 · Level AA · WCAG 2.2 · Operable → Navigable

Focus Not Obscured (Minimum)

When an element receives keyboard focus, it is not entirely hidden by other content, such as a sticky header or cookie banner.

Why it matters

A sticky header that overlaps the top of the page can completely cover a focused form field or link as a user tabs down — the focus indicator from 2.4.7 exists but is physically hidden behind something else.

Needs manual testing

Requires checking rendered focus position against overlapping fixed/sticky elements at runtime — a layout-and-interaction check outside static DOM analysis.

Fails

.sticky-header {
  position: fixed;
  top: 0;
  height: 80px;
  z-index: 10;
}
/* page content has no top padding to compensate */

As a user tabs through page content, any focused element in the top 80px is rendered underneath the fixed header, fully hidden.

Passes

.page-content {
  scroll-margin-top: 90px; /* header height + gap */
}

scroll-margin-top ensures the browser's native scroll-into-view on focus stops below the sticky header instead of behind it.

Openwell finds violations like this one across your whole site, clusters them by the component that caused them, and generates a fix that's re-validated before you see it.

Scan your site free