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.

LEVELA
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

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.

Recommended Solutions

To manually help users bypass repeated blocks, 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

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


Questions?

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