Skip Navigation for Accessibility

[00:00:00]
>> Kevin Powell: There's one last thing that we wanna do with our navigation, which is making an easy way for people to skip the navigation. And this might seem like why would you wanna skip your navigation, but let's go over to frontendmasters.com, who gives us this option. If you go to most websites online and you hit Tab on your keyboard to get into the page, you can see a skip to main content is showing up.

[00:00:21]
You're not gonna be able to get that to that with your mouse. You're only gonna get to it if you're keyboard navigating, and if a hit enter, it skips the navigation and it goes to the other content on the page. The reason for this is, and there's a lot of users who use keyboard navigation.

[00:00:34]
They say, you come and you go to your courses page, and then you start keyboard navigating on this page. Imagine you go to the Courses page, and then you have to go through all of these again to get to the content that you just navigated to. And then finally, I get to it, and then you go to another page.

[00:00:51]
And then you tab, and you have to tab all the way past all those navigation links again and every page you're going to, it's a very frustrating experience. So what you do is, the very first focusable element on the page should be this skip to main content, which, again, click that then when I tab through them into the main content.

[00:01:08]
So it makes life a lot easier. It's very easy to implement, and it's something that we should have on all of our projects that have a navigation in them. So to be able to create that, we can come in here. Using source control, once again, we can create a new branch.

[00:01:25]
So we can click on our little branch at the bottom, create new branch, and we can do skip-to-main-link.
>> Kevin Powell: Publish that branch, so that branch is on Github and now we wannna get started with it. Let's just control, close that down. This is a part where you can decide how you want to do things or what you wanna do to style it up.

[00:01:50]
The very first thing you're gonna wanna do, as long as it's the first stylable element on your page, you can focus, sorry. As long as it's the first focusable element on your page, it's good. So you just have to decide where you wanna put it, I'm gonna put it right as the first thing in my body.

[00:02:07]
It could be the first thing in your header, it's really up to you. We'll just put a link that's going to go to my main, it's going to say, skip to main. And let's give that a class so we can select it with CSS, class = skip-to-main and maybe this could be skip to main content right here.

[00:02:31]
Now, if we go and take a look at our page, we will get this big skip to main that shows up here at the top, which we don't want. The other thing is when you just click it, we wanna to bring them somewhere, so I already put that, when I did that, we say that the href is going to a hashtag of main.

[00:02:50]
So we just come down to my main and give that and id = main as well, so when we click on it, I saved that, when I click It should shift down a little bit and go to my main content. So you know it's working if it does that little jump right there.

[00:03:07]
As far as styling this, we only want it to be visible when users focus on it, so the only way you can get to it is with the keyboard. And to be able to do that, we've already written some code that hides things. So we're gonna hook in, we're going to steal that code that we already wrote, and it was all the way down in our utilities layer, and it was this visually hidden.

[00:03:28]
Now I don't wanna use the visually hidden class on this, because if I use it, it's always going to be gone, and there's no way to get into it. There is the option to modify the visually hidden a little bit to just treat it so because this is a focusable element, it still would work, but we're gonna do it a little bit differently.

[00:03:45]
So I'm just gonna copy the same code that we have here, and I consider this a component. So let's go find my layer components right there, and it's the first thing on my page, so I can put it right here at the top. .skip-to-main, I can paste that in.

[00:04:05]
So it will disappear, like the visually hidden things have been doing up until now, but we come here and we can use our not and say not focus. So if the element is not being focused on, so if I tab, it's the very first thing. There we go, you can see it shows up on my page and then if I push tab again, we go into there.

[00:04:26]
And if I go, shift tab goes backwards, if ever you're keyboard navigating. So shift tab, I can see it again.
>> Kevin Powell: One thing you don't want it to do, is when we do this, you can see it's actually stretching the top of the page cuz it's taking up space.

[00:04:40]
So this is the typical type of thing you would have definitely a display absolute on. I caught myself, position absolute. Display absolute is the most common mistake I make and I can never figure out why it's not working. Position absolute, just so it's out of the flow. And then you can have fun styling it however you want.

[00:05:02]
Maybe we don't have anything, it's very rare that even your designers will tell you how this gets to look. Usually, I give it a bit of padding, a background color, so it stands out, just something. So it's obvious that when it comes in, people can see that they are on that.

[00:05:17]
So you can style this up however you want, I'm gonna do a little bit now. But you can code along, or you can just choose whatever styles you'd prefer to put on this. But as I said, I like giving it a background, so I'll use my accent main, which is the green one, give it some padding, and I guess a border radius would probably look pretty good on there.

[00:05:40]
Something like that, did not mean to jump to the bottom of my page.
>> Speaker 2: Said, do you have absolute positioning twice there?
>> Kevin Powell: Do I? I didn't need to add it, thank you.
>> Kevin Powell: That's weird, then why is it pushing my content down?
>> Kevin Powell: Skip-to-main : not(:focus).
>> Kevin Powell: Sorry no, that should still work.

[00:06:26]
One way you can debug a little bit if you have focus elements is, in your Dev tools, there's this hover option. All of them have it somewhere. It's a little bit different depending on the browser, and I don't want hover, but I want when it's focused.
>> Kevin Powell: I know what I did wrong, I'm sorry.

[00:06:42]
I'm gonna cut these darlings off, I'm doing everything when it's not being focused. So then when I did focus it, it wasn't getting any of these styles. So we have that for when it's not focused, and then we can have a regular skip-to-main right here for the rest of the time.

[00:07:01]
And on that, I'll want also that position.
>> Kevin Powell: Absolute, there we go. So I can see it's come in there. You can move it off the side of the page a little bit with your top, your left. Some people like it centered. Some people like to animate it in with a transition, so it slides in.

[00:07:20]
It's really up to you how you wanna set it up. So, if we're near the top of the page, when I tab on it, it's there when I tab off, tab on, tab off. And yeah, just make sure this is the styling when it's not visible, so we're hiding it here.

[00:07:36]
So don't put any of these styles you want of what it looks like in that. Just put them on the regular selector that comes afterwards. Now with that done, the future's done. That was a really nice easy win, but we created a branch for that. So once again, we wanna come into our source control.

[00:07:52]
Let's just go full screen with VS Code and zoom back out a little bit.
>> Kevin Powell: And we can come here, we can stage all of those changes. I'm just gonna hide this bottom thing cuz it makes it visually cluttered a little bit. I'm gonna stage those changes, we can say added, skip to main link, commit, sync those changes.

[00:08:18]
>> Kevin Powell: I have it over here, jump back over. I think I closed my GitHub repo, GitHub fem.
>> Kevin Powell: We have skip-to-main link compare and pull, you can write your description added a skip to main for better a11y and keyboard navigation. And give more details, whatever you want there.

[00:08:50]
Create the pull request, we should run into no issues. So then we can merge it. I can merge it now, even though Netlify hasn't done the build for it, it's up to you, if you hit it fast enough, then Netlify just won't bother building it. We can now delete my branch.

[00:09:07]
Go back over to GitHub, and I'm doing this part a little bit faster this time, just because we just went through these exact same steps. Sorry, not back to GitHub yet, back to VS code. We can go back to our main branch. If we look at our source control graph, we should see, let's see refresh that.

[00:09:28]
There we go. That's if you don't see those, there is that refresh button down here that I just pushed. And it brought that in, so I can see that this is being brought back in right there. And that means that we can see that I'm on my main branch, all of this is come in.

[00:09:43]
Because all of that has come in, I can then safely go in my source control here, go to my branch, and I can delete the branch. Skip-to-main, because all of those changes are here. If you'd rather leave that there, again you can but what happens if you start making all of these branches?

[00:09:59]
You'll just have tons of branches that are all finished and you're not actually gonna be working on them anymore. So, I like cleaning them up as I go. As long just make sure you've merged your changes and brought them into the main branch before you delete the other one.

[00:10:13]
So there we go, all of that is done. Our first page is finished, and now we can go into the second page and have some fun with that one.