Focus states

Use focus states to show users what page element they've selected and can interact with.

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:  

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

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.

The Design System's primary, secondary and cancel button styles and how they look when focused
Normal and focused 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. 

Focused radio button with yellow background, yellow outline and a thicker dark border
Normal and focused radio buttons
A text input and how its appearance changes when it has focus
Normal and focused text inputs

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.   

Primary button and button styled as link in normal and focused states in high contrast browser modes
Normal and focused buttons in high contrast browser mode
Normal and focused radio buttons in high contrast browser mode
Normal and focused radio buttons in high contrast browser mode
Back to top