by Mat Janson Blanchet

Ensure to design a focus indicator for interactive elements

Posted on January 3, 2024

Takeaways

  • Every interactive element must have a focused state
  • Favour a two-colour focus indicator which works well over pale and dark backgrounds

This article is part of a series on user interface micro interactions and how they affect the user experience.


A focus indicator—also named a “focus ring”—is a visible outline on the element with which the user is currently interacting.

This allows users to know where their cursor is located, or with which element they are currently interacting.

The best known instance of this component is on text input fields, which often show a glow or outline to indicate that they are in focus. Every interactive element must have a focused state.

Focused state

Two blue buttons with an arrow between them: on the left, the button in its default state, on the right, the button with a purple outline to indicate focus
Button states: default state on the left, focused state on the right

Every interactive element needs a focused state. Most likely, each element will use the same style to indicate the focused state, but there may be cases when the style differs.

Favour a two-colour focus indicator

Note that the focus indicator must be of sufficient contrast relative to its surrounding, and thus it’s unlikely that a single colour will work in all contexts.

Comparison between a one-colour and a two-colour focus indicator over a black background
Comparison between a one-colour and a two-colour focus indicator

The examples above are using the same purple outline as a focus indicator as the image below the heading of this section. However, as can be seen, over a black background, that purple outline is not contrasted enough to be visible.

The solution to this design pattern problem is to use a two-colour focus indicator, which can be seen in the right column of the image above. While the purple may disappear in the black background, the white outline remains quite visible and provides a sufficient contrast with the previous state.

When should the focus indicator be visible?

The main reason for this indicator is to bring attention to an interactive element. Sighted users that navigate a screen with a mouse and cursor do not depend as much on this element, however users that navigate the screen with a keyboard absolutely depend on knowing which element is focused at any time.

The focus indicator is not necessary for sighted users when they click around. However, any input field must show the focus indicator when a user has placed focus on it, as the cursor usually disappears as users type.

If the user starts using Tab or Shift + Tab to navigate in the site, then every interactive element should display its focused state when in focus.

The focus-visible JavaScript library provides a good explanation on how to distinguish the contexts for when to show the focus indicator or not, depending on user interaction.

Dos and don’ts

Do

  • Ensure all interactive elements have a focus indicator
  • Detect if users are navigating with the keyboard to show the focus indicators that is most appropriate for them

Avoid

  • Do not rely on the default browser or libraries’ focus indicator styles
  • A focus indicator that is too discrete, the indicator must be visually clear
  • Hiding or cropping the focus indicator

⚠️ There is no need to show the focus indicator on non-interactive element if users are navigating with the keyboard.


References and Additional Readings

Articles

Accessible Focus Indicators: Something to :focus on | Deque

A guide to designing accessible, WCAG-compliant focus indicators | Sara Soueidan

Indicating focus to improve accessibility | Mozilla

Visual Focus | IT Accessibility – NC State University

Accessibility

Technique C40: Creating a two-color focus indicator to ensure sufficient contrast with all components | W3C

Understanding SC 1.4.13: Content on Hover or Focus (Level AA) | W3C

Understanding SC 2.4.3: Focus Order (Level A) | W3C

Understanding SC 2.4.7: Focus Visible (Level AA) | W3C

Understanding SC 3.2.1: On Focus (Level A) | W3C

Technical References

Keyboard Accessibility | WebAIM

Hover and Focus Effects – Links and Hypertext | WebAIM

focus-visible | Web Incubator CG – GitHub

Heuristics Explainer – focus-visible | Web Incubator CG – GitHub

Last updated on February 13, 2024


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.