We’ve been working to improve focus styles within Craft’s control panel lately, and will be sharing what we’re learning along the way. Here’s the first of a three-part series on visible focus indicators.
What are visible focus indicators?
Visible focus indicators are styles that show which element has focus, and can therefore be interacted with.
Focusable elements include: links, buttons, inputs, and any other interactive elements that can be operated with a keyboard.
Browsers have visible focus indicators by default. Here are some examples:
Who uses visible focus indicators?
Visible focus indicators are are an essential accessibility feature, and are useful for many users with and without disabilities.
Some examples of users that benefit from visible focus indicators include:
- Users using alternative input devices, such as keyboards and switches.
- Users with low vision.
- Users with cognitive disabilities, especially those that affect memory or attention such as dementia and ADHD (Attention-Deficit/Hyperactivity Disorder).
Can we remove focus styles for mouse users?
There is a CSS pseudo-class,
:focus-visible, which can be used to display focus styles only for those users who need it.
However, the specifications don't have requirements on how to determine whether focus should be visible.
We can imagine many scenarios where mouse users would benefit from visible focus indicators:
- A low vision user zooms into a page and looks for the form input they are about to type into.
- A user that has lost track of their task on a page remembers what they were last working on based on which element has focus.
- A user with tremors confirms that they have successfully clicked an interactive element since the focus styles have been applied.
We tend to agree with Hidde de Vries' Mozilla Hacks post on focus indicators that it is better to show visible focus indicators for all users.