Routing & Skip Links

[00:00:00]
>> Marcy Sutton: So client side routing. This is the next major topic that we're going to cover. I have a GIF of grommets shuffling through letters. Because I think of client side routing as kind of a mail room where letters are coming in and they're being delivered to their various recipients.

[00:00:17]
Client side routing is JavaScript taking control of the browser's history and matching URLs and URL fragments with particular views in JavaScript. So doing that work that the browser normally does for better or worse. And so it's doing that dynamic mapping. And I recently did some user testing on accessible client-side routing.

[00:00:39]
It's on the Gatsby blog. You can read all about the user testing process, and what I uncovered. And that research I have baked into these examples. So the approach that came out of that, so with client side routing, focus management is often recommended, as the way to guide the user through the application.

[00:01:00]
So the page isn't refreshing, so then we're not kicking the user's focus all the way back up to the top. Instead, we want to guide them through the application. So if I click a link in the side bar, like I've got a little nav diagram here. If I tabbed onto a list or a link in that list and I hit the Enter key, the graceful way to handle this in a web application would be to send their focus to the new content.

[00:01:30]
And that's been recommended by a lot of people. What hasn't really been explored is the user testing around that like the specific variations because there are a number of them. So the recommendation that I'm making is to add a skip link in the content area. So, you click on a link.

[00:01:48]
There's another like skip link something that's focusable. It's not super big like, it's not a rapper element taking up the whole screen. It's a small item. As a skip link, it could send me right back to the navigation so it's it serves a purpose. It works around a number of assistive technology bugs that I found were rapper elements and react applications, for whatever reason, just won't take focus and won't announce.

[00:02:15]
Or they'll focus but they won't announce the content. So this solution works around a number of those problems. And for users of screen magnification, when you're zoomed away in, that skip link is small enough that you can see what you're focused on. So this is a boiling down this approach of multiple disability viewpoints and different ways of navigating.

[00:02:35]
Hopefully, into one component that eventually, we might be able to bake this in at the framework level. Or even web standards would be cool, but this is pretty new research. So to walk through these steps, it's a small UI control in each view target. I'm gonna label it with what it does.

[00:02:52]
So in this case, a skip to navigation. We could also label it with whatever content it's around. So maybe it's a portfolio page, and I could say, portfolio, skip to navigation. What you display, I can play with a little bit. That's where I'm gonna do some more user research in the future.

[00:03:09]
But for the mechanics, when the user clicks the link, we're gonna move focus to that control. And for frameworks in JavaScript, some of the underlying technology that we can use to handle these focus patterns. In React, we already saw refs, so that's a really great API for handling that.

[00:03:28]
There's a new some new directions in React coming, things called focus scopes. I think that actually would have been useful for our drop downs earlier. But we kept things a bit simpler. In view, there's a concept called refs. It's really similar to React ref. So you might use that for panning focus around.

[00:03:47]
In Ember, I asked on Twitter and in the slides, I have a link to what people recommended for how they're managing focus in Ember. Potentially, other framework APIs like an Angular. And if you're writing a big web application, this custom routing and handling focus, you might end up wanting to write a like higher level focus manager.

[00:04:11]
It's interesting approaches sort of like custom for every application or every website. Just know that like you could abstract some of these patterns into an API. If you have a long living web application, that would be something that would be more robust and you could write automated tests for it and all kinds of stuff like that.

[00:04:30]
So I'm going to go implement this routing approach that I've uncovered through research and you'll be the first people to see this in action. And the long term goal is to try and automate this for people. So like, if a framework can make it really easy for us as developers to opt into these patterns.

[00:04:50]
That's what I'd like to get to. But that hasn't been invented yet. So we're gonna invent it right now. So I'm gonna go back over to my application, to close out of this drop down stuff. So this is something that I'm actually gonna pull up the app again.

[00:05:06]
This is something that will apply to this whole application, this whole Gatsby site that I've made. So right now I've got a skip link, and it skips me into the main content. So it gets me over to this main region. If I use these links right now, let's go back here.

[00:05:26]
If I go to like the announcer demo page, or, and you can see my, when I use a link in this demos list in the sidebar. It's mimicking a traditional browser refresh, and kicking my focus all the way back up to the top. It's debatable, whether you want to do that.

[00:05:41]
I think for a simple site, it's not a huge deal. If you're Gmail or Google Maps and you get kick back to the top of the webpage every time you click a link, it could be pretty irritating. So it would be better to handle focus by sending it into the new content.

[00:05:57]
So that's what I'm gonna do. I'm gonna write a component that each one of the these headings is going to get a skip link like in the diagram. I'm just gonna hard code it for now. I will make a reusable component but potentially this could be abstracted further in the future.

[00:06:12]
And then when I click these links, I'm going to leverage Gatsby's client side routing, and send focus that way.