Wondering whether to use :focus or :focus-visible in your CSS? In this quick video, I break down the difference, show you how each behaves for keyboard and mouse users, and explain why using :focus can make your site more accessible for everyone.
Transcript
I’ve been asked several times about the difference between Focus and Focus Visible. In this video, I’m going to show you the difference, what it means, which you should use, and why.
The basic difference between Focus and Focus Visible is that both of them work with keyboard users, and only one of them works with mouse users. The one that works is Focus.
Here, I will show you with the keyboard. Here, I have the first button. I’ve tabbed to it, and the second button, I’ve tabbed to it. As you can see, both are showing up just fine.
Now, I’m going to use my mouse. You’ll see if I click on the button that has focus, I can clearly see what I just clicked. If I clicked on the button using focus visible, I can’t. This means that mouse users are getting a less than experience. They don’t see when a button is clicked.
This is particularly important on websites with a lot of links on them. Here I have the Learn Library page, and let’s say I hop over to the UK Webdesign System. Opens in a new window and I see things. Now, ready to come back, and I want to know where I was.
Well, by using Focus on this website, I can clearly see where I was. It’s highlighted. If I was only using Focus Visible, I would have absolutely no idea where I was just working. I always use Focus on websites.