WCAG 2.4.11 Focus Not Obscured: Keep Focused Elements Visible

What This Criterion Requires

WCAG 2.4.11 Focus Not Obscured (Minimum) is a new criterion introduced in WCAG 2.2. It requires that when a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content. This means that the focused element must not be completely covered by sticky headers, sticky footers, cookie consent banners, chat widgets, or other overlapping elements that the page author has positioned on top of other content. The minimum level (AA) requires that the focused component is not entirely hidden; it is acceptable if the focus indicator is partially obscured. The enhanced version (2.4.12, Level AAA) requires that no part of the focus indicator is hidden. Common culprits include fixed-position navigation bars that cover focused elements as the user tabs through content behind them, cookie banners that overlap page content, and floating action buttons or chat widgets that sit on top of interactive elements. Developers must account for the stacking order of elements and ensure that keyboard navigation flows logically without focused elements disappearing behind overlaid content.

Why It Matters

When a focused element is hidden behind a sticky header, footer, or overlay, keyboard users cannot see where they are on the page. This is equivalent to losing the cursor while clicking, making it impossible to know what will happen when the user presses Enter or Space. Sighted keyboard users, including people with motor impairments who use alternative input devices, depend on seeing the focused element to navigate effectively. If a cookie banner covers the bottom half of the page and a focused link scrolls behind it, the user has no way to know they are on that link. This problem is extremely common on modern websites that use sticky navigation, persistent cookie consent banners, floating chat buttons, and notification bars. These overlapping interface elements often work fine for mouse users who can see and click around them, but they create invisible barriers for keyboard users whose focus moves behind these layers. Ensuring that focused elements remain at least partially visible is essential for keyboard accessibility.

Common Failures and How to Fix Them

<style>
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1000;
  background: #fff;
}
.main-content {
  margin-top: 80px;
}
</style>
<!-- Focused links near the top scroll behind the header -->

<style>
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1000;
  background: #fff;
}
.main-content {
  margin-top: 80px;
  scroll-padding-top: 100px;
}
html {
  scroll-padding-top: 100px;
}
</style>
<script>
  // Ensure focused elements scroll into visible area
  document.addEventListener('focusin', (e) => {
    const header = document.querySelector('.site-header');
    const headerBottom = header.getBoundingClientRect().bottom;
    const rect = e.target.getBoundingClientRect();
    if (rect.top < headerBottom) {
      e.target.scrollIntoView({ block: 'center' });
    }
  });
</script>

<style>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 9999;
  background: #333;
  color: #fff;
  padding: 1rem;
}
</style>
<!-- Links and buttons near the bottom are hidden behind the banner -->

<style>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #333;
  color: #fff;
  padding: 1rem;
}
body.has-cookie-banner {
  padding-bottom: 140px;
}
</style>
<script>
  // Add body padding when cookie banner is visible
  const banner = document.querySelector('.cookie-banner');
  if (banner) {
    document.body.classList.add('has-cookie-banner');
    // Ensure focused elements are not hidden behind banner
    document.addEventListener('focusin', (e) => {
      const bannerTop = banner.getBoundingClientRect().top;
      const rect = e.target.getBoundingClientRect();
      if (rect.bottom > bannerTop) {
        e.target.scrollIntoView({ block: 'center' });
      }
    });
  }
</script>

How to Test

1. Tab through all interactive elements on the page and verify that the focused element is never completely hidden behind sticky headers, footers, cookie banners, or other overlaid content.
2. Check pages with fixed-position elements (headers, footers, chat widgets, notification bars) specifically by tabbing through content near those elements.
3. Test with cookie consent banners visible and verify that focused elements in the underlying page are not completely obscured by the banner.
4. Use browser DevTools to identify all elements with position:fixed or position:sticky and assess whether they could overlap with focusable elements.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Drupal Accessibility Checklist

Further Reading

• Keyboard Navigation Testing
• Wcag Explained Plain English
• Five Minute Accessibility Audit

Related WCAG Criteria

• WCAG 2.4.7
• WCAG 2.4.3