2.4.1 Bypass Blocks

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

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