Stop Killing Focus: Master the Magic of :focus-visible

Picture this: you have just finished a pixel-perfect landing page. Your designer is happy, the client is thrilled, and everything looks sleek. But then, a user clicks on a button with their mouse, and a thick, chunky blue outline appears around it. Your designer screams, "It's ugly! Remove it!" So, like many developers before you, you reach for outline: none; . Congratulations, you have just broken the web for keyboard users.

The eternal struggle between "clean design" and "web accessibility" has plagued us for decades. We need focus indicators for those navigating via Tab keys, but we don't necessarily want them to scream at users who prefer a mouse. This is exactly where the :focus-visible pseudo-class saves our sanity and our layouts.

How we suffered before

In the "dark ages" of frontend development, we had two main choices, and both sucked.…