Skip to content

Focus outline removed without replacement

ui/outline-nonewarningaccessibility

Why it matters

Keyboard users can't see where focus is.

Fix

Pair outline-none with a focus-visible style, e.g. focus-visible:ring-2.

Credit

From W3C Web Accessibility Initiative
WCAG 2.4.7 requires a visible keyboard focus indicator.
From Vercel
The Web Interface Guidelines say to use :focus-visible instead of removing focus styling.

References

Understanding Success Criterion 2.4.7: Focus VisibleW3C
:focus-visible CSS pseudo-classMDN Web Docs
Web Interface GuidelinesVercel (vercel-labs)

See it

Show a visible focus ring

Draw focus rings with outline