2.4.12 Focus Not Obscured (Enhanced)

What this rule means

WCAG 2.4.12 is the enhanced version of 2.4.11 (Focus Not Obscured — Minimum). While 2.4.11 requires that focused elements are not entirely hidden, this AAA criterion requires that no part of the focused component is hidden by author-created content. The entire focused element — including its focus indicator — must be fully visible.

This is a stricter requirement that ensures keyboard users have complete visual feedback about the focused element. Even partial obscuring — such as a sticky header covering the top edge of a focused element — fails this criterion.

Why it matters

When part of a focused element is hidden, users may not see the full content of what they are interacting with. A partially obscured button label might be misread, a partially hidden form field might appear empty when it contains a value, and a cut-off focus indicator might be confused with no focus indicator at all.

For users with low vision who use screen magnification, even a small amount of obscuring can make the difference between being able to use an element and not. Full visibility ensures that all users receive complete visual information about the focused component.

Related axe-core rules

There are no automated axe-core rules for 2.4.12. This criterion requires thorough manual testing with keyboard navigation at various viewport sizes.

How to test

1. Navigate the entire page using Tab and check that every focused element is fully visible, with no part covered by sticky or fixed content.
2. Test at multiple viewport sizes — mobile, tablet, and desktop.
3. Check that the focus indicator itself (outline, ring, etc.) is not clipped or hidden by overflow:hidden on parent elements.
4. Trigger all overlays (cookie banners, chat widgets, notifications) and re-test the full tab cycle.

• Verify that scroll-padding values are sufficient to keep the entire element and its focus indicator visible.
• Check elements near the edges of scrollable containers for clipped focus indicators.

How to fix

Build on the techniques from 2.4.11 and ensure zero obscuring of any part of focused elements.

Generous scroll padding

/* Account for focus indicator size in scroll padding */
html {
  /* Header (80px) + focus outline (3px) + offset (3px) + safety margin (8px) */
  scroll-padding-top: 94px;
  scroll-padding-bottom: 74px; /* Footer (60px) + focus ring space */
}

Prevent overflow clipping of focus indicators

/* Bad: overflow hidden clips focus outlines */
.card-container {
  overflow: hidden;
}

/* Good: overflow visible preserves focus outlines */
.card-container {
  overflow: visible;
}

/* If overflow hidden is needed, use outline-offset to keep focus inside */
.card-container {
  overflow: hidden;
}
.card-container *:focus-visible {
  outline-offset: -3px; /* Inset outline stays within bounds */
}

Ensuring sticky elements have enough clearance

// After any layout change, verify focused element visibility
function verifyFocusVisibility() {
  const focused = document.activeElement;
  if (!focused || focused === document.body) return;

  const rect = focused.getBoundingClientRect();
  const stickyElements = document.querySelectorAll(
    '[style*="position: sticky"], [style*="position: fixed"]'
  );

  for (const sticky of stickyElements) {
    const stickyRect = sticky.getBoundingClientRect();
    const overlap =
      rect.top < stickyRect.bottom &&
      rect.bottom > stickyRect.top &&
      rect.left < stickyRect.right &&
      rect.right > stickyRect.left;

    if (overlap) {
      focused.scrollIntoView({ block: 'center', behavior: 'smooth' });
      break;
    }
  }
}

Common mistakes

• Scroll-padding values that account for the sticky element but not the focus indicator's extra pixels.
• Parent containers with overflow:hidden that clip focus outlines extending beyond the container boundary.
• Sticky elements whose height changes (e.g., navigation that expands on scroll) without updating scroll-padding.
• Chat widgets or FAB buttons that overlap the bottom-right area where focused elements may be.
• Inline popover or tooltip elements that appear on top of the next focusable element in tab order.