Visible Focus Styles

[00:00:00]
>> Marcy Sutton: Okay, so visible focus styles. Really useful for a lot of people, but they're often turned off for everyone. The outline none or outline zero just for every focus in CSS, we should really avoid. Instead, styling the hover and focus state to actually have a visible focus style is fantastic.

[00:00:22]
And it's worth mentioning as well, that a lot of times that desire to suppress the outline is coming from mouse users. And I would love it if this wasn't the case, but when we are trying to please a lot people with a single interphase, it's a really hard line to walk.

[00:00:41]
So I am a big fan of tools like focus visible, which is a proposed CSS selector that has a polyfill that you can use, so you can use it now. And the way that it works is it's really similar to CSS focus. But it uses some heuristics, like some additional information about how the user is navigating through the page.

[00:01:03]
Are they using their mouse? Are they using a keyboard or a touch device? So this would be a web standards based CSS selector that we can use to style for the mouse and keyboard users a little differently. There is a JavaScript version of the same idea called what input, that's a script that you can pull in.

[00:01:24]
In focus visible polyfill case, you just import the polyfill and then you can use the CSS. What inputs really similar, you import the script in JavaScript somewhere and then in your CSS, you write these data, what intent selectors. And when that script is loaded, you can actually change how the styles are working.

[00:01:44]
So mouse users, if they don't want focus, we can suppress it. So these are tools to give us some more like hooks to style based on how people's preferences are. But what I think would be the best outcome, is if we had an operating system level preference that the user could say, I want focus outlines all the time, just because it's really difficult to please everyone with this.

[00:02:08]
But if you're working with focus and wanting to enable it a lot more, you might end up reaching for tools like these just to make sure. Then you can add focus for things like, I'm scripting focus around the application and I want to show it. So you know where you are when I've moved your focus.

[00:02:26]
Tools like this are really helpful for that.