Making Your HubSpot Website WCAG 2.1 Compliant

2.4.1 Bypass Blocks

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

Success Criteria

2.4.1 Bypass Blocks

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Operable
User interface components and navigation must be operable.
Guideline: Navigable
Provide ways to help users navigate, find content, and determine where they are.

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is consistently resolved with AudioEye Managed.

Understanding 2.4.1 Bypass Blocks

Websites typically feature repeated content regardless of the purpose of the page. This includes navigational items, certain side bars, and advertisement blocks, among others. While users with healthy eyesight and those navigating via mouse  a page can bypass these sections with ease to utilize the page's main components, visually disabled users and those relying on keyboards must painstakingly sift through each to reach their desired sections. 

If a website has multiple items in the navigation without mechanisms to skip past the navigation and other elements in the header, keyboard users would have to tab through every link before getting to the content. This can be a poor experience, especially if they are visiting multiple pages and need to repeatedly pass through the navigation over and over. 

This Success Criteria recommends websites have a quick and easy way to bypass these blocks and reach intended content.

How AudioEye Helps

Screenshot of AudioEye Page Elements MenuAudioEye deploys Skip to Main Content bypass blocks. 

In addition, if landmarks are not present, AudioEye will dynamically apply them. As an additional utility supplied from the AudioEye Accessibility Toolbar, AudioEye also makes available a Page Elements Menu, which provides a keyboard-friendly menu enabling efficient access to quickly jump from one page element to the next. This menu includes options for headings, links, landmarks, and images.

Recommended Solutions

To manually help users bypass repeated blocks without the aid of AudioEye, you can include "skip to" links at the beginning of a HubSpot website and anchor IDs at the beginning of select sections. This can be added so it is not visible until activated by a screenreader or by tabbing through a website. 

  • Add an HTML module to your header as the first element in the group. Give that module a CSS class of "skipto."

Screnshot of HubSpot's Design Manager HTML Code Block

  • In the HTML module, add the following links. These create shortcuts to the main content of the page and footer. 
  • Add the following CSS styling to an <!--- Accessibility ---> section of your CSS file.
  • Add the "main" and "footer" IDs to your module groups. Also include an ARIA Role identifying the main landmark of the page and tabindex. Using a tabindex of -1 ensures the user can now access the new section and tab doesn't just continue to move through the previous header items. This code can all be added by using the Wrapping HTML feature in the design manager, wrapping the entire module group.
Screenshot of HubSpot HTML Block
  • Easily add "skip to" links with the Skip To Links for Accessibility Module found in the HubSpot Asset Marketplace.

For more information, please visit the official W3C article: Understanding 2.4.1 Bypass Blocks

Download the WCAG 2.1 Compliance Checklist

Checklist Download


Let us know if we can help you address this specific WCAG Recommendation.

Recent Morey Creative Studios Blog Articles