Introduction: The Mouse Isn’t for Everyone Take a second and unplug your mouse (or turn off your trackpad). Now, try to use your website using only the “Tab” key. How do you know which button you are currently on? If the answer is “I can’t tell,” then your website is missing a Focus State. For people with motor disabilities who use specialized keyboards or switches, the focus state is the only way they can navigate the digital world.
The “Invisible” Indicator
For years, designers hated the “ugly blue box” that browsers put around links. They often used code to hide it. This is one of the most common accessibility failures we find. Hiding the focus indicator is like removing the “Current Location” dot from a GPS map—you’re still moving, but you have no idea where you are.
Making it Beautiful and Accessible
At Aditya Catalyst, we teach designers that focus states can actually be a beautiful part of your brand.
- Contrast is Key: The indicator needs to stand out. If your website is dark blue, a thin black box won’t work. Try a thick, bright yellow outline instead.
- Don’t Rely on Color Alone: A good focus state might change the background color and add an underline, or make the text bold. This helps people who are colorblind.
The Bottom Line: A visible focus state tells your users, “We see you, and we’ve made sure you can find your way around.” It’s a small detail that makes a massive difference in the daily life of a keyboard user.