This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Skip Links" Lesson
[00:00:00]
>> Jon Kuperman: Cool. Another really, really great concept is this idea of Skip Links. For those that don't use keyboard navigation, this will probably start surprising you as you start using it. But if you go to The New York Times website, you will see only two link at the top, sections and search.
[00:00:14] But if you start tabbing through, once you get past search, this thing will appear and it says skip to navigation. And so you'll often see these on websites where basically what's going on is they're trying to help out and say, you're starting to tab through our site, but we have a lot of stuff before the meat of the website.
[00:00:32] Do you wanna just skip? And sometimes it's skip to navigation, sometimes it's skip to main content, things like that, sometimes you'll see a skip to comments. And so these are called Skip Links and, yeah, the basic idea is again, recognizing a keyboard only user and trying to help them out a little bit by allowing them to just move past.
[00:00:50] Cuz otherwise, if you tabbed through you'd be on US International, the different languages, the date, you're tabbing through all those things, so it's giving you an offer here of, do you just wanna skip down to the main navigation? And so, these can be achieved really simply. So the basic idea, is that you have, let's say, three different sections to your web site.
[00:01:09] You have your navigation, you have your main content. And then up at the very top, let's say you put this link, and you give it a class of skip-link, and you give it its reference. It points to the main content, let's say. So you have, it's just an anchor, so skip to main content.
[00:01:23] And it will move you down to that main content div. And so then all you do is you take it, and you position absolute it, and you push it up off the screen, like up to the top you see top negative 40. I gave it red and white so it could be really starkly visible.
[00:01:38] But you could give it whatever colors you want. And then on its focus state, and here were kinda getting into these focus ball elements, you set the top back down to zero. So just basically you take this link, let's say it's the very first thing in your website.
[00:01:53] And it's an anchor, so it'll be tabbable by default. So this will be the first thing you tab. You use CSS to hide it by default in any number of ways. And then on its focus state, you on high def, that's simply how you do it, there's no JavaScript necessary nothing like that.
[00:02:07] And so this will be ignored by users that are using a mouse, they'll never be able to cover on anything like that, but the second somebody hits tab in the keyboard, this thing will pop up and like, hey, do you wanna just skip to my main content? And so there's a whole Webaim article on skip links webaim.org/techniques/skipnav.
[00:02:29] Cool. So we're hitting more of these checklist items now. So this is a recommendation and the success criteria is that a link should be provided to skip navigation and other page elements that are repeated across web pages. So again if you have your header.php, your whatever it is, the whole template with your nav and all that stuff.
[00:02:47] You don't want users to have to tab through it every single page they're on. So give them some way out, some way where they can tab through. And then yeah, there's some specific ones on like, if I page is proper heading, it may be considered as sufficient to just skip to main content.
[00:03:04] Sometimes navigations what you want to skip to. Again, think about the use case and what would make more sense for your site. Cool. We also got another one which is another thing we can check off and on, which is when a web element or a page element receives focus, it doesn't have a substantial change to the page.
[00:03:25] Again, so the two things that need to happen on focus are some kind of visual indicator, right? And then also, and this is an anti pattern to avoid here, is you don't wanna listen for On Focus events and do a bunch of wild JavaScript and things like that.
[00:03:38] That's not cool. Because you might think Focus only happens when they kinda click on the thing, but Focus really happens for people that are just trying to tab through your site as well. So if you have like a modal that needs to appear, do an onclick or onkeyup or something like that.
[00:03:53] Don't do it onfocus. And with those, we can take two check marks off the WebAIM recommendation. Does that one make sense, the focus concept? Okay, cool. Yeah, feel free to stop me if something is not clear.