Accessiblity of Breadcrumb

Role	Attribute	Element	Usage
	aria-label=Breadcrumb	nav	Provides a label that describes the type of navigation provided in the nav element.
	aria-current=page	a	Applied to the last link in the set to indicate that it represents the current page.

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../../..">
        WAI-ARIA Authoring Practices Guide (APG)
      </a>
    </li>
    <li>
      <a href="../../../">
        Patterns
      </a>
    </li>
    <li>
      <a href="../../">
        Breadcrumb Pattern
      </a>
    </li>
    <li>
      <a href="" aria-current="page">
        Breadcrumb Example
      </a>
    </li>
  </ol>
</nav>

Accessibility Features

• The set of links is structured using an ordered list .
• A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
• To prevent screen reader announcement of the visual separators between links, they are added via CSS:
  • The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.
  • Each link has a border on one side that is skewed with the CSS’ transform property so it resembles a slash.

Breadcrumb Example | APG | WAI | W3C