Must haves
- When tabbing to interactive elements, there is a highly visible indication of keyboard focus.
- The element currently in focus is, itself, visible, and not obscured by other content such as a “sticky” header.
- Tip: avoid restyling what comes out of the box within browsers, as long as the visible focus follows the rules stated above (this reduces maintenance)
Learn more about visible focus
Visual Example
Do and Don't
| Good | Bad |
|---|---|
| A strong outline is shown when tabbing to the “About” button. | There is no indication of focus when tabbing to interactive elements, or it is possible for the element in focus to be obscured by something like a “sticky” header. |
