Code example

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/web/"
         aria-label="Web accessibility checklist">
        Web
      </a>
    </li>
    <li>
      <a href="/accessible-web/breadcrumbs/" 
         aria-current="page">
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>

Developer notes

  • Breadcrumb link names must correspond to their destination page titles.
    • In the example here, the “Web” link uses an aria-label that corresponds to the full title of the destination page.
  • Use a <nav> with a unique name like aria-label=”breadcrumbs”
  • Placing the links inside <ol> and <li> provides context to users about a given breadcrumb’s position in a list and of the total number of breadcrumbs.
  • Add aria-current="page" to the last link in the breadcrumb. This represents the current item within a container or set of related elements.
  • ARIA Authoring Practices Guide (APG) Breadcrumb Example

Related breadcrumb navigation entries