Styles - Focus state

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

WCAG 2.2

WCAG 2.2 affects these styles

To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:

See the full list of design system changes to meet WCAG 2.2.

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.

Information: WCAG 2.2

Do not let user interface elements hide or obscure any content which has a focus applied, for example: sticky headers or overlaid cookie banners. This is to comply with WCAG 2.2 success criterion 2.4.11 Focus Not Obscured (W3C).

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.2 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, checkbox or icons and images used as links.

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:

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: April 2024