Styles - Focus state

Use these focus state styles to let users know which element they’re on and that they can interact with it.

What is a focus state?

Some people use keyboards or other devices to navigate through a page by jumping from 1 interactive element to the next. The focus state lets users know which element they’re currently on and that it's ready for them to interact with.

Our focus state styles

We've followed the GOV.UK Design System's approach to focus state styles.

Like GOV.UK, we use a combination of yellow and black to make sure we meet the Web Content Accessibility Guidelines (WCAG) 2.1 level AA non-text contrast on any background colour on the NHS website.

The yellow has a high contrast with dark backgrounds and the thick black border has a high contrast against light backgrounds.

When links are focused, they have a yellow background with a black bottom border. This helps the focused link stand out from the rest of the content on the page.

A focused link against different NHS.UK background colours

Form input focus state style

When form inputs are focused, they have a yellow outline and a thick black border. If the element already has a border, the border gets thicker.

A text input labelled "What is your name?". The example shows the text input both unfocused and focused.

Radios and checkboxes use the same style.

Yes and no radio options to answer the question "Do you know your NHS number?". In this example, the "No" option is focused.

Making focus states accessible for extended and modified components

If you’ve extended or modified components in the NHS digital service manual, you can use service manual styles to make the focus states of these components accessible.

How you make focus states accessible depends on whether the component is:

  • focusable text without a background colour or border
  • another focusable element with a background colour or border

Make focusable text accessible

If you use Sass, you should include the nhsuk-focused-text mixin in your component's :focus selector if that component is focusable text. For example, if the component is a link in body text, or the details component:

.app-component:focus {
  @include nhsuk-focused-text;

Make other focusable elements accessible

If you use Sass, you can use 3 NHS.UK frontend variables if your component has a background colour or border. For example, a text input or checkbox.

The 3 Sass variables are:

  • $nhsuk-focus-color - yellow background
  • $nhsuk-focus-text-color - black text
  • $nhsuk-focus-width - for consistent width

Use these variables in your components instead of numeric values for the background, text and widths.

If you do not use Sass

To make a component’s focus state accessible without using Sass, you can:

Have you tested these styles?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: October 2019