Focus Outlines

Have you ever visited a website and tried to use only your tab key to move around?

If not, take a break from reading this and go try it right now on your own website.

Not every user who can see uses a mouse. For people with limited mobility or perhaps no use of their arms at all, a mouse can be challenging or impossible to use. These users may use only a keyboard or assistive technology such as eye tracking or voice control to navigate the web.

If you’ve tried to use a website without a mouse, you’ll quickly learn that one feature can have a significant impact on how usable that website is: a focus indicator or outline.

What is a focus outline?

A focus outline is a CSS style that is added to an element on a web page when it has received focus. By default, the browser put an outline around the element to show that it has received focus.

This outline around the Equalize Digital logo is not a mistake – it’s how a keyboard-only user knows that they are currently focused on the logo link to the home page of the website.

In the CSS for a quality WordPress theme, you’ll typically see the focus style set like this:

:focus {
Outline: 2px solid;
}

Sometimes the focus outline will have a color on it, but adding a color is not necessary as browsers have a default color defined.

Never Remove a Focus Outline

Though your client may request it, don’t be tempted to remove the outline on your focus styles.

:focus {outline: none;} will cause major accessibility problems and is a Web Content Accessibility Guideline failure of success criterion 2.4.7, Focus Visible (Level AA).

If you remove the focus outline, it makes it impossible to tell where you are on the page as you hit the tab button to move through focusable elements. Paul Adams has a great side-by-side comparison of good and bad focus states. If you didn’t encounter a missing focus outline on your own website, visit the comparison to see the difference.

Good Focus State Styles

Focus outlines don’t have to be boring – they just need to be useable. Here are some recommendations for styling focus outlines:

• Keep a full outline around the element, and make it at least 2px so that it’s thick enough to see.
• Add a 2px outline-offset to help make it more visible than if it directly touches the element being outlined.
• WCAG 1.4.11: Non-text contrast require focus indicators to follow the same contrast rules as other parts of the content. There should be a minimum contrast of 3:1 between the outline and the background (this might mean light and dark styles for various parts of the website as the background color changes).
• Most focus outlines are solid, but dotted outlines are okay.
• If you want to add a CSS transition to your outlines as they come in, that might be fine, but be cautious that you’re not excessively delaying your user from moving at the speed they want to move through your website.

What if a theme is missing focus states?

If you find that a website you’re working on is missing a focus outline as you tab through the page, this is a relatively easy fix.

First, search through the theme to see if you can find any instances of :focus {outline: none;} in the stylesheet. If you can, you can remove it and allow the browser’s default focus indicator to take over.

If you can’t find where the outline is being removed, you’ll want to add it back in. You can add in a basic focus indicator with this CSS:

:focus {
outline: 2px solid blue;
outline-offset: 2px;
}

You may need to add an !important to it to force it to override the styles that are removing it if you can’t delete them for one reason or another.

If you add an offset to your focus outline like this, make sure it’s not cut off on any elements. You may need to remove overflow: hidden; from parent elements so that your offset outline is fully visible.