Keyboard Navigation & Skip Links

[00:00:00]
>> So let's move on to some keyboard focus management. Now that we've gotten very deep into ARIA, some pretty dynamic stuff, so it's pretty appy, isn't it? And a lot of ARIA is that way, it's for dynamic web applications. So that's why I kinda prefaced it all by saying that it is an advanced tool.

[00:00:22]
So bear with me if you're like, whoa, this is getting technical. Some accessibility is pretty technical, but some of it is more nuts and bolts mechanics, and focus management for keyboards is that way. We can create something that's keyboard accessible without ARIA really factoring in at all. We do need to consider ARIA, but the keyboard-only mindset is before all of that.

[00:00:51]
So we wanna think about, how can a keyboard user get around? How can they go from component to component or page to page? How can they navigate through content, including interactive elements? And so that mindset is something we want to think about every time we sit down to test a web page, build a web page, build a web app.

[00:01:16]
And we joked around a little bit earlier today about turning your mouse off for a day of the week. I created [LAUGH] a tool kind of as a joke called no mouse days, as a nod to that idea. But I think you wanna incorporate it into your process somehow of just not using the mouse, not using your trackpad and seeing if you can still reach and operate everything that should be interactive.

[00:01:41]
So I have a mantra for you for testing, and we touched on this in our debugging section. So here's some of that. Again, can you navigate to and operate all interactive controls? And so screen reader accessibility does piggyback on this. We learned a lot with ARIA, maybe more than you really wanted to know, [LAUGH] but they do work together.

[00:02:04]
So anytime you make something keyboard accessible, the screen reader will also be able to navigate to that element using the Tab key. Screen readers do have other ways of navigating, but the keyboard access is foundational to a lot of that, and it's unfortunately overlooked a lot of the time.

[00:02:23]
Can you also see where your focus point is on the screen? So when we debugged SoundCloud, we saw that there was some outlines suppressed, and that is extremely common, unfortunately. So we want to allow some kind of focus state, and subtlety is not that helpful here. We want it to be obvious, have contrast, so people can actually see where they are on the screen.

[00:02:48]
And are we getting lost behind any active layers or in inactive mega menus or being forced through sidebar navigation? We saw that as [LAUGH] well. And then when you have things like modals, other layers, interactive widgets, is your focus moved into that new content and restored when you're done?

[00:03:10]
So with a modal, is your focus moved into the modal when it opens? And then when you hit Esc, or hit the Close button, or Accept, or whatever the call to action is, your focus from your keyboard should move back to where you came from. And that's so that if you can't use a mouse, that you're placed in the right spot.

[00:03:29]
And that's really what focus management is about, is putting the user in the right place to do the thing, to type, to navigate, to digest content that we just showed onscreen in a new layer. So it's all about kind of curating that experience for a keyboard user so they're not being literally left behind a modal or some other layer.

[00:03:55]
One tool that we use for focus management is skip links. And skip links are helpful on content-heavy sites, on web applications. And so when you can navigate by skip links, you could jump around. A common example would be a skip to content link or skip to main content.

[00:04:15]
And so that is a link that you can click that will bypass you past the header or other content, and to the main content. Or a back to top link, that would be another example of something maybe even more common than a skip to content link. And these are requirements in the web content accessibility guidelines, they are level A.

[00:04:37]
So we haven't even really talked about level A, but level A is before double A. So if you're trying to meet double A, that would also include single A. So bypass blocks are a important requirement, and I'm not meeting them by [LAUGH] not having them on this site, so I am gonna add some after this.

[00:04:58]
So they're not just a nice to have. We've talked about how they should be visible. So if you have a skip link, you really wanna make it so users can reach and operate it if they're sighted and if they're using a screen reader. So some mechanics of skip links.

[00:05:16]
You've got the link itself, so it has an internal link, usually. So the href points to an ID reference on an element. So in this case, there would be an ID on an element with main content. And so when I activate that link, it will automatically jump me to that element, which is super handy.

[00:05:38]
And the other component of a skip link is, where does your focus go to? And so the main element in this example has that matching idea of main content. And just to be extra double sure that it's going to work as a skip link target, we call it, I'm gonna recommend adding a tabindex attribute of -1.

[00:06:00]
So this is some of our first exposure to tabindex, but it will make something focusable or not. Tabindex of 0, we'll put it into the tab order. Tab index of -1 will make it receive focus. If you use JavaScript or you use a skip link like this, it will sort of catch it, but it won't make it so you can tab onto it.

[00:06:25]
It's not in the tab order. And so a CSS, you can choose whether you want to suppress the focus style. So you can't tab two elements with -1 of tabindex, but when you click on them, in most browsers, they will show a focus outline. People don't love it, [LAUGH] I've had to suppress this before.

[00:06:47]
So this is another use case for focus visible, potentially, where you match a focus visible selector to show off style and case. When you're using the keyboard with focus management, you do wanna show where your focus went. But for mouse users, you could suppress that focus outline, cuz it's usually around a whole, your main content is what would have it.

[00:07:11]
So yeah, it can be useful to know that you can match. I don't recommend hiding outlines really ever, except in the case of these tabindex of -1 situations. And even then, you could probably add a focus-visible replacement so that keyboard users would get something. So for skip links examples, let's go look at some.

[00:07:37]
Target has it, here's their big red site. And so if I hit Tab, they have their skip to main content link visible. It bumps down all the content, so we have this full screen skip to main content link. And it's actually pretty cool how they do this. They have two links, so there's skip to main content, skip to footer, and they just replace them right in the same space.

[00:08:03]
So it's a pretty nice treatment. It looks really seamless with their design. It's not an afterthought, they obviously planned this. And they have the links just kind of show up in the same spot. So let's say I wanted to go to main content, I hit Enter, and then my focus is already down the page.

[00:08:22]
I don't have to go all the way through all the header links. If I wanted to go back up to the top again and try the footer one, that jumps me way down here to the footer. And so that can be super handy, especially for really content-heavy sites, where it would be a huge pain to have to skip around or to have to tab through every single element.

[00:08:45]
So skip links are pretty great. Let's see how they marked theirs up, cuz that looked really cool. So I'm gonna go inspect up here in the header. Here is our skip links. We have these links right here, skip to main content. Just like we showed, it has the href.

[00:09:08]
So they have a CSS class here of h-sr-only-focusable, and it looks a lot like our other sr-only classes that we've seen. And so this one, that's how they're accomplishing that. And then, I guess, if I wanna see further how they did it when it gets focused, they just changed the positioning on it, looks like maybe a few other things.

[00:09:34]
But that's kinda the cool thing about skip links is you can test them generally when they're marked up with HTML and styled with CSS, not when JavaScript comes into play. But you can match these element pseudo states and test how they're gonna look. So this makes it nice when you're actively developing skip links.

[00:09:57]
You can just come in here and toggle this on. It will keep it in that state, so you can get it looking nice when it's active. You don't have to keep tabbing into the page and that loop of refresh tab, refresh tab. Use the force element state on focus, just makes your life so much easier.

[00:10:16]
So let's look at the GitHub version, cuz they have a lot of really cool accessibility features. So they made it stand out with a blue background, so it pops over the content instead of pushing everything out of the way. Works just as well, and so I hit Enter.

[00:10:36]
So you can see how there's no visible focus style when I hit that Enter. That's what I was talking about with the no focus style. So let's inspect theirs a little bit more. So if I go back up, and I can inspect this one, we have skip to start of content.

[00:11:00]
Oop, not what I meant to do. So I can search in here in the DOM, start of content. So that's the link itself. And then they've accomplished theirs. Instead of having an element that wraps everything, they just put an empty div and made it catch the focus. So that has this matching ID, but there's nothing in it.

[00:11:27]
I guess I'd wanna test that, because if we're jumping focus around, it's not gonna really announce anything. And thinking about a screen reader user, I haven't tested this specific combination of techniques. It is interesting to me that they have an element right after it that has a tabindex of -1 on it that says data skipped to content.

[00:11:52]
So maybe something, I don't know. It's a curious technique, but we don't really see where we go. I guess one benefit of doing the tabindex of -1 technique is that you have the option of showing where the user's focus went. And for people who really rely on the keyboard, that could be useful.

[00:12:14]
So I think, yeah, just some food for thought and how to make this happen. I mean, they're accomplishing what we really need to happen, which is jumping you past the header. Getting you past all the links that you don't wanna send a user through. And that's working great, that's the requirement.

[00:12:29]
So two different approaches, but basically doing the same thing of getting us past content that we wanna skip.