✎ Technique: Paragraph link focus indication

All interactive elements should be focusable so that they can be activated using a mouse, a keyboard, voice recognition software, a switch input device, and other input methods.

They should also indicate when they’re focused so that users know which element they are currently interacting with. This is where focus styles come into play.

Examples

Good example

All browsers support basic focus styles by default through their user-agent stylesheet. Browsers’ default focus styles vary from blue rings (Chrome) to dotted outlines (Firefox). To support basic focus styles, do not eliminate the user agent style unless you replace it with something else.

Bad example

To eliminate user agent focus styles in most browsers, you could supply the declaration outline: none. Do not do this unless you plan to provide a clear custom focus style in its place.


p a:focus {
  outline: none; /* this is not advised */
}

Improving visual focus indication

The default dotted focus outline provided by some browsers is not very clear, and it isn’t applied to custom controls that have been included in focus order. So you need to provide clear visual styling to show which control has focus.

You could add a border around the control (this might be especially effective for buttons) or change the color of text or change the background color (or a combination of those). Whichever method you choose, avoid introducing unexpected animated effects, which can occur if borders are applied inappropriately or if text size is changed.

In this example, which avoids those expected effects, CSS is used to change the background color of the paragraph text link when it receives focus, highlighting it as yellow:


p a:focus {
  outline: none; 
  background: #fea;
}