Code example

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ul>
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/web/"
         aria-label="Web accessibility checklist">
        Web
      </a>
    </li>
    <li>
      <a href="/checklist-web/breadcrumbs/" 
         aria-current="page">
        Breadcrumbs
      </a>
    </li>
  </ul>
</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 <ul> and <li> provides context to users about a given breadcrumb’s position in a list and of the total number of breadcrumbs.