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.
Cet article est également disponible en français.
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
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.
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
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 29, 2024