Focus states
About focus states
A focus state is styling that shows users what page element they've selected and can interact with.
Focus states make webpages more accessible for users who navigate with a keyboard or assistive technology. For example, focus states help users who tab through a page.
All interactive elements must have focus states. For example, form fields, buttons and hyperlinks need focus states.
You do not need focus state styling on elements that users cannot interact with. For example, notification panels or confirmation messages.
Components and patterns in the Design System have accessible focus state styling.
Focus state styling in the Design System
Design System focus states use a high contrast combination of yellow and dark grey.
This meets success criterion 1.4.11 (non-text contrast) of the Web Content Accessibility Guidelines (WCAG) 2.2.
We recommend that you still use the Design System’s focus state colours (yellow and dark grey) if you use your organisation's brand colours with Design System components and patterns.
If you use different colours for focus states, you must have a contrast ratio of at least 3:1 to meet WCAG 2.2.
Check contrast with the webAIM colour contrast checker.
Link focus state
When links are focused, they have a yellow background and dark grey bottom border.
All components that are links or behave like links use the link focus state, such as:
Button focus state
When buttons are focused, they have a yellow background with a dark grey bottom border.
This focus style is applied to all types of buttons.
Form field focus state
When radio buttons and checkboxes are focused, they have a yellow background, yellow outline and a thicker dark border.
When other form fields are focused, they have a yellow outline and a thicker dark border. For example, text input fields have a yellow outline and thicker dark border when focused.
Focus states in high contrast browser modes
High contrast browser modes make webpages easier to read, particularly for users with visual impairments.
Design System focus states are designed to be accessible in high contrast browser modes.
The styling depends on users’ browser and settings.