Accessibility & Trust
Visible focus
Keyboard users need a clear indicator of where they are on the page.
See it
Don't
- Focus outline removed, so keyboard users are lost
Do
Keyboard user presses Tab 3 times. Where are they?
HomeWorkAboutContact
CSS: :focus-visible { outline: 2px solid; }
Why it matters
Removing focus outlines leaves keyboard and switch users lost. Use :focus-visible so the ring shows for keyboard users without bothering mouse users.
How to apply it
- Style :focus-visible with a strong outline
- Check that focus order follows the visual order
- Test your site using only the Tab key
Common mistakes
- outline: none with no replacement
- Focus styles that fail contrast
Quick answers
What is Visible focus?
Keyboard users need a clear indicator of where they are on the page. Removing focus outlines leaves keyboard and switch users lost. Use :focus-visible so the ring shows for keyboard users without bothering mouse users.
How do I apply Visible focus in UI design?
Style :focus-visible with a strong outline. Check that focus order follows the visual order. Test your site using only the Tab key.
What are common mistakes with Visible focus?
outline: none with no replacement. Focus styles that fail contrast.