Focus & Keyboard Accessibility Lab
Interactive laboratory for designing and validating keyboard focus indicators. Test compliance with WCAG 2.2 SC 2.4.11 (Focus Not Obscured, Level AA) and SC 2.4.13 (Focus Appearance, Level AAA) with live viewport obstruction simulation.
Indicator Styling
SC 2.4.11 / 2.4.12 Obstruction Simulator
Tests whether keyboard focus remains visible when elements scroll near a fixed/sticky header.
Use Tab to jump between these controls:
scroll-padding-top: var(--header-height); to the scroll container or scroll-margin-top to target elements to prevent sticky headers from hiding focused controls.WCAG 2.2 SC 2.4.13 Focus Appearance
Level AAA Normative Indicator CriteriaInteractive Tabbable Playground
Press Tab and Shift+Tab to inspect the generated focus ring on live controls:
Production-Ready CSS Snippet
/* WCAG 2.2 Accessible Focus Indicator */
:focus {
outline: none; /* Suppress browser default only when replaced */
}
:focus-visible {
outline: 3px solid #1d4ed8;
outline-offset: 2px;
}
/* Ensure focus remains visible under reduced motion and high contrast */
@media (forced-colors: active) {
:focus-visible {
outline: 2px solid Highlight;
}
}The Three Physical Layers of a Compliant Focus Indicator
Crafting focus indicators that satisfy WCAG 2.2 Level AAA requirements requires understanding how browser rendering engines composite outlines, offsets, and element borders.
Element Surface Boundary
The base component border and border-radius. WCAG 2.2 SC 2.4.13 calculates the minimum required perimeter area based on this bounding box (perimeter length multiplied by 2px).
The Separation Gap (Offset)
Setting outline-offset to 2px or 3px creates visual breathing room. Without an offset, a blue focus indicator on a dark blue button creates an unreadable color wash that fails the 3:1 contrast rule.
Solid Perimeter Indicator
The visible ring itself. Using a solid line at 2px or 3px width guarantees that the surface area requirement is met without relying on complex box-shadow hacks.
Three Common Keyboard Traps and Native Fixes
Real accessibility failures often occur in interactive state transitions where keyboard focus becomes trapped or obscured.
Modal Backdrop Escapes
Pressing Tab inside an open modal leaks focus to background links behind the overlay.
Hidden Carousel Cards
Tabbing into hidden slider slides scrolls the browser window erratically.
Overflow Hidden Clipping
Cards with overflow: hidden cut off standard CSS outlines on child buttons.
Cross-Engine Focus Behavior Matrix
| Browser Engine | Default Outline Style | Mouse Click on Button | :focus-visible Support |
|---|---|---|---|
| Chromium (Blink) | Black/white double ring (auto 1px outline). | Suppresses ring on mouse click. | Full native support |
| Safari (WebKit) | Accent color glow ring. | Requires Option+Tab for full tab navigation unless enabled in system settings. | Full native support |
| Firefox (Gecko) | Thin dotted ring or solid blue indicator. | Suppresses ring on mouse click. | Full native support |
Frequently Asked Questions
Concise answers regarding keyboard navigation, focus indicators, and WCAG 2.2 compliance.