Focus Management

[00:00:00]
>> We've kind of talked about different devices folks use. We've talked about screen readers as a separate concept, and all the different things that come with that and we've talked about accessible HTML. Writing either semantic HTML or how to use ARIA to update it. And we talked about roles and state and stuff.

[00:00:19]
So kind of wanted to get into a little bit more advanced stuff now where we're thinking about, okay, like we know what devices folks use, and we know what considerations we have for those devices. How do we really start thinking about building great accessible experiences? So the first section on that is just all about focus management.

[00:00:38]
So this comes with a few things like focus management. And it's kind of highest level is like for keyboard only users like if I just start hitting tab on the site, do I have some idea of where I'm at, right? So like for example do I have that blue focus ring, which comes default on links and buttons and things like that.

[00:00:57]
Do I have some way of knowing where I am? So back to the webAIM thing for to be compliant. Whenever an element receives focus, it can't change the page dramatically. So that's like one thing that I've seen before is like an unfocused animation or something like that. But remember that focus is not just something you're calling in JavaScript it also can be called when a user tabs to an element.

[00:01:20]
And when you input information or interact with a control, it also doesn't change the page. So that's like one thing we're looking for is, we need a visual or some kind of screen reader safe indicator that the item has focus. So HTML has like a dot focus property, and a lot of focus of all elements come with a blue ring, which is nice.

[00:01:40]
But also be careful that you don't change too much. You don't want to have like a pop up only come when focus is hit or something like that. Because remember, focus is not just an APIU call it's also something that the keyboard will call itself. Does that make sense?

[00:01:54]
It's kind of how to think about focus, we need an indicator but it needs to not be too big because we got to remember that people are just gonna be focusing around on different things as they digest the page. Awesome. So one of my favorite things building with accessibility is keyboard shortcuts.

[00:02:11]
So, like learning how to be a dev, I was like a really big vim user, right.? And then I started getting really into like keyboard shortcuts on my Mac and in Chrome and I download a plugin for Chrome, it's really fun to me when I don't have to reach over and use my mouse or my trackpad.

[00:02:29]
And keyboard shortcuts going back to the first lesson we talked about these devices and a lot of these assistive technologies, ultimately result in a lot of effort per keystroke, right? Like if you're using the single switch or using a head one, each character is just more effort to type than it would be if you were using your hands at a keyboard.

[00:02:49]
So one cool thing that people do on sites like Twitter and Facebook is they offer keyboard shortcuts for so many different actions. So if you go to twitter.com, and you hit the question mark button, you'll get this pop up, right? And this pop up will show you that you can do just about anything like you can use J and K to move up and down in your timeline, you can use space to go one page down at a time.

[00:03:11]
You can use period to load in New Tweets. You can make a New Tweet with N. You can send it with command enter is like really, really robots. You can basically do anything that you need to do on Twitter with two keystrokes at most one a lot of the time.

[00:03:25]
So this can be really fun. I made a library like a long time ago, it still works great. But if you go to my github.com/j coupe, and then on my main page, there's this keyboard shortcut library. So this is like super generic events that just will trigger on like J, K and O question mark, all these kinds of things.

[00:03:48]
So if you're looking for a place to get started, this could be a cool one. Feel free to use any other library that's out there. But this is just one that I made that, he didn't get to see how old it is cuz it has Bower for an installation instruction but you can just take the .js library and it works great for kind of like setting up a framework for keyboard shortcuts if you wanna build them on your own app.

[00:04:08]
Facebook has very similar. You're able to move through all the news items, you're able to search, you're able to go into a full screen or not full screen, you're able to go through pictures, all sorts of really cool things with keyboard shortcuts alone. So yeah, so I would recommend like they're fun to build.

[00:04:25]
They're really helpful for folks. There's a lot of prior art on them. So I'd probably if I were building it for a new app, I would just go to one of these sites that already has them and use a lot of the same shortcuts that they use cuz I think folks will come to a new site and just try J and K, for example, for next and previous.

[00:04:42]
But yeah, they're a lot of fun and they can be really helpful for people. They're definitely more advanced, right? This is not just adding roles to HTML elements. This would be event listeners for JavaScript that actually trigger things in your app when they're hit. But yeah, they're a lot of fun to build and they can be really helpful.