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.
Link focus state
Links are given a yellow background and dark grey bottom border when they have focus. This combination ensures a good contrast.
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.
Form field focus state
Focus on form fields is shown by a yellow outline and a thicker dark border.
This concept is applied across all types of form field for a consistent user experience.
Look at the component pages for form fields, such as text input and radio buttons for interactive examples.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback