Link Focus Indicators
Difficulty: Advanced
Category:
- Presentation
A link that has keyboard focus (accessed using the Tab key) is typically identified by a dotted line that surrounds the link. This dotted line is called the focus indicator or link outline. This focus indicator can be removed with outline:0 in CSS. Doing so will make it very difficult for sighted keyboard users to determine which element currently has keyboard focus as they navigate through the page. The default focus indicator can be enhanced by providing additional visual styles when the link receives focus. Typically, any style changes when the user hovers their mouse over a link should be duplicated in the keyboard focus styles. All links should be clearly differentiated from surrounding text for visual users and keyboard-only users.
In your CSS, you can generally change
a:hover { … }
to
a:hover, a:focus { … }
to have all hover styles also appear on keyboard focus.
