Skip links make websites easier for people who use screen readers and/or keyboard navigation. They’re shortcuts on a webpage that help people get around faster. But, on many websites, these links are missing or not properly constructed. In this tutorial, I’ll cover how to check for usable skip links.
- Keyboard navigation should be enabled in your browser to check a web page for accessibility.
- Look for a “skip to content” link with clear visibility and sufficient contrast (4.5:1 for AA, 7:1 for AAA) in the upper left-hand corner.
- Ensure the skip link works by pressing the return key, which should jump to the content and bypass the header section.
- Verify that the focus moves to the content section after jumping, using the tab key to highlight the first link.
- Test all template types within your website, including interior pages, as they may not use the same template as the homepage.
- The tester should have good vision or corrected vision, and be able to clearly see the website and check for color contrast issues.
Transcript
Welcome back to the Accessibility Quick Audit Series. I’m Gen Herres from the Easy A11y Guide. And in this video, I’ll be showing you how to check a web page for a skip link.
Make sure your browser is set up for keyboard navigation
Before we get into that, you’ll need to make sure that your browser is set up for keyboard navigation. Some browsers may already have this turned on, but if they don’t, you’ll need to do a quick web search and check for how to turn it on in your specific browser and version as it does vary.
Check for a skip link
Now we’re going to go ahead and hop over to W3.org. This is the W3C, which sets all of the web standards, including the WCAG guidelines or websites.
You’re going to put your cursor into the URL bar. After you’ve done that, on your keyboard, you’re going to hit the tab key. The very first thing that should happen is you should see a link in the upper left-hand corner that says skip to content.
This link needs to have clear visibility, which means it needs to pass the 4.5 to 1 color contrast ratio for WCAG level AA. Ideally, it also passes the AAA, which is a seven-contrast ratio. Make sure that there is sufficient contrast on this link.
Make sure the skip link works
The next thing we need to do is we need to make sure it actually works. To do that, I’m going to press the return key on my keyboard. What it should happen is you’ll jump to the content. This bypasses the header section of the website that has the navigation bar and all of those links so that people can get straight to your content.
Check for keyboard focus
The next thing we need to check, and also the last thing we need to check, is that once we have jumped, we also are now focused in this section. You should be, but not all websites work as they should. All I’ve done is hit the tab key on the keyboard, and I see that the very first link in this section is now highlighted. Great. It was a successful keyboard test.
If it did not jump, that would be a failure. If the context did not move, that would be a failure. And if there was no skip link at all, that would also be a failure. It’s important to not only test your homepage, but also interior pages, as many interior pages within a website don’t use the same template as the homepage.
So, it’s very important to test all of the different template types within your specific website. This testing can be done by someone with limited training and experience, but they do need to be able to clearly see the website and clearly see color contrast and check for color contrast issues. So they definitely need to be a sighted person who has good vision once their vision has been corrected if they need correction.
Thanks for watching. I’m Gen Herres from the Easy A11y Guide, where we try to make accessibility easier to implement through done-for-you services, tools, and processes. If you enjoyed this video, please give it a thumbs up. It really helps our channel.
You can subscribe to our channel for more accessibility tips and to be notified when new videos are released. For more information on web accessibility, including services, tutorials, and more, please visit easya11yguide.com. Thank you so much again for watching, and I look forward to seeing you in the next video.