← Back to posts

Why is :focus-visible better for buttons?

Focus style becomes visible when a user clicks a button

When a user clicks on a button that has a focus style, for the duration of the click, the focus style becomes visible. Focus styles are often made to improve accessibility rather than meet the branding requirements.

Lose the click focus, but keep the keyboard focus

Switching to using :focus-visible allows us to keep on brand while also satisfying the accessibility requirements of users who navigate with a keyboard.