How to build a skip link you can be proud of
Why are skip links important?
To understand the importance of a skip link, you need to think about those who rely on them.
Most websites have a menu at the top that includes a company logo and some menu items before getting to the main purpose of the page. Menus are great for helping visitors find what they need quickly. However, visitors who are blind or use a keyboard have to go through each menu link using the TAB key before finally getting to the section they need. This can be very time-consuming and frustrating.
It’s enough to pull your hair out!
The below video shows Marge Simpson pulling on her hair in frustration. The same feeling your customers will have when there isn’t a skip link.
Skip links for the win
In a previous post, Create a kickass page structure, we learned about the basic structure of a website and how to mark the main section of pages using <main>. The goal is to help visitors bypass the repetitive main menu and go straight to the main section of the website. To help visitors get there quickly, we create a skip link. Simply put, a skip link is an anchor that helps visitors “skip” past the repetitive information.
Create your own
Let’s create your first skip link!
- Create a space after your
<body>tag. This is because your skip link should be the first focusable element on the page - Create your anchor
<a>{some text}</a>in the space you’ve created - Decide what text will be in your anchor. Here are some suggestions:
- Skip link
- Skip main navigation
- Skip navigation links
- Skip menu links
- Skip to main content
- Skip to content
- Give your anchor a destination. For example,
<a href=”#main”>Skip to content</a>sends your visitor to the container with an ID of “main” - Add an ID to your
<main>tag. It should be the same name you used on your anchor (e.g.,<main id=”main”>) - Style the anchor to meet color contrast requirements
REMINDER: If your website supports multiple languages, don't forget to translate the text in your skip link.
Skip links in the wild
Some common styles that many websites use for skip links include:
- Hiding the skip link by default and only showing it when the visitor uses the keyboard to TAB through a page
- Styling the skip link to look like a button or a bar that’s the same width as the page
- Giving the skip link a different look from the links or buttons of the website
- Making the scroll ease to the main section
Should I add multiple skip links?
In most cases, multiple skip links are unnecessary. Remember, the purpose of a skip link is to make things easier for visitors who use the keyboard to navigate through your website. For this reason, most websites have just one.
Conclusion
Skip links are not only necessary to make your website WCAG compliant, but they also offer a great experience for your visitors. It’s like sending them to the front of the line! Now that you’ve learned more about skip links, take a look at how other websites implement them. Visit your favorite website and press TAB on your keyboard.
