Skip Links

[00:00:00]
>> Next thing that we can do, it's a kind of an advanced technique that can really help people, are called skip links. And so the idea here being that if you think about most sites, the way they're structured, there's a really large navigation that remains ultimately the same on every single page, right?

[00:00:17]
Home, About, this, that, the other thing, and then you have your actual content under it. And so, when we're thinking about keyboard only users, we can start thinking about, that's gonna get a little bit old if, let's say, so you have 20 nav items, like you're a news site.

[00:00:31]
Every single page they hit, they'll have to hit Tab 21 times before there'll be able to get to the real content. And so we do this kind of fun technique called a skip link and I've got a couple of pictures of them. So if you go to github.com and you hit Tab, you'll get this blue button that appears kinda out of nowhere and says skip to content.

[00:00:49]
Similarly, on the newyorktimes.com, if you hit Tab, you'll get this button that appears and says skip to content. And so the basic idea with a skip link is, you make an anchor and you put skip to content or whatever you want in the body of that anchor. You prepend it to the body of your websites, you stick it at the very, very beginning, you can either do that with JavaScript or just put it in the HTML if you have a vanilla HTML website.

[00:01:11]
You make it visually hidden like we did in the second lesson. And then with CSS, you give it a focused state that makes it visually not hidden anymore. And so, since it's an anchor, it's tabbable, sighted users will not see it because it's visually hidden. When you hit Tab, it is at the beginning of your website, so it's the very first thing that gets focused.

[00:01:32]
And then the very last thing is you want the target of that anchor to be the main content. And the way that you do that is you just give the main content an id and then in your anchor you give it a pound and then whatever the id is.

[00:01:46]
This is a common technique used for single-page websites where you wanna be able to scroll to places on the page. So you'd have anchor and it'd be anchor href, it'd be like pound Hello, and then under that you'd have like h1 id Hello, and then the anchor that automatically will link to each other.

[00:02:04]
We'll go through an example of it, but that's the basic idea for a skip link. There's libraries out there that do it, but they're easy to make on your own. And again, the kinda web aim stuff here is that says, to be compliant, you should have a link to skip the navigation and any other page elements that are repeated across all pages, right?

[00:02:23]
So again, it's not every site but most sites have a nav, you should have something at the beginning that lets people skip right through it. There's also some other stuff around here, which is that page titles should be descriptive, and the navigation of links should be logical, but for right now we're just focusing on skip links as a concept.