Focus Not Obscured

Focus Not Obscured is the WCAG 2.2 criterion 2.4.11 that forces designers to protect the keyboard focus indicator from being covered by other page content. The rule states that when an element receives focus through keyboard navigation at least part of it must remain visible in the viewport. This applies to sticky headers that follow the user down the page cookie consent banners that park at the top or bottom and any overlapping UI like floating help buttons or chat widgets. The criterion builds on the older Focus Visible rule by specifically calling out dynamic layout problems that occur after the initial design looks good in Figma. It became required at AA level because keyboard users kept losing their place on pages with aggressive sticky elements introduced in the mobile first design era of the 2020s.

Focus Not Obscured is not a nice-to-have polish item for your design system. It is not fixed by simply making your focus ring thicker or brighter without addressing the root cause of overlap. It is not something that only QA testers need to worry about in the browser. The criterion does not accept solutions where the user must scroll manually to reveal the focused item. It rejects designs where the focus indicator gets clipped by design choices that prioritize aesthetics over function. Any team that treats this as an implementation detail instead of a design constraint will fail their next accessibility audit.

Concrete examples prove how real teams solved this. Stripe ran into the problem in their 2024 checkout redesign. The sticky payment summary panel on the right side of desktop screens would hide focus rings on form fields below the fold. They fixed it by adding dynamic padding calculated from the panel height and enforcing a minimum focus ring offset of 4 pixels. The team used Figma variables to link the padding values to component specs so changes stayed consistent across variants. After implementation their Lighthouse accessibility score rose from 78 to 98 on the checkout templates. Users with repetitive strain injuries who tab through forms instead of mousing reported the flow felt more predictable.

Shopify encountered similar issues with their admin sidebar that stays visible on large screens. Focus on settings toggles would slide behind the top navigation during tab sequences. The solution combined CSS scroll margin with JavaScript that temporarily adjusts container padding when focus enters certain zones. They tested this exhaustively with TalkBack on Android and NVDA on Windows across multiple zoom levels up to 200 percent. The fix shipped in their 2025 Q2 release and eliminated an entire category of keyboard navigation bugs that had plagued previous versions.

A cautionary tale comes from a 2025 audit of a major news site that copied Mediums layout too closely. Their sticky header with category navigation completely obscured focus on the first few article links after page load. The remediation took six weeks because the header used complex overlapping gradients and shadows that complicated the z index fixes. The lesson was clear. Test focus states early against every sticky element before it replicates across templates.

Apply this criterion in the design phase by building focus variants for every component that show clearance from headers footers and banners. Measure those clearances directly in Figma using the measuring tool rather than eyeballing it. Use it in the browser phase by running full keyboard tab sequences while scrolling with the arrow keys. Enforce it in production by adding automated tests that simulate focus on every interactive element and flag any with bounding boxes that intersect with sticky elements. Skip the full treatment only on internal tools with zero external users or on pure content sites with no forms or navigation.

Teams that get this right annotate their Figma files with exact scroll padding values and z index orders. They run monthly production scans with axe DevTools to catch regressions from new marketing banners or embedded forms. They understand that Focus Not Obscured interacts with other rules like Target Size and Consistent Help so changes in one area affect the others.

Never let your sticky headers and clever overlaps hide the focus ring from users who depend on it to navigate your site.