Foundations: visible focus styles

Posted on Friday, 13 January 2023 by Joe Lamyman in Design and development

Visible focus styles help us to understand which part of a web page we're interacting with. You may have seen visible focus styles appear as an outline around a link or a button for example.

For people who only use a keyboard to navigate the web, visible focus styles may be one of the few ways to understand where they are in a page and what it is that they are interacting with.

Understanding visible focus styles

When browsing with a keyboard, you navigate between the focusable elements on the page using the Tab key. By default, web browsers (such as Chrome, Firefox, and Safari) will highlight focused elements.

Text containing a link with a blue underline and a blue focus outline indicator around it — Default focus style in Chrome

You must make sure that focus styles are always included in your websites, as without them, a person using only a keyboard may not be able to understand where they are in a web page and may not be able to use the site. As browsers will automatically provide focus styles with sufficient contrast, you can use these, as long as they aren't suppressed. Alternatively, you may wish to use focus styles that better suit the rest of your website or application's identity, but this still needs to be clearly visible and have sufficient contrast.

Focus styles aren't just limited to links and buttons. Any control that receives focus and can be used with a keyboard must have a visible focus style. This includes custom components that your site may use.

Check focus styles haven't been suppressed

As mentioned earlier, web browsers will provide visible focus styles for interactive elements by default. A good place to start is by checking that focus styles have not been suppressed.

Any CSS that uses the :focus selector will make changes to the visible focus styles. Make sure that styles have not been suppressed without providing an alternative. The following code is an example of CSS code that will suppress focus styles:

a:focus {
  outline: none;
}

If focus styles have been suppressed, they must be replaced with an alternative that will still allow people to understand where they are in the page.

The TetraLogical home page with a custom outline around the Blog link and a filled-in circle following it, to make it clear which element has focus. — A custom focus style on the TetraLogical website

Designing usable focus styles

When designing visible focus styles, ensure they are consistently designed and accounted for on all interactive elements, so that wherever people are on your website, they can always clearly identify which element has focus.

If you have an accessible design system, you should document the focus styles. This will ensure that even when different parts of the website are managed by separate teams, the focus styles will be consistent.

It may be that a dark purple outline works for all elements across your website, or you may find that certain elements need slightly different styling to make the focus state more obvious. Styles should be consistent, but this doesn't mean that they have to be exactly the same. Depending on the context of use, changing the colour, to achieve greater contrast, or size of the focus style may improve the usability of the system.

The GOV.UK design system's focus state styles make focussed links have a yellow background and a black underline, while focussed text fields have a yellow outline and a thick black border. While these styles are not identical, they are consistent and easy to identify. This aligns with the Inclusive Design Principles' "Be consistent" principle, allowing people to build familiarity and understanding in the way that your website works.

A link on a white background with a yellow background and thick black underline alongside a text input with a thick black border and yellow outline focus styles — GOV.UK link and text input focus styles

Providing good contrast between custom focus styles and any adjacent background colours is important, as people need to be able to easily see focus indicators.

If your website uses lots of different colours, having a single colour for your visible focus state may not work; people may not always be able to see it. To resolve this, using two different coloured outlines can help to provide contrast.

Chrome, Edge, and Firefox all use default focus indicator that has an outer white outline and an inner blue outline. These different colours can provide contrast when the controls appear on different colour backgrounds.

A link on a white background with the inner blue focus indicator clearly visible followed by a link on a black background with the outer white focus indicator clearly visible — The double focus outline means the same focus state is visible on dark and light backgrounds

This technique of using two outlines works particularly well if the controls are placed on top of images with lots of different colours in them, or on top of dynamic content such as videos, where you cannot guarantee what the background colour will be. A great starting point that ensures contrast would be to have both a white and a black outline. If there is darker coloured content in the background, the white outline will provide sufficient contrast. If there is lighter coloured content in the background, the black outline will provide sufficient contrast.

One way that this can be achieved is by applying a box-shadow attribute and applying two different coloured shadows to create the double border. The following code sample adds a white inner border and a black outer border.

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}

Because this approach uses the box-shadow property, people who use Windows' high contrast, or other forced colour modes, will not be able to see the focus styles. This is because forced colours reset the box-shadow property, so the styles will be lost.

To resolve this, you can use a media query that will add in an outline for people using forced colour modes, ensuring that it works for as many people as possible.

*:focus {
  outline: none;
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}
@media (forced-colors: active) {
  *:focus {
    outline: 0.2em solid;
  }
}

Creating focus styles just for keyboard interactions

Using the :focus selector, the focus styles will be applied regardless of how people are interacting with content. If you use a mouse and click a button that has been styled using :focus, you'll see the styles take effect. This may be confusing for some people and may cause developers to suppress focus, as they don't see the need for focus styles when a user has already targeted the element either with a mouse or touch device.

The :focus-visible selector allows the browser to take into account a handful of different factors to decide whether to show focus, such as:

whether visible focus styles have been explicitly requested
whether a keyboard or non-touch device is being used
whether scripting has been used to focus on other elements

This means that when using the :focus-visible selector, a user using a mouse or touch device would not see the focus styles when selecting a button, as the browser has determined that it may not be helpful. This approach can be used to provide visible focus styles, when most helpful to the user, without distracting them when they are already selecting an element.

The following code sample uses the same double border approach discussed earlier, with the :focus-visible selector.

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.4em #000;
}
@media (forced-colors: active) {
  *:focus-visible {
    outline: 0.2em solid;
  }
}

The only exception to this is that for any elements that support keyboard input, such as a text field using the <input> element, focus will be shown regardless.

Tips for visible focus styles

View the content in different conditions to make sure that the focus state is still easily visible
Keep the design of visible focus styles consistent across all interactive components
If your site contains different coloured backgrounds or dynamic content, use a double outline for the visible focus styles to ensure there is always sufficient contrast

More information

Next steps

Read more accessibility foundations posts, our WCAG primer or how assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.