Numerous websites display abundant content across every page, such as an eCommerce store’s header menu containing links to various product categories. While users with a mouse and keyboard can easily scroll past repetitive content, those relying on a keyboard or keyboard emulator must repeatedly press the Tab key to navigate through each link in the menu.
This becomes particularly frustrating for individuals using screen readers, as they are subjected to hearing the navigation links announced every time a new page loads—unless the website offers a skip option to jump directly to the main content.
Table of Contents
One straightforward approach to incorporate “skip navigation” links is by providing a visible link at the top of each webpage that enables users to bypass repetitive content and go directly to the main content. Importantly, the link should shift the actual focus, not just the visual focus, ensuring users move past the blocks of repeated content.
If aesthetic concerns arise, it is possible to temporarily hide the skip navigation link, which should follow several guidelines:
- Position the link as one of the primary focusable elements during keyboard navigation.
- Ensure the link is highly visible when it gains focus.
- Provide a concise and explicit description for the link, such as “Skip to content” or “Press enter to skip navigation links.”
- Guarantee that the link’s text exhibits suitable color contrast.
- Make the link visually distinctive from other content, allowing sighted keyboard users to easily identify and navigate it.
The Web Content Accessibility Guidelines (WCAG) serve as the recognized standard for digital accessibility. When seeking to enhance the user experience on your website, WCAG proves to be an essential resource.
WCAG Success Criterion (SC) 2.4.1, “Bypass Blocks,” mandates websites to provide a mechanism allowing users to bypass redundant content found on multiple web pages. This criterion falls under Level A guidelines, meaning websites must adhere to it to achieve any level of WCAG compliance.
WCAG necessitates the inclusion of skip navigation links when blocks of the content display significant redundancy. It is important to note that, according to the authors, “small repeated sections such as individual words, phrases, or single links are not considered blocks for the purposes of this provision.”
In any case, it is important to recall that the objective of digital accessibility is to work on the improvement of content for all users. While adhering to WCAG guidelines is crucial, there may also be other ways to improve the user experience on your website.
Consider the following tips:
- In most cases, a single skip navigation link pointing to the main content is sufficient. Including multiple skip navigation links can potentially slow down users, as the purpose is to expedite and ease navigation.
- Evaluate the inclusion of skip links for specific types of non-repetitive content. For instance, if you publish a lengthy blog post with numerous subheadings, a table of contents at the beginning can assist users in finding the desired information.
- Ensure your skip links function predictably. For instance, rather than following the start of the content, “skip to content,” should direct the user’s attention to the beginning of the content.
In addition to making your website more accessible and user-friendly for keyboard users and screen reader users, incorporating skip navigation links into your website can significantly improve the experience for individuals with certain disabilities.At AEL Data, we have a team of specialists who carefully audit each web page to identify issues and remediate them. We also offer post-project transition support plans to ease your team into tackling issues when you go live. Click here to schedule your free call today!
