Check out a free preview of the full Accessibility in JavaScript Applications course:
The "Coding a Skip Link: Wiring it Up" Lesson is part of the full, Accessibility in JavaScript Applications course featured in this preview video. Here's what you'd learn in this lesson:

Marcy wires up the component for the skip link to the course website, demoing the skip link and explaining next steps after everything is connected.

Get Unlimited Access Now

Transcript from the "Coding a Skip Link: Wiring it Up" Lesson

[00:00:00]
>> Marcy Sutton: So that should be it for this custom wrap heading and now I'm gonna go implement it. So I've still got an import here, it's looking for it in the better directory. So we're in the right spot. It's grayed out because I haven't actually referrenced it yet. But I'm just gonna grab that component name, and I'm gonna change this h2 to a route target heading component.

[00:00:25] I'm gonna pass in a level of two so it'll give me that h2. And a quick note about headings is that we want to start with h1 on a page and go in order. So the h1 on our app is this top level accessibility in JavaScript applications. Sometimes you wanna change the h1 to be the name of the page.

[00:00:48] You can play with the heading levels a little bit. Just, I think the most important thing is that they go in order so that you don't skip levels. So I'm not skipping straight to h2. I already have an h1 also. So I've got that, the other prop I need to pass in is targetID.

[00:01:05] I'm just gonna say navigation. And if we go, I think I need the back here in my site chrome directory, I have a navigation snippet. So what's nice about working with react components is you can break up different parts of your site chrome into different components. They're reusable, but also you can just focus on that one part of your site or that one part of your application.

[00:01:30] And this is where my navigation lives. And there is an ID of navigation here. I've also got a visually hidden heading here in the nav section. So in that left sidebar, there is a heading here that says navigation. But the part that I really want to focus on are these demos.

[00:01:49] Like if I am coming from the drop down link here in the left and I wanna send focus into it's matching content, and then I wanna skip back, I think the most appropriate place is to focus on these links where I came from. So that's why am putting the id right here.

[00:02:05] So navigation, that will match, this use case. So I'm actually gonna copy this, because we need this on all of our pages. I've just used h2's here. I'm gonna go change these real quick. So that when I'm clicking around, they match. And it won't matter what page I'm on.

[00:02:25] So I'm gonna change all these. And hopefully we can just automate this stuff so it's easier and you don't really have to think about it. But for now, this'll work. I mean, this is how frameworks get made. We prototype it, we see if it works. We get more user testing, which is something I'm doing.

[00:02:40] And then we see, you know, how can we make that easier for everyone? So route target heading, and you can honestly call this whatever you want. Naming things is one of the hardest things in computer science. So maybe the name will change. Maybe it makes sense to me and no one else.

[00:02:57] I think I've got two more here. I kept the imports in there, so it should be fine. The semantics pages an example for you all to use later. Rep target heading is not fine. Okay, so I do need to import that somewhere. Let's see which one was complaining?

[00:03:17] The Index page.
>> Marcy Sutton: So I'm just going to paste this import, so it knows where to find that component. So now if I hover here, I've got this little anchor thing that shows up. It looks kind of funky because there's a caret and an underline. So I'm actually gonna go turn off the underline.

[00:03:40]
>> Marcy Sutton: For this case, it's an interactive thing I really recommend keeping underlines on for regular text links. This is sort of a special case so I'm going to say text decoration, none. For this one little interactive thing. And probably I would use it like a more graceful arrow, but that's what I had off the top of my head.

[00:04:03] Okay, so I think the other part that I need to hook up is back in Gatsby browser. So I guess let's go. What I'm gonna do here, so. At this level, this API method doesn't really, I don't really have insight into what's inside my application. And frankly, I don't really wanna know.

[00:04:23] I just want to go look on the page and see, is there a skip link kind of like the one I'm looking for? I'm just going to write it like that. Let's go see. I'm going to do, set a variable and call it skip link. And I'm just going to go look for it query, document.queryselector.

[00:04:42] And it was called route skip link was the CSS class that I added in here. Route, skip link. So if there's a skip link on the page, I don't want to error out if there isn't one. And if there isn't one, it'll fall back to reach router or doing some routing focus handling for us.

[00:05:01] But if there is a skip link, I'm gonna say skiplink.focus. And so this will go look for that component. In the event that there is a previous location because we've navigated, that'll be no on the first load of a page because you you're just getting there you know, there isn't a previous location and hopefully that works.

[00:05:25] Go look. So now If I use, let's go see, I have an error. And by the way, if you see this unchecked runtime last error message in the dev tools, I see that all over the web, it might be from a browser extension or something. It doesn't actually have anything to do with this application.

[00:05:43] So don't worry about that. So, I don't think I got my conditional right here. So I'm actually gonna do a little bit of logging and say, console.log(location, prevlocation). And we'll just go make sure that this method is working. So yeah, we've got a location and null here for when there is a different one.

[00:06:10] I was on the drop down page already, I think maybe some styling to indicate to me that that's the page I'm on would have helped. So it's actually working because this Is showing our little route skip link. So I'm going to do that with the keyboard, I'm gonna close the dev tools.

[00:06:26] And that was our focus outline on the navigation. So it's actually working. So I can go back and forth. It's working better than kicking me all the way back to the top of the application. So I'm pretty happy with that. I can go on to one of these links with the keyboard, hit the enter key, it sends my focus to a skip link but it doesn't take up much space on the screen.

[00:06:52] I could opt to style that however I want. I can make it look like an icon button and give it an accessible name. I could make it look like an actual skip link and say skip to navigation. So there's some subjectivity involved with the design. But it functionally serves purposes.

[00:07:11] We're not just sending focus to this wrapper element and then being like, all right, you're on your own. Go tab around and figure out where you are. This link is actually useful. It serves a purpose and so through research I found that, that just made a lot more sense.

[00:07:28] That's for where we skip back to, we could play that a little bit. I'm sending focus back to the wrapper element of the nav. Maybe I should send it back to the link I came from. That's an improvement that we can make potentially. But that's how I would build this component.

[00:07:45] I guess one more thing we should look at is the accessible name of this just to make sure that we've got that working. So I'm gonna, I'm focused on this in the dev tools. I'm going to go over the accessibility inspector and it says skip to navigation. So the aria label is stomping over the contents of that pseudo element.

[00:08:05] Because aria label on the parent will take preference over whatever's inside of it. So something good to know about that and I can see in this accessibility inspector how the accessible name calculation is like what's winning, if I have multiple things, trying to like give it a name.

[00:08:23] I love this tool because it will show me which one wins. That can get a little tricky sometimes. And so I love that it shows what's crossed out and what's actually going to be exposed to assistive technology. All right, so that's some routing. I'm now going to have you work on that.

[00:08:43] And you can choose how you want to work on this. So you can play around with that on route update method in Gatsby and play with it and react. I think success would just look like handling focus somehow, I think you can play. It's up for exploration and playing around.

[00:09:00] I also have a vanilla JS version here. That because the routing in Gatsby is kind of like hidden away from you, I think it can conceptually be a little bit harder to follow what's happening. So I added this little sandbox that I'm using to debug Gatsby itself, actually.

[00:09:21] This little routing prototype you just can switch between these two routes. It's pretty rudimentary. But it gives you all of the scripts over here for actually rendering the page. So this is like what a JavaScript framework is doing under the hood. Is replacing what's on the screen. And so this gives us a little more handles to go in and play with focus handling, so I've added a marker where you can go and play with focus.

[00:09:50] So let's experiment with, as you're changing routes where focus goes. And make sure that you test it with not just the mouse but play with the keyboard and see where your focus is. So yeah, and I guess the the one last thing I will mention that's different between the two versions is that in this prototype, it's just got the browser default focus.

[00:10:12] In the Gatsby version, I'm using focus visible, which I'm going to actually show you where that is hooked up. So in, there's a layout CSS file in that site chrome directory. Just if you're curious. That's where I'm handling like to just specify what the focus should be doing.

[00:10:34] So this is doing this for keyboard users. And I believe that in the layout JS file, which is also in this directory, that's just where I'm importing this. I didn't really cover that earlier, so just in case you're curious. So yeah, let's break for 10 minutes or so.

[00:10:52] And we'll play with routing.
>> Speaker 2: Is that JS focus visible class for the polyfill?
>> Marcy Sutton: Yeah, so that's for a polyfill eventually you wouldn't need that. Hopefully see how long that takes. So yeah, this import is purely just for the polyfill purpose. And then if I go to the layout CSS, there is some polyfill like remnants here of it.

[00:11:17] It adds a JS focus visible class to the body. And that's how I can safely use this. What I wanna I avoid is if the polyfill isn't there and it's not supported. I don't want to turn focus off for everyone. Like that's what I want to avoid. And that's why the polyfills important.

[00:11:35] So yeah, those are the differences between the code pen and the Gatsby version. So let's go forth.