navigationaccessibilitywai-ariabreadcrumbssection508

Skip navigation link... anchor beyond breadcrumb or not


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?


Solution

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