Focus Styles Exercise

[00:00:00]
>> Jon Kuperman: We'll jump into what I promise will be the shortest lesson followed by an exercise but it was something that I thought was really important because I think it gets skipped all too often. It's often contentious with design teams. And I think it's important as accessibility experts that we kind of push back a little bit and that's focus management.

[00:00:18]
And so basically, no matter your application, you do need to be compliant, some type of visual focus indicator. This is absolutely crucial for keyboard users, right as they're tabbing around, they need some way of knowing where they are in the document. And I know this often conflicts with the design vision for certain applications, but there are some really cool things you can do.

[00:00:38]
For example, you don't need to have a hover indicator, but you do need to have a focus indicator. So it doesn't need to have a big blue ring when you mouse over it, but it does need to have a big ring when people are tabbing through in some way to make sure that it meets the standard requirements.

[00:00:53]
So I find this to be the best compromise where working with design teams. And I'll say, cool, we can have no hover item, but we are gonna have a focus style. Alternatively, I think if you sneak in a focus style, most people don't notice because they're not tabbing through.

[00:01:07]
So cool. The focus requirements, in order to be standards compliant, indicators must have a minimum contrast ratio of 3:1. And we will later in an exercise explore a cool color contrast picker so we can get a good idea there. The focus area needs to be at least 2 pixels thick.

[00:01:23]
They need to be visible to both light and dark modes. Users need to have an idea of where they are on the page no matter which light or dark mode you're using. Multiple indicators are always beneficial. So thinking about something like a background change plus an outline, but they're not required.

[00:01:38]
Just the 2 px thick outline is what's required. And any kind of animations could enhance visibility, but they shouldn't be distracting from navigating around on the page. So with that, we'll hop into a real quick exercise. Focus styles, same repo, same website. Just go over here and there's not much to code here.

[00:01:56]
I just came up with a bunch of examples that I've seen around the Internet and was hoping everyone would take a few minutes and just kind of tab through them and see kind of the difference it makes. No focus outline, too thin of an outline, all sorts of cool things like that.

[00:02:09]
So, yeah, if we can just take a quick break here, kind of tab through and just try to gain a little bit of empathy for why these focus rings would be important. So, yeah, hopefully this one was just small, but I just wanted to kind of give this kind of experience.

[00:02:26]
With no focus outline, it's impossible to know where you are. Thin outlines can be okay, but they're not great. And as we kinda talked about earlier, building empathy for people who have some kind of vision loss and some inability to maybe see such a subtle difference. The low contrast one can be okay, but it won't look good on dark mode.

[00:02:44]
And then when we get into some other examples, like a big, thick blue outline is nice. Outline and background is great. A little bit of an animation can be cool. Again, for this kind of compromise with design, you'll notice that these don't have any hover styles. So you can still have full control over your design system for mouse hover effects while providing a really good accessibility experience for people tapping through.

[00:03:05]
Similarly, a little bit of an animation background and border here, and then a good visual indicator for the cards. So I actually find this a cool thing to do as I go back to websites that I use all the time, like news websites or whatever. Try tabbing through and seeing what they've done for their focus experience, cuz they often people do really cool things.

[00:03:22]
Yeah, Mark.
>> Speaker 2: Is there any WCAG rule that the focus indicator has to be in a separate color than the rest of the page, like not just black?
>> Jon Kuperman: If I think I understand the question, then I think it's this one that whatever the indicator is, whether it's a background color, a border needs to have a 3:1 contrast ratio against whatever it's touching.

[00:03:52]
So you could have a black page, a white section, and then elements in that white section could have black. You can reuse colors, but whatever the indicator is against needs to have that 3:1 contrast ratio to be compliant.