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 HS2 website.

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

Link focus state style

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.

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.

Radios and checkboxes use the same style.

Making focus states accessible for extended and modified components

If you’ve extended or modified components in the HS2 design system, you can use design system 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 hs2-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 hs2-focused-text;
}

Make other focusable elements accessible

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

The 3 Sass variables are:

• $hs2-focus-color - yellow background
• $hs2-focus-text-color - black text
• $hs2-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:

• get the values for $hs2-focus-color and $hs2-focus-text-color from the colour page