WCAG 2.4.11 — Focus Not Obscured (Minimum)

What this requires

When a component has keyboard focus, it must not be entirely obscured by author-created content. Partial overlap is allowed at AA; full obscuration is the failure. The criterion was added in WCAG 2.2 specifically to address the common pattern of sticky chrome (headers, footers, cookie banners) covering the focused element as the user tabs.

How AI coding tools fail this

When asked to "add a sticky header" or "anchor the footer", AI tools generate fixed-position chrome with no logic to scroll the focused element into view above the chrome. The user tabs through a long form, focus moves to a field directly behind the sticky header, the field is fully covered, and there's no visible focus.

The second pattern: cookie consent banners and chat widgets layered over the page with position: fixed and high z-index, but no focus-management code to move them out of the way or scroll the focused element into view.

The third: modal dialogs that cover the page content. The focus inside the modal is fine; the problem is when focus leaves the modal and lands on background content that is now obscured by the modal's overlay.

Failing examples

A sticky header with no scroll offset for focus:

<>
  <header className="sticky top-0 h-16 bg-background">{/* logo, nav */}</header>
  <main>{/* long form */}</main>
</>

A persistent cookie banner over content:

<>
  <main>{children}</main>
  <div className="fixed bottom-0 left-0 right-0 h-32 bg-background">
    {cookieBanner}
  </div>
</>

Passing examples

Use CSS scroll-margin-top to keep focused elements clear of the sticky header:

:focus-visible {
  scroll-margin-top: 5rem; /* sticky header height plus a buffer */
  scroll-margin-bottom: 5rem; /* sticky footer / cookie banner */
}

A cookie banner that the user can dismiss (and that goes away once they decide):

{!consentGiven && (
  <aside
    role="dialog"
    aria-labelledby="cookies-heading"
    className="fixed bottom-2 right-2 max-w-md rounded-md border bg-background p-4"
  >
    <h2 id="cookies-heading">Cookies</h2>
    <p>We use cookies to understand how the site is used.</p>
    <button onClick={accept}>Accept</button>
    <button onClick={reject}>Reject</button>
  </aside>
)}

Edge cases

Partial obscuration is permitted at AA. A 50% overlap is fine; full coverage is the failure.
2.4.12 is the AAA cousin: no part of the focused component may be obscured. AA allows partial overlap.
scroll-margin-top and scroll-margin-bottom are the cleanest fix for sticky chrome. The browser scrolls focused elements into a margin-aware position automatically.
Z-index doesn't help. Raising the focus indicator's z-index doesn't move the focused content above the chrome — only the ring, if it can even paint outside its element box.
Mobile chrome (the browser's URL bar) doesn't count; the criterion targets author-created content.

How Jeikin handles this

This is best caught at runtime. Jeikin's guided review walks the tab order on each page, captures viewport screenshots, and flags positions where the focused element is fully obscured. The dashboard records the page, the element, and the obscuring chrome.