A list of links with different focus styles: Background color, high contrast background color, double underline, wavy underline and blue text color, and a link with a border and box shadow.

Indicating focus without outline

Carolina  

Earlier this week I wrote about how to improve the focus outline, and I mentioned that you are not limited to using outline. In this post I will give some examples of how to indicate focus without the outline (I know you hate it).

-The purpose is not to always keep the outline at all costs; the purpose is to show the user that an element has received focus.

Replace the outline, don’t just remove it.

Outline is the default option used by browsers. If you remove it, you have to replace it and it preferably, improve it.

Some developers suggest that you style your focused links the same as your hovered links. If you follow this, you must still make sure that you test the focus of your controls and input fields carefully.

-There are also several different ways of removing the outline for some users by using Javascript. I am not going to recommend that because we can never know for sure which of our users that will need the outline.

Indicate focus without using color alone

Do not:

  • Change text color only
  • Switch background color only
  • Change a border color only

Do:

  • Change the text decoration
  • Change the border style
  • Combine color and decoration/border

Examples:

  • If your link is already underlined, then removing the underline on focus and changing the background color would be sufficient.
  • If your link is not underlined, adding an underline on focus would technically be enough. But it will probably not be as visible to the user as the original outline, so consider combining it with something else.
  • If you have a linked element without rounded corners, you can use a border with a matching border radius, instead of a focus outline.

Remember that borders take up space, compared to outline and underline.

You can also achieve different results by using a box shadow. If you use a box shadow to indicate focus, set the outline to transparent. This is important because some high contrast modes do not show the box shadow.

Note, in the examples below, span elements has been used to showcase different link styles:

Link   Hovered link   Default focused link  

Focused link   Focused link   Focused link   Focused link   Focused link
a:focus {
background-color: #fafafa;
padding: 3px;
border-radius: 3px;
border: 1px dotted #222;
}

a:focus {
padding: 3px;
background: #000;
color: #fff;
}

a:focus {
text-decoration: underline;
text-decoration-style: double;
}

a:focus {
text-decoration: underline;
text-decoration-style: wavy;
color: navy;
}

a:focus {
border: 1px solid #666;
padding: 3px;
box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.2);
border-radius: 3px;
}

Feeling more adventurous?

So, the truth is, all of these example are fairly simple, not to say boring, right? They may work great in your text content, since they will not interrupt the readers flow (OK maybe avoid the waves, unless you are using them for headlines 🙂 ).

Sometimes you want to add a bit more… flare… to more important links.

As long as you stick to these three rules, you will be fine:

  • Always have a visible indicator for focused elements
  • Do not indicate focus with color alone
  • Keep a sufficient contrast between text color and background

Codepen is an absolute brilliant resource for finding advanced styles for links, forms and buttons.

The most common license for the pens is MIT, so you can use them freely in your WordPress theme. Remember to be kind, follow the license, and give credit to the original designer.

If you do animate your links, remember to let users disable the animations by using prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

See the Pen Link Border Animation by Tiago Martins (@tfcmartins) on CodePen.

See the Pen Animated focus styles for kbd users by Heydon (@heydon) on CodePen.

Recommended reading