You know that feeling you get when you can’t find your mouse cursor? It just kind of disappears. It happens to me often because I have a mouse that I really like, and at some point they stop working so well. I’m not updating it until it is really, really dead.
What if you think your mouse stopped working but in reality the cursor changed in an unexpected way? Perhaps because some developer did something clever. Have you ever had that happen?
If you said yes, I’m betting it was either on a very “artistic” style site, or that it happened a very long time ago. I mean Geocities-long time ago.
When this occurred, I bet you did not say: “Wow, that is so cute. I really liked not being able to find my mouse pointer for a moment and then getting confused again the next time I hovered over the same area, until I realized it was a clever little thing you did changing up my mouse pointer on that spot. So great!”
So great?!
You didn’t say that. At least I doubt that you did, because when developers change how we expect our interaction tools to work in the interface, it tends to be annoying and frustrating.
Think about how you typically work with a mouse.
Most of the time you see the little arrow pointer. Sometimes you will see a pointer shaped like a finger and instantly know, without even thinking about it, that the element you are over is interactive and probably a link—possibly a button.
If you see a little hand with fingers extended, your brain gets a subtle signal that you are over a draggable item. It is actually pretty cool how useful these tiny indicators are.
And finally, the input cursor. When you see the little line for an input cursor, you expect to be able to write something into that area.
That is most of what you will use on any given day, and the magic of how effective those visual indicators are is in the fact that they are visible, consistent, and predictable. It took very little to train your brain to know that a finger pointer indicates a link, a hand means drag, and a vertical line means type. I bet you use those every single day.
Meet your keyboard users
So let’s talk about keyboard users and what designers do to them when they inadvertently miss the point of having visibly obvious focus states.
Keyboard users navigate your site using the keyboard. In order to do this they need a clear visual indicator of what item on the page has focus. It is usually a blue outline, but can vary by browser and site.
It is literally how they can tell if they are on top of a button they want to click or in the input field they want to type in. They typically use the Tab key and Shift + Tab to navigate through a page. They also may use arrow keys to scroll the page up and down.
Interactive items get focus states. When a keyboard user navigates to that item, the focus state appears, giving them a visual indicator of where they are on the page and allowing them to interact with the focusable element. Feel free to try it.
Along comes design
Along comes a designer, and they are told that to meet accessibility standards they need a visible focus state on all interactive elements. But they don’t like that pesky blue outline. So they decide to do something clever, something subtle, something pretty and sophisticated.
The result is a horribly inconsistent experience for keyboard users: a focus indicator that disappears when, in fact, the focus state has changed to a subtle shade of gray or a deepened box shadow.
That predictability of our interactive visual indicators is very important.
You shouldn’t be dramatically changing the appearance of focus states across your site except when there is a really good reason to—like because the focus-state outline is too close in color to the color behind it, making visibility poor. Or maybe you want to give a clear indicator that this part of the menu system is a bit different from the other parts. But only do it if you can clearly communicate that message.
Outside of those types of scenarios you should stay very consistent. Every button and link should get the same style of clearly visible outline on focus. Keep it to an outline or border unless you have an expert design team and user research to back it up, and even then predictability is paramount.
For example, don’t use subtle background color changes unless it makes sense across all the buttons, links, and inputs on your site, and even then you should make it a visually obvious change.
Focus is for your users
That focus state is for your users. It is for the literal usability of your site for keyboard users and other assistive-technology users. I know it feels satisfying to meet an accessibility requirement through clever design skills, but if your skills aren’t serving the user experience of the people who need those focus states, then your beautiful design is an epic fail.