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.

Image showing a focussed link against a number of background colours
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.

Image showing normal and focussed buttons
Normal and focussed buttons

Form field focus state

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

Image showing normal and focussed text inputs
Normal and focussed text inputs

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

Image showing normal and focussed radio buttons
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: designsystem@gov.scot

Back to top