Correct: Focus must be visible
When you are using the keyboard to navigate the page, you need to be able to see what element has focus so you can select it.
Correct Code
// from MDN example
a:focus {
outline: 4px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
Resources
- "Functionality is Available from the Keyboard", W3C Accessibility Principles
- "Keyboard and Visual Focus", W3C Test & Evaluate: Easy Checks
- Caitlin Geier, "Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators", Deque Blog, June 29, 2016.
- "Outline", MDN Web Docs, August 13, 2019.