Skip to main content
Parsley Design Systems logoParsley Design System - sample

Focus

Focus state styles let users know which element they’re on and that they can interact with it. Displaying an outline around an element helps everyone who is using a keyboard to navigate and can also see the screen.

Some people use keyboards or other devices to navigate through a page by moving from one interactive element to the next.

Problem

As a customer who uses a keyboard, I need to know where I am when tabbing through the page or application.

Solution

Present the customer with a clear focus state that meets WCAG accessibility requirements for focus.

Elements that require focus

A number of different elements on a site or application can be focusable. All of them need to have a visible focus indicator to make them look different from the surrounding elements. Focusable states includes:

  • Links
  • Buttons
  • Form controls including text fields, select lists, dropdowns, radio buttons, checkboxes and textareas
  • Menu items
  • Content triggered by hover, like tooltips
  • Widgets, like a date or calendar selector
  • Specific non-interactive elements like a horizontal scrolling container where focus indicates that scrolling can be performed by keyboard controls.

Focus usage

All common browsers have default focus indicators for all elements built into the browser. If focus isn't defined then the site/application will rely on the native browser indicators, although focus indicators look different across browsers. To achieve consistency across browsers a defined focus style across elements is required. Additionally a defined focus style overcomes accessibility issues across the default focus styles provided by browsers and user agents.

Best Practice Guidance

  • Focus indicators are only output to keyboards users, mouse users will not see the focus outline style.
  • A .125rem (2 pixel) solid border surrounds the interactive state, the edges are square by default but will be rounded if the associated element has a border radius applied.
  • The colour is the primary interactive colour and differs based on the background colour.
  • The focus ring is offset .125rem (2 pixels) from the interactive region which provides a small amount of breathing space while also accentuating the interactive state further.
  • In instances where the offset is not clearly visible around the interative region then the offset can be removed to ensure full visibility of the focus state is available to users.
  • Use the default focus colour unless that fails a contrast of 3:1, the secondary focus colour is reserved for these instances. To accommodate interactive states on dark backgrounds an inversed focus state is also available.
  • See the defined focus colours in the colour foundations

Examples of focus across components

To test visible focus on some interactive states tab through the following items. Additionally focus can be tested across all design system elements.