Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
Generate accessible, visible focus indicators for interactive elements. Creates focus styles that meet WCAG 2.4.7 (Focus Visible) and 2.4.11 (Focus Appearance) requirements while maintaining visual design consistency.
| Criterion | Requirement | Level |
|---|---|---|
| 2.4.7 Focus Visible | Focus indicator must be visible | AA |
| 2.4.11 Focus Appearance | 2px+ perimeter, 3:1 contrast | AAA |
| 2.4.12 Focus Not Obscured | Focus not hidden by other content | AA |
| Style | Character | Best For |
|---|---|---|
| Ring | Clean, defined | Buttons, inputs, cards |
| Glow | Soft, modern | Dark themes, premium UI |
| Underline | Minimal | Text links, nav items |
| Offset | High contrast | When ring blends with element |
| Inset | Subtle | Contained elements |
CSS Custom Properties + Utilities:
:root {
/* Focus tokens */
--focus-ring-color: #2563eb;
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-style: solid;
/* Computed focus ring */
--focus-ring: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
--focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset) var(--color-background);
--focus-ring-shadow: 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}
/* Base focus reset */
*:focus {
outline: none;
}
/* Focus-visible for keyboard only */
*:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-ring-offset);
}
/* Alternative: box-shadow approach (more styling control) */
.focus-ring:focus-visible {
outline: none;
box-shadow:
var(--focus-ring-offset-shadow),
var(--focus-ring-shadow);
}
Component-Specific Focus:
/* Buttons */
.btn:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}
/* Inputs - inset focus */
.input:focus-visible {
outline: none;
border-color: var(--focus-ring-color);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}
/* Cards - offset ring */
.card:focus-visible {
outline: 2px solid var(--focus-ring-color);
outline-offset: 4px;
}
/* Links - underline enhancement */