Focus Management & tabindex

[00:00:00]
>> Marcy: Okay, so now it is time finally we can move on to Intro to Accessibility in JavaScript Applications. it's what you've all come here to learn about. But we needed to focus on debugging first. So that way when you're working on things like focus management, live region announcements, semantic HTML, unobtrusive motion and animation and progressive enhancement.

[00:00:22]
That you have the tools to test the things that you're working on focus management. This is a really big one, because of the way that JavaScript applications are rendered on the client. So they're rendered with JavaScript taking over the browser's history. And we need to move the users focus as part of the interactions through the application.

[00:00:44]
So that they're alerted to content. So that keyboard users are in the right place in the application so that they're not behind a modal window. They're not stuck in some other part of the web application that isn't active anymore. And we also need to announce, by moving focus that will announce things in a screen reader.

[00:01:04]
So it's kind of a two fold interaction. We're getting keyboard users into the right place. We're also, by doing that often making an announcement in a screen reader just by sending focus there. So yeah, it's a really big topic in applications and some of the building blocks of this are using reachable and operable elements.

[00:01:23]
So making sure that you can focus on things. Like we saw that slack drop down menu, it wasn't reachable, so we couldn't even begin to talk about focus management. You should be able to use the tab key to reach this elements. So making them focusable by default. Often when we're opening this interactive layers, a convention is to hit the escape key and send you back where you came from.

[00:01:46]
So that's often the case with models that you can go back to get out of, if they're not forcing you to make a decision. We also commonly use the arrow keys for things like tab switchers and menus. Depending on how they're coded having the arrow keys means that you could have one focusable control and the arrow keys will move you around instead of having to hit tab a million times to get through an interactive widget.

[00:02:13]
A big part of this as well as visible focus styles. And my own opinion of this has evolved since I started. I used to feel that sending focus around dynamically, that suppressing the visible focus style was an important. However, once I got into user testing with people with disabilities and I saw how a visible focus style can be a game changer for using an interface.

[00:02:36]
I think it is a really important aspect of when we're scripting focus around like this. And then lastly, we talked about CSS and and hidden content, and background layers is a big part of this. So we want to make sure that if we open a layer on the screen that we're actually disabling the background.

[00:02:53]
Because that is something I see a lot. Especially with mobile dialogues and I'll show you a little demo example that we get stuck back there. And if we aren't sending focus in to the new content, It can just be really hard for a user to figure out what's going on.

[00:03:09]
>> Marcy: So the building block that we're gonna start with, with focus management is tabindex and it gets used and abused. So let's try and clear up some of the confusion around tabindex. It's an HTML attribute that makes elements focusable or not. If you use zero, it will make it focusable in the order in the DOM that it's included.

[00:03:31]
You can use tabindex of negative one to remove something from the tab order. If it's a button or a link or something that's focused a little by default, you can use tab index of negative one to remove it from the tab order. You can also put that on something like a div if you are gonna use JavaScript to send focus to it.

[00:03:48]
It would allow that on it to catch the focus and we'd see some examples of that. And then tabindex you can also put positive interger values. And AXE the browser extension was warning us, about a tab index of one, I believe it was on the GitHub site. And that's because when you put things in an order, then you have to manage the entire page order and it's a huge pain.

[00:04:12]
So let's click on this Demo Div and start playing with tabindex in here. So this is just a div. It's styled to look like a button. I mean, probably I've seen that before. So this div, I'm gonna go and add an attribute in the dev tools. So I can do tabindex of zero, and hit Enter.

[00:04:33]
And now I can actually reach this element. I can change it to negative one. i can't reach it again. It's sort of like the plane div. But if I click on it, it will allow me to focus it. So it's got, let's see, there's an outline. A rapper element.

[00:04:56]
I'm gonna go back to this element by clicking on it. And my tabindex was removed. That's what happened. Tabindex negative one. So now I am using a tool. Tell you about a little later, so we're not seeing the focus outline when I click on it. But my focus is there because if I hit tab again I'm in the next element in the tab order.

[00:05:18]
If I add tabindex of one, so taking it out of the order it was naturally in. It will now, I think it's actually at the beginning of the page. Yeah, so it's coming first. So if you use any positive tab index values, they will come before everything in the natural tab order.

[00:05:38]
Which if it's something in your footer, you probably don't want to come first. So it's good to know, what the tab order of your page. And I mention the Accessibility Insights extension earlier, that's the great tool of the test tabindex. So you can see the order as it goes along.

[00:05:54]
And if we have more time to debug we would look at every single one of those tools, but that's how you can debug tab order. And another mention, that screen readers you do not have to make everything focusable. Because you can already navigate with it like by headings and by different types of elements.

[00:06:10]
So this is for interactive controls. So another layer to put on top of this is that tabindex alone, you would rarely use it by itself, maybe the negative one part. But if you're making something interactive that's custom, you have to do a little bit more work. So I've added a role of button, and an aria label attribute of close.

[00:06:31]
And so that would take this, what's normally a div, and add some accessibility information to it. So a div has no semantics by default, and it's not focusable by default. But if I add, lets go add some attributes here. So role of button, and you can make up roles they're standard set.

[00:06:53]
I've seen that happen before as well. So go refer to the Aria specification and know we're your options are. So aria-label of close, to give it some accessibility information. And then if i go to the accessibility inspector it has changed the role of this div to a button and giving it what's called an accessible name.

[00:07:12]
And so that's really important if you're playing with creating custom elements. You really want to make sure you're going the full. And I also need to mention that if you can use a button element to start with, start with that. And I will show you why in the next slide