Keyboard Focus
Keyboard users need to know which element currently has focus. A strong focus indicator should have sufficient contrast and should not depend exclusively on color.
Avoid using outline: none globally. If the default outline is replaced, the replacement should remain clearly visible.
Keyboard Focus Path
Custom Focus Ring
a:focus-visible,
button:focus-visible {
outline: 3px solid currentColor;
outline-offset: 4px;
}💡 The outline remains outside the element and provides a visible keyboard focus indicator.
Key Takeaways
- Never remove keyboard focus visibility without replacement.
- Focus indicators should be obvious and high contrast.
Knowledge Check
What is a major accessibility problem with `outline: none` without an alternative?