How to improve the focus outline

Carolina  

In this article or tutorial I will write about how you can improve the focus outline for links, controls and input fields.

When you are developing a WordPress theme for release on WordPress.org, the theme must have a visible indicator that shows the user when an element has received focus. This is part of the requirement for keyboard navigation.

This is commonly achieved by showing a focus outline, for example a dotted border around focused links, or a blue solid border around selected input fields.

-You are not limited to using the outline. But the outline method is the default and what I will be writing about in this post.

The problems that we are solving

For users:

Without a visible focus indicator, it is impossible for many users to navigate a website. For example:

  • It can be very difficult to complete a form if you can not see which field that is currently selected.
  • It is not possible to navigate using links if the links look the same as all other text.

A thin dotted outline can be difficult to see -even more so if there is no spacing between the element and the outline.

Browser inconsistencies:

Most browsers include this feature by default, but the outline is not consistent across browsers.

  • Firefox does not show an outline for form elements if you make other style changes to them.
  • Different browser may use different colors for the outline, which can make the outline difficult to see depending on your background color.

Changing designer habits:

Many designers and theme developers removes the outline because they don’t like how it looks. But the outline does not have to look bad. You as a designer is in charge of improving the focus outline and making it look better.

Other designers forgets to change from the default color of the outline, so that it is invisible on blue or black backgrounds.

The low specificity of the links in the WordPress admin bar:

A WordPress specific problem is that if you change the focus outline for all links, without adding a higher specificity than a:focus, then your style will change the look of the WordPress admin bar.

This admin bar shows by default for logged in users. A user can change the color scheme of their admin area, and it is important for usability that the installed WordPress theme does not interfere with their colors and styles.

Improving the focus outline with style

Specificity

-Many themes use a wrapper for their content, for example:

<div id="page" class="site">

This makes it easy to style the links using the .site class:

.site a:focus {
style here
}

If you do not want to include a wrapper, you can use the :not selector:

body:not(.wpadminbar) a:focus{
style here
}

And if you want some links to be styled differently, you will just need to add their styles with a higher specificity.

Color

The outline needs to have a high contrast against the background color. You can improve the focus outline further by also having a high contrast compared to your text or link color.

It is common for themes to let the user change the background color and link colors, that is why it is important that your outline color is as dynamic.

When applying your theme options, or when using CSS variables, remember to include the outline.

If you have sections with different colors, remember to adjust the outline. It is not uncommon to see a website with a light body background color and a dark footer area, where the outline is nearly invisible in the footer.

I recommend these tools for testing the contrast:

https://webaim.org/resources/contrastchecker/ (Opens in a new window)

Or as a browser extension:

https://wave.webaim.org/extension/ (Opens in a new window).

-When you use the browser extension, you need to enter the colors manually. The tool is not able to check focus or hover styles. You can use the automated contrast test to check the overall contrast ratio of you page.

If you want to try a more advanced tool, see https://snook.ca/technical/colour_contrast/ (opens in a new window)

Visibility -styling

Do not use color alone to indicate that an element has focus, even if you have calculated that your colors has a high contrast.

This is important because a user may need to change the colors of your website, for example if they are sensitive to light backgrounds.

Most browsers use a one pixel dotted outline for links. There are exceptions where a dashed outline is used.

I recommend increasing it to two pixels. Keeping the outline dotted for links, and solid for form input fields, helps users recognize it as an outline.

-Recognizable user interfaces and consistency is important for all users, -it is easier for us to use patterns that we have already learnt.

The outline can be styled similarly to how you would style a border, with three main differences:

  • An outline does not take up space
  • It does not have a radius
  • The outline always covers all sides of the element

Adding an offset

It is common to find an outline that is just on the edge of an element, for example an image. This makes the outline difficult to see, especially if both the image and outline is dark. Below is a linked image, with and without a 3 pixel offset:

Two linked images are presented next to eachother, to show what the focus outline looks like with and without an offset. The outline is more distinctive for the image that has a 3 pixel offset, because both the outline and the image is dar.

The outline-offset (opens in a new window) lets you increase the distance between the element and the outline.

To avoid the animation or flickering when the offset increases the perceived spacing, we add the offset to the a element, not just the a:focus:

.site a {
outline-offset: 3px;
}

Or if you use it responsibly, you can use a small CSS transition when the link is focused:

.site a:focus {
outline-offset: 3px;
transition: outline 0.6s linear;
}

Don’t forget to also test your button blocks and toggles!

Styling other elements than links

If you are using a CSS reset, such as normalize, or have made other style changes to your form inputs and buttons, do not ignore the outline.

Whether it is a bug or on purpose, Firefox will not always show the default outline for input fields. If you style them, you are also responsible for adding styles for the focus state. Test your forms carefully in different browsers to see the difference.


Additional tips for styling

Whether you design in Sketch, Figma, or in your browser, you can draw up sections with your selected background colors, then add all the link statuses.

This way you can make sure that your users can tell the difference between the different link statutes without relying on color alone, and that the colors work together.

Two sections, one with a white background and one with a dark background. Each section has four text elements with different colors, presenting how link colors and focus outlines need to change to maintain an acceptable contrast level.

If you are tired of reading me nagging about the outline 🙂 you might enjoy my next post: Indicating focus without outline.


Need an accessibility review?

If you need help making sure that the focus outline and keyboard navigation in your WordPress theme is correct and sufficient, check out the services that I offer.


Recommended reading

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

http://www.outlinenone.com/