Skip to content

Rule · Accessibility

Keyboard focus is not visible

a11y/focus-not-visibleerrorvoid a11yupdated

Why it matters

Keyboard and switch users need to see where focus is. Removing the outline without a replacement makes the site unusable without a mouse (WCAG 2.4.7).

How to fix it

Style :focus-visible with a clear ring (2px outline with offset, or a box-shadow ring) on every interactive element. Never use outline: none without a replacement.

Example

ts
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
}

References

More accessibility rules

void a11y reports 48 rules in this category. WCAG 2.2 AA through axe-core, plus checks axe can't do alone: visible keyboard focus, 24/44px target size on mobile, 320px reflow and disabled zoom.