When Is a Skip Link Needed?

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 compliance and why it’s considered best practice for creating a user-friendly experience.

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 (skip navigation link, headings, landmarks), 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 (such as <main> or clear headings) to structure content 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 a role="main" ARIA landmark that wraps the main content of the page, or a semantic heading at the top of the main content area, it will minimally meet the requirements of this Success Criterion, even if a skip link is not present. The landmarks and headings provide structure, and screen readers can navigate these regions directly, allowing users to bypass repetitive content as needed. Therefore, the use of headings and landmarks would pass SC 2.4.1 for bypassing blocks of content.

However, while using landmarks and headings alone is technically conformant, it may not provide the best experience for all users, particularly keyboard-only users who do not use screen readers for navigation.

Best Practices: Enhancing Usability with Skip Links

Even though a page with landmarks and headings may pass SC 2.4.1, adding a skip to main content link is widely regarded as a best practice. 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 usability, 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.

Skip Navigation Link

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 navigating.

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 internal 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.

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.

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 recommended enhancement that can significantly improve accessibility and user experience for many visitors.

So while WCAG conformance may be technically achieved without a skip link, a truly inclusive experience considers the additional needs of all users. Skip links offer a simple yet effective way to create a smoother, more efficient navigation experience for everyone.

Resources

• Success Criterion 2.4.1 Bypass Blocks
• Understanding SC 2.4.1: Bypass Blocks (Level A)
• Landmarks extension
• The anatomy of visually-hidden (TPGi)
• How To Avoid Breaking Web Pages For Keyboard Users (TPGi)
• Skip Navigation Links (WebAIM)

Image credit: Kid Circus.