breadcrumb-landmark

Description

You need to ensure that breadcrumb navigation is contained within a navigational landmark. A navigational landmark is a mechanism that allows users, especially those relying on assistive technologies like screen readers, to quickly locate, navigate to, or skip over the breadcrumb trail.

Wrapping the breadcrumbs in a landmark improves accessibility and navigation efficiency for users.

The breadcrumb-landmark rule aligns with the following WCAG Success Criteria:

• WCAG Success Criterion 1.3.1 (Info and Relationships): Ensures that the structure and relationships of the breadcrumb component are programmatically determinable.
• WCAG Success Criterion 2.4.1 (Bypass Blocks): Requires a mechanism to bypass blocks of content repeated on multiple pages, which navigational blocks like breadcrumbs are.

Examples

In the following example, the breadcrumb list is incorrectly implemented. It is a standalone list without a surrounding navigational landmark.

In the following corrected example, the breadcrumb list is correctly wrapped in a <nav> element. The <nav> element defines a navigation landmark. The aria-label attribute provides a unique, descriptive name for the landmark, which is necessary when you use multiple <nav> elements on a single page.

How to fix?

To fix violations of the breadcrumb-landmark rule, follow these steps:

• Wrap your breadcrumb component using the semantic HTML element <nav>. The <nav> element automatically creates a navigation landmark.

• If you cannot use the <nav> element, apply the ARIA role role="navigation" to the container element that holds your breadcrumb structure.

• If your page contains multiple navigation landmarks (e.g., a primary menu, a local menu, and breadcrumbs), add a unique aria-label to each <nav> element. For breadcrumbs, use a descriptive label such as aria-label="Breadcrumb".

• If the final breadcrumb item is a link to the current page, add aria-current="page" to that link so assistive technologies announce it as the current location.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 2.4.1: Bypass Blocks