Making Your HubSpot Website WCAG 2.1 Compliant

2.4.1 Bypass Blocks

MCS Accessibility Team

MCS Accessibility Team
Last Updated April 22, 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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELA
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 completely resolved with accessiBe or HubSpot.

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 accessiBe Helps

accessiBe-Quick-NavigationWhen navigating a website using a keyboard, accessiBe immediately displays the option to turn on Screen-Reader Mode and display Quick Navigation. This menu offers a simple way to jump to various portions of the site, including the Main Content, Page Header, Middle, and Footer, along with links to other popular site pages. 

Quick Navigation can be accessed by users at any time while exploring a site by selecting Alt+1.

In addition to Quick Nav, the main accessiBe control panel has a Quick Links section. This dropdown also enables users to jump to various sections of a page, and other pages.

 

Manually Addressing 2.4.1

To manually help users bypass repeated blocks without the aid of accessiBe, 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. 

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

HTML-Module-SkipTo

 

2. In the HTML module, add the following links. These create shortcuts to the main content of the page and footer.

 

 

3. Add the following CSS styling to an <!--- Accessibility ---> section of your CSS file.

 
Wrap-Module-with-ID-info

 

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

 

 

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

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles