3

Should skip navigation links anchor beyond breadcrumbs or not?

<a href="#main" role="link" aria-label="Skip Navigation">Skip Navigation</a>
<div id="menu-container">Menu code goes here</div>
<div id="breadcrumb">Breadcrumb code goes here</div>
<div id="main">Main content goes here</div>

or to put question in different words, is breadcrumb part of navigation?

TylerH
  • 20,799
  • 66
  • 75
  • 101
rajakvk
  • 9,775
  • 17
  • 46
  • 49

1 Answers1

4

The main purpose of skip links is to skip blocks of content, e.g. navigation, that is repeated at the top (or the start of the tabbing order) on multiple web pages. See Success Criterion 2.4.1: Bypass Blocks, in WCAG 2.1:

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

The breadcrumb trail is an example of a type of content that would be repeated on multiple web pages. For this reason, I would recommend that skip links for the main content also skip past the breadcrumb trail.

By the way, you don't need role="link" on a normal link (<a href="..." >), since that role is already implicit for that element.

Tsundoku
  • 2,455
  • 1
  • 19
  • 31
  • Agreed, but don't worry too much if your skip link goes to the breadcrumb instead of the main content. Ideally, it would skip the breadcrumb, but 2.4.1 can be a bit subjective. If you have some pages that don't have breadcrumbs, then the breadcrumb itself might not be considered "content that is repeated on multiple pages". As long as you have a skip link that tries to do the right thing, if it's not perfect, you'd still be in compliance with 2.4.1. But as @christophe-strobbe said, try to skip the breadcrumb if possible. – slugolicious Feb 26 '19 at 17:37