WCAG 2.4.12 Focus Not Obscured: Ensure Focused Elements Stay Visible

What This Criterion Requires

WCAG 2.4.12 Focus Not Obscured (Minimum) is a new success criterion introduced in WCAG 2.2 that requires focused user interface components to be at least partially visible when they receive keyboard focus. This criterion addresses a widespread usability problem where sticky headers, fixed navigation bars, cookie consent banners, chat widgets, and other overlapping content hide the currently focused element from view. When a keyboard user tabs through a page and the focus indicator disappears behind a sticky element, they lose track of where they are on the page, making navigation extremely difficult or impossible. The minimum level requires that the focused component is not entirely hidden by author-created content. This means at least some part of the focused element must remain visible so users can maintain orientation. Developers must ensure that fixed-position elements do not fully cover interactive components when those components receive focus, using techniques like scroll padding, z-index management, and focus event listeners that scroll elements into view.

Why It Matters

Keyboard users rely on visible focus indicators to understand where they are on a page. When focused elements are hidden behind sticky headers, floating toolbars, or overlay banners, keyboard navigation becomes a frustrating guessing game. Users must tab blindly, hoping the next press reveals the focused element, or resort to scrolling manually after every tab press. This disproportionately affects people with motor disabilities who rely on keyboard navigation, people with low vision who need to see the focus indicator to orient themselves, and people with cognitive disabilities who lose context when the focused element disappears. The problem is extremely common on modern websites that use sticky navigation, cookie consent banners, chat widgets, and promotional overlays. Before WCAG 2.2, there was no specific criterion addressing this issue, despite it being one of the most frequently reported barriers by keyboard users. This criterion finally provides a testable standard for ensuring focus remains visible during keyboard navigation.

Common Failures and How to Fix Them

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
}
main {
  margin-top: 80px;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
}
main {
  margin-top: 80px;
  scroll-padding-top: 100px;
}
/* Also add to html for anchor links */
html {
  scroll-padding-top: 100px;
}

<div class="cookie-banner" style="position: fixed; bottom: 0; width: 100%; height: 120px; z-index: 9999;">
  <p>We use cookies...</p>
  <button>Accept</button>
</div>

<div class="cookie-banner" style="position: fixed; bottom: 0; width: 100%; height: 120px; z-index: 9999;">
  <p>We use cookies...</p>
  <button>Accept</button>
</div>
<style>
  /* Add bottom padding to body when banner is visible */
  body.has-cookie-banner {
    padding-bottom: 140px;
  }
</style>
<script>
  // Or better: move focus to banner on page load
  // and dismiss it before allowing page interaction
</script>

.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  height: 500px;
  z-index: 10000;
}

.chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  height: 500px;
  z-index: 10000;
}
/* Ensure page content avoids the widget area */
.main-content {
  padding-right: 380px;
}
/* On focus, scroll element into unobscured view */
:focus {
  scroll-margin-bottom: 520px;
}

How to Test

1. Tab through all interactive elements on the page using only the keyboard. Verify that every focused element is at least partially visible and not completely hidden behind fixed-position content.
2. Check pages with sticky headers: tab through content that scrolls behind the header and confirm focused elements are not fully obscured.
3. Check pages with cookie consent banners or chat widgets: tab to elements near these overlays and confirm focus is at least partially visible.
4. Resize the browser window to smaller viewports where overlapping is more likely to occur, and repeat keyboard navigation testing.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist

Further Reading

• Keyboard Navigation Testing
• Accessible Navigation Guide
• Five Minute Accessibility Audit

Related WCAG Criteria

• WCAG 2.4.7
• WCAG 2.4.13