Focus

Definition

Focus is the state that makes it visible which element is currently receiving keyboard input. When you move around a screen using the Tab key instead of a mouse, a distinct outline appears around the active element. That outline, called the focus ring, tells you exactly where you are standing right now. Press Enter or Space and that element is activated; press Tab again and you move to the next spot. Just as a mouse cursor shows a mouse user their current position, the focus ring is an indispensable compass for keyboard users. Any element you can operate, whether a button, a link, or an input field, should be able to receive this focus.

Why does it matter?

Not everyone uses a mouse. People with limited hand mobility, people using a screen reader, and developers who are simply faster on the keyboard all move around a screen with the Tab key. Without a focus indicator, they have no way of knowing which button the cursor is on right now, which is no different from feeling your way around a dark room with your eyes closed. That is why the focus ring is not a matter of taste but a basic requirement of accessibility. A clear focus indicator lets keyboard users reach exactly where they want to go without getting lost, and on order-dependent screens like forms it makes plain which field you are currently filling in. Well-built focus is the door that lets more people actually use your screen. It helps to remember that accessibility is not a courtesy for a small minority, but a fundamental skill for the moments when anyone might come to rely on the keyboard. When your mouse suddenly stops cooperating, or when you need to race through a long form, all of us become keyboard users for a little while.

Common mistakes

• Removing the outline because it looks ugly and leaving no replacement indicator at all. When you do this, keyboard users cannot tell where the cursor is and end up completely lost inside the screen. This is one of the most common mistakes that seriously harms accessibility.
• Making the focus ring too low in contrast. A faint outline that barely stands out from the background might as well not be there, and in bright conditions it is effectively invisible.
• Letting the focus ring linger loudly even after a mouse click, which looks cluttered. Trying to fix that clutter, people often delete the ring entirely and end up hurting keyboard users too.

Practical tips

• If you want to remove the outline, always replace it with another clear indicator. Simply deleting it leaves keyboard users lost, so the rule is to provide an alternative such as a border or a shadow alongside it.
• If you want to hide the ring on mouse clicks but show it only for keyboard navigation, reach for focus-visible. Distinguishing the two situations keeps the screen tidy while preserving accessibility.
• Set the color and thickness of the focus ring so it has enough contrast against the background. It has to be visible at a glance on any background to do its job as an indicator.

Related concepts