Focus Management Patterns

[00:00:00]
>> Marcy Sutton: Okay, so let's talk about some modal layers and things that can come up in focus management, disabling background content. So I have a few options here listed, and you can use them depending on your use case. So the first one to talk about is aria-hidden. And this is a state that you can toggle in your documents to suppress accessibility information.

[00:00:24]
So I can put it anywhere in the dome and it will take that whole tree of HTML and strip its accessibility information. What it doesn't do is keep you from focusing on interactive elements inside of that tree. So if you add tabindex of -1 to any links and buttons of things, that will make sure that you're not landing on what we call ghost controls, which can be a huge pain cuz you're like, why am I tabbing onto these things that aren't announcing anything in the screen reader?

[00:00:51]
A tool that I'm reaching for a lot more because it's easier than managing aria-hidden and tabindex is what is called a inert. It's an attribute that's being proposed in HTML. There is a poly feel that you can use. And it's an an attribute you can just put directly on an element and it will block those keyboard interactions inside of a region.

[00:01:11]
So it's just one attribute instead of two. And then the big one for disabling the background would be displayed on like if you can actually like change the display, then it will just hide it from everyone and that's the easiest. So let's look at why modal layers are important.

[00:01:29]
So I opened a screen curtain, it's like the background layer of a modal window. But I haven't disabled anything in the background. And I could still reach that link back there. So if I had a modal on top of this, maybe it has a form to subscribe. Or an alert that your login session is about to timeout.

[00:01:49]
If I haven't sent focus into the layer in front, I could be stuck back behind it. And if I haven't disabled things in the background with the aria-hidden and tabindex, that's when I can get into these situations. So some patterns that this might come up in dropdowns and menus.

[00:02:07]
So we saw some dropdowns earlier, we wanna make sure we're sending focus when those open. Menus and things are similar. Layers and models, if you have a whole interface with layer sliding in. I had a really great example of the Blackboard Learn application, they do a lot of that.

[00:02:24]
Their free demo is no more, so I can't show it to you. But there are a lot of web applications that do that where the whole screen has these layers sliding in. And that's really critical to disable those background layers. View changes and delete. So if you're sorting something and you want to delete an item, you have to send focus somewhere or else it's just kinda dropped on the floor depending on the browser.

[00:02:48]
Or it might have to start over all the way from the top of the page. And loading screens. If you have an interstitial, you wanna send focus to that so that you're not stuck back in that background. And a quick mention of interactions. So we saw on the New York Times' menu that they used arrow keys, and those are links.

[00:03:09]
So it's a bit subjective whether you should use the Tab key or the arrow keys in these interactions when you're in like a drop-down menu. And I just wanted to say that it depends on what type of a pattern it is. And a resource that I really like for testing patterns and as a good starting point are the ARIA authoring practices guide.

[00:03:28]
So they go through a lot of examples. A lot of mechanics of interactions, what's expected, what's the convention. And so that is a whole wealth of information that you can use when you're building these patterns later on. So links versus buttons, this is another one that comes up a lot.

[00:03:47]
So I wanted to mention that links navigate and buttons do actions. So buttons kind of, I mean, there a holdout from forms but we use them a lot in web applications where JavaScript is a big part of the experience. And if it's not navigating someone somewhere, a button might be the right way to go.

[00:04:09]
I have an article that I wrote, called links vs buttons in modern web applications on my website. You can go learn a bunch more about that. And the reason I mentioned that is that when you're building a drop-down menu, whether it has links in it or buttons in it might, that might alter the interaction a little bit.

[00:04:25]
And it's always good to if you have that setup, get some user testing to see like, is it confusing to people?