Focus State

Definition

Focus State refers to the visual indication that an element, such as a button or form field, is currently selected or has the user’s attention. Focus states are crucial for keyboard navigation, ensuring that users can clearly see which element they are interacting with. Focus states help guide users through tasks by providing visual feedback on where their actions are directed.

Why it matters

Focus states are the most commonly removed accessibility feature in web design — developers suppress the default browser outline because it looks ugly, without replacing it with a better alternative. For keyboard-only users (people with motor disabilities, power users, people with broken mice), removing focus states makes a product completely unusable. WCAG 2.1 requires visible focus indicators, and building custom ones that look polished is a 30-minute task with significant accessibility impact.

Real-world example

GitHub's focus states are deliberately styled with a thick blue outline that matches their brand — visible enough for keyboard users to navigate the entire interface without a mouse, but designed well enough that they don't look like an afterthought.

All design terms
Confused about
Focus State
?
Design is fun, but it's not easy.
Get help from a senior designer.
Start your project with us!
Start a project