Focus states

When a user moves through a web page by jumping between things like the page’s links, buttons or form fields, it needs to be clear to the user which part of the page they’re on.

Components and patterns in this Design System provide styles to make these things clear. If you use a component or pattern from the Design System, you do not need to do anything extra with the focus states within it.

Focus states in the Design System use a high-contrast combination of yellow and dark grey. This combination meets colour contrast requirements in WCAG 2.1 AA (non-text contrast) against any background colour used by the Design System.

Links are given a yellow background and dark grey bottom border when they have focus. This combination ensures a good contrast.

Some text in a focussed state placed against different background colours to show how colour contrast is still maintained
A focussed link against a number of background colours

Other components that look or behave like links use the same style for consistency. For example, accordion headers or sequential navigation.

For developers, there is a mixin called blocklink that you can include in the style rules of components. The mixin provides the majority of focus state styling, which means that you do not have to write it from scratch.

Button focus state

Similar to links, buttons are given a yellow background with a dark grey bottom border when they are in focus. This focus style is applied to all types of button. For example, primary, secondary, and cancel.

The Design System's primary, secondary and cancel button styles and how they look when focussed
Normal and focussed buttons

Form field focus state

Focus on form fields is shown by a yellow outline and a thicker dark border.

A text input and how its appearance changes when it has focus
Normal and focussed text inputs

This concept is applied across all types of form field for a consistent user experience.

Two radio buttons, one without focus and the other showing the focussed state
Normal and focussed radio buttons

Look at the component pages for form fields, such as text input and radio buttons for interactive examples.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at:

Back to top