Breadcrumb

1<nav aria-label="breadcrumb">
2  <ul>
3        <li>
4            <a href="/WAI/">
5                Home
6            </a>
7        </li>
8        <li>
9            <a href="/WAI/design-develop/">
10                Design & Development
11            </a>
12        </li>
13        <li>
14            <a href="/WAI/tutorials/">
15                Tutorials
16            </a>
17        </li>
18        <li>
19            <a href="/WAI/tutorials/page-structure/" aria-current="page">
20                Page Structure
21            </a>
22        </li>
23    </ul>
24</nav>

1[aria-label="breadcrumb"] {
2    ul {
3        list-style: none;
4        padding: 0;
5    }
6
7    li {
8        display: inline;
9        padding: 0;
10    }
11
12    li + li {
13        margin-left: 0.125em;
14    }
15
16    li + li::before {
17        content: "";
18        display: inline-block;
19        width: 0.5em;
20        height: 0.5em;
21        border-top: 1px solid currentColor;
22        border-right: 1px solid currentColor;
23        transform: rotate(45deg);
24        margin-right: 0.5em;
25    }
26
27    li > a[aria-current] {
28        text-decoration: none;
29        font-weight: bolder;
30    }
31}

A breadcrumb should be contained in an HTML nav element or a generic element with the attribute role="navigation". To avoid potential conflicts, avoid setting role on the nav element, where the navigation role is implied.

To allow screen reader users to navigate easily to the breadcrumb landmark and to avoid confusion, the breadcrumb navigation landmark should not be contained within a parent navigation landmark. Recommended location is before the main landmark.

So that screen reader users can also perceive its purpose and distinguish it from other navigation landmark, the breadcrumb navigation should have an accessibility label provided with either aria-label or aria-labelledby.

Example:

1<div role="navigation" aria-label="Breadcrumb">
2    <!-- breadcrumb trail -->
3</div>

A breadcrumb provides access to the pages on its trail with elements with link role:

• An HTML a element with href attribute has implicit role of link.
• A generic HTML element that explicitly sets role="link" can be used if it also provides all the functionality and accessibility of the a[href] element. Refer to Evinced Knowledge Base — Link for further information.

Each link in the breadcrumb trail should have an accessibility name for the page to which it links. By default, a name is derived from the text content of the link element or, if the content is an image or icon, the element’s accessibility name, which can be provided with an alt attribute. If the derived text is not appropriate, a name can be provided by setting an aria-label attribute on the link element.

Disabling a link in a breadcrumb trail is not consistent with breadcrumb semantics. Further, the ARIA specification advises that, “while aria-disabled and proper scripting can successfully disable an element with role link,” doing so can be problematic and is not advised.

Each breadcrumb list item identifies one and only one page on the breadcrumb trail.

Separators in the visual presentation of a breadcrumb trail are clues to its purpose and structure those who can see them but are a distraction for those who cannot. Screen reader users are informed by the breadcrumb’s ARIA attributes and its list structure.

Some techniques to add separators for visual presentation without exposing them to screen reader users include the following:

• Use CSS to display a separator shape in a pseudo element, such as shown in the CSS example in this article. Until recently, there has not been a means to provide alternative text for a pseudo element, so a suitable shape needed to be constructed by applying CSS properties with an empty content property. Alt text for generated CSS content became available in 2024 and is gaining wide support in modern browsers. Check caniuse.com for current support status. Avoid exposing pseudo element separators to screen reader users by providing an empty string for the alt text as in the following example:

  1li + li::before {
  2  content: "\276E" / "";
  3}

• Add presentational separators in list items with a page link, using ARIA to avoid exposing the separators to screen reader users, as in the following example:

  1<nav aria-label="breadcrumb">
  2  <ol>
  3      <li>
  4          <a href="/">Evinced Accessibility Knowledge Base</a>
  5          <span role="presentation">❯</span>
  6      </li>
  7      <li>
  8          <a href="/components">Components</a>
  9          <span role="presentation">❯</span>
  10      </li>
  11      <li>
  12          <a aria-current="page">Breadcrumb</a>
  13      </li>
  14  </ol>
  15</nav>

In a complex hierarchy, there may be multiple paths to a page. Attempting to capture that complexity in a breadcrumb trail by including multiple page references in one list item is likely to be confusing and counter productive, especially—but not only—for those using assistive technologies. Rather set the breadcrumb trail to the most usable path and provide alternate means of navigating the page structure.

A breadcrumb trail begins with the first page in a path that leads to the current page. Users will be confused if the current page is not the last entry.

• It is best to not set an active link for the current page—the last list entry—to prevent an unexpected page reload and change of context.
• If an active link is used for the current page, the attribute aria-current must be set to a valid value (page or true) on the link so that screen reader users are informed that the link is for the current page.
• Whether or not a link is used for the current page, setting aria-current will help screen reader users may not be aware that the current list item is the last without navigating forward.