Understanding focus state styles
Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states let users know which element they’re currently on and is ready to be interacted with.
Focus states in the GOV.UK Design System use a combination of yellow and black to make sure they meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA non-text contrast on any background colour used on GOV.UK.
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.
Making focus states accessible for extended and modified components
If you’ve extended or modified components in the GOV.UK Design System, you can use GOV.UK styles to make the focus states of these components accessible.
How you make focus states accessible depends on if 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
govuk-focused-text mixin in your component’s
:focus selector if that component is focusable text. For example, the component is a link in body text, or the details component:
Make other focusable elements accessible
If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
The 3 Sass variables are:
$govuk-focus-colour- yellow background
$govuk-focus-text-colour- black text
$govuk-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:
- see how the
govuk-focused-textmixin works from the GOV.UK Frontend source code
- get the values for
$govuk-focus-text-colourfrom the colour page
If you’ve extended or modified a component and you think this is useful for the wider government community you can propose an improvement.
You can propose your change to a component on the list of discussions on GitHub.
If you’ve got a question about the GOV.UK Design System, contact the team.