When Is a Skip Link Needed?

December 5, 2024Technical, User Experience (UX)

When it comes to implementing Success Criterion 2.4.1 Bypass Blocks (Level A), many developers might wonder if they need to add a “skip to main content” link on every page or if using headings, landmarks, and semantic HTML is enough to meet the accessibility requirements. The answer is often a bit more nuanced. In this post, we’ll clarify when a skip link is required for conformance, and why it’s essential for creating a user-friendly experience.

Update — March 2025: TPGi have recently reviewed our procedures for testing skip links, to emphasize how important they are in meeting the intent of SC 2.4.1. This article has been updated to stress that importance, and to describe various situations where improperly implemented skip links are ineffective.

Why Bypass Blocks Matters

The goal of SC 2.4.1 is to provide users with a way to bypass repeated blocks of content, like navigation links, headers, or sidebars, that appear across multiple pages. Without a bypass mechanism, screen reader users and keyboard-only users have to navigate through these repeated elements on every page, which can be time-consuming and frustrating. For example, a mouse user can visually ignore repetitive content and scroll directly to the main content, but someone relying on keyboard navigation has to tab through every element in sequence.

Screen reader users, keyboard-only users, and those with motor disabilities benefit greatly from the ability to skip over repeated content. For these users, a bypass mechanism like a skip link or landmarks reduces the number of keystrokes or screen reader commands required to access the primary content.

Do Landmarks and Headings Satisfy 2.4.1?

The confusion often arises when pages use landmarks and headings to structure content, but without providing an explicit skip navigation link that can be accessed via keyboard. Some developers might wonder if this setup is sufficient to meet the minimum standard for 2.4.1 compliance or if it is a failure to omit a keyboard-accessible skip link.

To clarify, SC 2.4.1 does not strictly require a skip navigation link in all cases. If a page includes a <main> sectioning element (or ARIA role="main" landmark) that wraps the main content, or a semantic heading at the top of the main content area, it will technically meet the requirements of this Success Criterion, even if a skip link is not present.

However, it does not fully satisfy the SC’s intent. The landmarks and headings provide structure, and screen readers can navigate these regions directly, allowing users to bypass repetitive content as needed. Keyboard users, on the other hand, must still tab through multiple elements to bypass repetitive content. Therefore, while landmarks and headings may meet the normative wording, a skip navigation link is essential to fully satisfy the intent of SC 2.4.1, by providing an efficient way for all keyboard users to bypass repeated blocks.

Even though a page with landmarks and headings may minimally pass SC 2.4.1, adding a skip to main content link is widely regarded as the best user experience. This link, typically placed at the top of the page, is especially helpful for keyboard-only users, screen magnification users and some screen reader users. Here’s why:

  • Direct Access for Keyboard Users: While screen reader users can navigate using landmarks, keyboard-only users may not have the same level of control (because landmarks are not keyboard-navigable, unless you add an extension that provides this capability). A skip link provides them with a straightforward way to bypass repetitive content with minimal keystrokes.
  • Reduction in Physical Strain: For users with motor disabilities who rely on the keyboard, having to tab through multiple links can be physically taxing. A skip link makes it easier for them to reach the main content quickly.
  • Enhanced Cognitive Support: For users with a cognitive disability who use assistive technology, a skip link reduces the cognitive load by allowing them to focus on the main content without distraction from repetitive sections.

To enhance the user experience, consider these techniques:

  1. Provide a Skip Navigation Link: A skip link placed at the top of the page is one of the most effective methods for improving accessibility. This technique is recommended because it’s straightforward and aids both screen reader and keyboard users.
  2. Use HTML Sectioning Elements: Placing main content in a <main> element helps define the primary section, which most screen readers can navigate to directly.
  3. Employ Good Heading Structure: Using a clear heading structure, with an <h1> for the main content, can help screen reader users locate the main content quickly.

A Skip Navigation link is an essential feature for web accessibility, enabling users to bypass repetitive navigation and directly reach the main content. However, to serve its purpose effectively, it must be implemented thoughtfully. Here are some key considerations for creating an accessible and functional skip navigation link.

Position the Link as the First Focusable Element

The Skip Navigation link should be the very first focusable element on the page. This ensures that users relying on keyboard navigation encounter the link immediately when they start navigating.

The link should target an ID located at or just before the main content of the page, such as the <h1> or a <main> containing the main content. Placing the skip link further down in the document defeats its purpose, as users would still need to navigate through repetitive content to reach it.

Ensure Keyboard Functionality

The skip link must be fully functional for keyboard users, allowing them to quickly navigate past repetitive content present in the header or navigation.

The target of the skip link needs to be either natively focusable (e.g., links, buttons) or assigned a tabindex attribute. Without this, following the skip link will not move focus until the user presses TAB again. Since that tab press goes to the next logical element, it appears that the skip link has moved focus, but this is just browser heuristics, the focus hasn’t actually moved yet. The difference is not noticeable for most users, but is significant for screen magnification users, because the software uses focus position to determine where the viewport should be centered, and will not automatically re-center the viewport until the focus actually changes.

To fix this, assign tabindex="-1" to the target element. This makes the element focusable when activating the skip link but without disrupting the natural tab order of the page. (Note that the target element itself does not need to show visible focus.)

Example:

<a href="#main-content">Skip to Main Content</a>
<!-- Banner and navigation links are present here -->

<main id="main-content" tabindex="-1">
    <!-- Main content -->
</main>

Or:

<a href="#first-heading">Skip to Main Content</a>
<!-- Banner and navigation links are present here -->

<h1 id="first-heading" tabindex="-1">[Heading text]</h1>
<!-- Main content -->

Make the Link Visible on Focus

The skip link should be visually obvious when it gains focus. While it is common practice to visually hide the link by default to maintain a clean design, ensure that it becomes visible when focused by a keyboard user.

Alternatively, if your design allows, consider keeping the skip link visible at all times for easier discovery and usability.

The skip navigation link is a crucial accessibility feature. However, simply adding a skip link is not enough — it must function correctly to meet Success Criterion 2.4.1. Below are common failures that impact the usability and accessibility of skip links.

When a Skip Link Is Not Provided

One of the most fundamental failures is the complete absence of a skip link. Without it, users navigating via keyboard must tab through all the page elements before reaching the main content.

When a Skip Link Is Not Keyboard-Operable

Even when a skip link is present, it must be fully operable using the keyboard. A failure occurs when the skip link can receive focus but does not activate when the user presses Enter. This makes the link ineffective for users relying solely on keyboard navigation.

When a Skip Link Does Not Redirect to the Main Section

Another failure occurs when following the skip link does not actually move focus to the main content. This could be due to:

  • The target not being programmatically focusable.
  • A missing or incorrect #id reference in the link href.
  • JavaScript issues preventing the focus shift.
  • A hidden or dynamically loaded content section that doesn’t properly receive focus.

When the skip link fails to function as expected, users are left tabbing through the entire navigation again, defeating the purpose of the feature.

When the Skip Link Does Not Become Visible on Focus

A skip link that is visually hidden by default but does not become visible when focused is another critical failure. Sighted keyboard users should be able to see the link when they navigate to it. If the link remains hidden, users may not even realize it exists or that they have focused on it.

Conclusion: Prioritizing User Experience

In short, if a page includes appropriate landmarks or headings, it technically meets the minimum WCAG requirement for bypassing repeated content blocks, even if a skip navigation link is absent. However, adding a keyboard-accessible skip link is a necessary enhancement that can significantly improve accessibility and user experience for many visitors.

Skip links offer a simple yet effective way to create a smoother, more efficient navigation experience. Although WCAG conformance may be technically achieved without a skip link, a truly inclusive experience considers the needs of all keyboard users, and can therefore be considered essential to meet the intent of Success Criterion 2.4.1.

Resources

Image credit: Kid Circus.

Like to be notified about more articles like this? Subscribe to the Knowledge Center Newsletter. It not only gives you summaries and links to our technical blog posts but also TPGi webinars, podcasts, and business blog posts – as well as accessibility and web tech conferences and other events, and a reading list of other relevant articles. You get one email a month, it’s free, requires just your email address, and we promise we won’t share that with anyone. Check the archive.
Categories: Technical, User Experience (UX)

About Akash Shukla

Akash is an Accessibility Engineer at TPGi with over six years of experience in making digital content accessible to everyone. He is a Certified Professional in Web Accessibility (CPWA) and has expertise in WCAG conformance, assistive technologies, and creating accessible websites. Before joining TPGI, he worked as an Accessibility Consultant at Deque Systems. He is passionate about building inclusive digital experiences and promoting accessibility best practices.