August 20, 2020
Focus states are an essential part of ensuring that a user interface can be navigated by a person not using a mouse. And ensuring that everyone has a positive user experience.
Simply put, a focus state highlights the current element which enables people to navigate and interact with a website using a keyboard or voice control software or technologies.
They are also largely forgotten about for most designers and developers, which generally means that the user experience for a large portion of people is plain awful when they interact with these user interfaces.
So to make the web a little better here are a few simple tips for improving the design of focus states in a user interface.
Any interactive component in your user interface needs a focus state. It is as simple as that. That might sound obvious. But why do we forget to add focus states for clickable list items or cards? Most of the time, we only create focus states for form elements. Things like icons, avatars, cards, list items, grid items, toggles, tooltips, sliders, along with all other interactive components, need a focus state.
It is also worth noting that not all components need to have a focus state. The simple rule that I follow is if the component is not interactive, then it does not require a focus state. For example, a title or paragraph does not need a focus state. But a link in a paragraph does need a focus state. The same applies to modals, dialogs, navbars, screens as a whole, and so on.
Please get rid of the browser default look and style it appropriately. It should look and feel like your visual identity. Styling focus states is all about providing a unified experience for all users. Just make sure that what your changes are improving on the user experience and not taking away from it.
Another obvious tip but some focus states are barely visible. Yes, I mean those that have the tiniest amount of contrast between any other component state.
Focus states can look good, as I mentioned in the previous tip, so please make sure that a user can quickly and easily identify them.
And make sure to turn off the ability to focus on elements that are currently hidden, such as off-screen menus.
You can't interact with two components at the one time, so you shouldn't be able to focus on multiple components at the same time either.
Make sure to only focus on a single component at a time.
This is a tip for live sites, and prototypes. But take a few minutes to try it out. Spend some time just navigating with a keyboard or screen reader.
Three simple questions that you can answer with a few minutes of playing around. So make sure to try it out!
Here is a list of resources that helped me write this article and will help you better understand designing user interfaces for all.
Material Design Interaction Guidelines
NNG Keyboard-Only Navigation for Improved Accessibility
If you liked this story then you might like my monthly design newsletter where I share stories just like this one.
Once a month, I send out an ad-free design newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.Click here to sign up.
If you enjoyed this article then you may want to read my other articles.
Once a month, I send out an ad-free newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.