In this ninth installment of our series on creating an accessible website, we delve into the world of skip links, also known as skip navigation links or skip to main links. Skip links are a vital component of web accessibility, falling under WCAG Success Criterion 2.4.1 Bypass Block (Level A). They play a crucial role in allowing users, especially those who navigate sequentially using tools like screen readers or keyboards, to skip past repetitive content that appears before the main content of a webpage.
What Are Skip Links?
Skip links, often referred to as "skip to main," "skip nav," or similar terms, are essentially HTML anchor tags. These skip link anchor tags create hyperlinks to different sections of a webpage. To see an example of skip links in action, take a look at this very page. Once the page loads, press the Tab key on your keyboard, and you'll encounter three skip links:
- Skip to main navigation
- Skip to main content
- Skip to footer
These skip links are part of our website's layout templates, each serving a unique purpose. Feel free to try them out to understand how they work.
The Importance of Skip Links
Skip links are of utmost importance because most other bypass block mechanisms do not effectively cater to keyboard-only users. While sighted users can easily skip over repeated content, keyboard users must navigate through each link and interactive element before reaching their desired content. Screen reader users, screen magnifier users, and keyboard-only users benefit greatly from skip links.
Visible or Invisible Skip Links?
Designers and developers often focus on screen readers when implementing skip links, but it's essential to consider keyboard-only users too. Many skip links are visually hidden, making them accessible only to screen readers. However, an ideal approach is to make skip links visible when they receive keyboard focus and hide them when the focus moves away. This ensures that both screen reader, screen magnifier, and keyboard-only users can utilize these links effectively.
Testing Skip Links
Testing skip links is a straightforward process and can be included in your keyboard testing routine. By tabbing through a page and following these steps, you can verify the functionality of skip links:
- Ensure the link is visually displayed when it gains keyboard focus.
- Confirm that selecting the link directs the focus to the correct section of the page.
As highlighted in Part 7 of our article series on Keyboard Testing, evaluating keyboard support is a critical step in ensuring your website provides an accessible experience.
While several methods can be employed to bypass blocks of repeated content on a website, skip links, when implemented correctly, offer benefits to a broader range of users beyond just screen reader users. Making your website accessible through skip links is a significant step toward inclusivity and improved user experience.
Bypass blocks and skip links are covered as part of our WebAlign requirements management resource. If you need a structured, comprehensive, and clear resource to help everyone on your web content development team effectively incorporate accessibility into the web development lifecycle, sign up for a subscription to WebAlign today!
Thanks for reading! Until next time, feel free to re-review the entire "First Steps to An Accessible Website" series.
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.