Understanding SC 2.4.1 Bypass Blocks

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

The intent of this success criterion is to provide a skip mechanism that will enable the users skip the repeated content blocks such as navigational menus, advertisements or help the users to jump to a particular location on the web page. The mechanism can comprise of “Skip links”, landmarks and/or headings or a combination of any of these.

While Assistive technologies such as screen readers provide a mechanism to jump according to headings, landmarks, lists & form controls it is always a best practice to provide a skip link at the top of the page & where ever it is appropriate.

Example

Jump to References

Code

<a href=”#jump”>Jump to references</a>
<h2 id=”jump”>references</h2>

Video On How to Provide Skip Links

In the above example we have used id method to create a skip link & this is one of the easy ways to provide skip links. There are more optimized ways of providing skip links! Checkout the scripts provided by PayPal.

Points to Remember

• Provide a skip link on top of the page to skip navigational menus.
• Provide skip links to navigate to content on a large page.
• Make sure that skip link is visible when it receives focus.
• Make sure that purpose of the link is clear, provide skip link text as skip to main content or skip navigation etc.
• When providing ARIA landmarks, ensure multiple landmarks of the same type is not provided.
• If provided, ensure to use aria-label to assign unique names to such landmarks
  “Primary navigation”, “secondary navigation” etc.

references

Understanding Success Criterion 2.4.1