This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Visible Focus" Lesson
[00:00:00]
>> Jon: Okay, here we are. So Visible Focus. So this is another thing that we were just kinda talking about. But one of these checklist items,and as we keep going through the slides we're gonna tick off these checklist items. But it needs to be be visually apparent which page element has the current keyboard focus, i.e as you tab through the page, you can see where you are.
[00:00:17] So if you go to a lot of the big websites, and you start tabbing through. You'll notice, maybe even that you haven't noticed before that every single interactive item has some kind of visual focus state to it. A Twitter or a Facebook status or a profile picture things like that.
[00:00:31] And yeah, like we were mentioning it is kind of this common anti pattern to remove that focus state, so don't do that.
>> Speaker 2: A request from the chatroom Michael J says for newbies, please explain the caveat on OS X regarding enabling press tab highlight each item on a website, webpage.
[00:00:51]
>> Jon: OS X regarding enabling press. [CROSSTALK]
>> Speaker 2: Let me highlight that for you.
>> Jon: I see it, I'm just not sure. I'm not sure what that means. [CROSSTALK]
>> Speaker 3: I believe what he's referring to is with, when you, say you do a fresh install of OS X. And I believe it's in preferences, that you actually have to go back in and specifically say that non focusable items.
[00:01:18] I can't remember the terminology, but it's not on by default. You actually have to go in and modify some preferences, I'll have to look it up here.
>> Jon: We'll follow up on that during one of the exercise breaks. We'll find a blog post or something detailing that and put it in chat.
[00:01:35] cool, thanks for that comment. And so here is an example of visual focus so you can look back at a website and you can tell that you are on the email field filling something. We mention a little bit before, talking about CSS resets and frameworks, things like that.
[00:01:54] They can be a little bit dangerous doing things like removing the focus state. But I also wanted to give a big shout out to specifically bootstrap, which I think made accessibility a lot more mainstream. Just by making it a priority, kinda from the get go. So if you use Bootstrap like these are in some Bootstrap theme you get a ton of really, really good stuff for free.
[00:02:15] On the other hand they also, it's like kinda the battle with design is, everybody wants to kinda change things. Like I think the focus date isn't often removed because people don't want it. It's because they want it changed a little bit. So they want it to be like a gray glow it's opposed to blue glow, things like that.
[00:02:32] And we often see this like accessibility trap, these are often like trying to reengineer elements like make your own check box. Or make your own button or make your own focus thing, things like that. So I think, I guess the take away there is that if you are gonna to embark on a journey like that.
[00:02:47] That's like one area where accessibility really needs to be a shipping requirement, you know things like that. Because that's like one big area where we can totally break websites just by trying to make them look a little different.