Accessible Structure

Breadcrumb Current Page

A breadcrumb uses a named navigation landmark, an ordered list, and aria-current to show the current page.

Program

Breadcrumbs are a short path back through the site. The markup should show the path order and mark the page the user is on now.

breadcrumb_current.html
Visuals: captured from real browser rendering
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/orders/">Orders</a></li>
    <li><a href="/orders/42" aria-current="page">Order 42</a></li>
  </ol>
</nav>

  1. Name the breadcrumb navigation.

    A navigation landmark is named Breadcrumb.
    aria-label gives this nav a specific breadcrumb name.

  2. Use an ordered path list.

    The breadcrumb trail is represented as an ordered list.
    ol shows that each crumb is one step in order.

  3. Add the home crumb.

    The first breadcrumb link points to Home.
    The first crumb starts at the site root.

  4. Add the parent section crumb.

    The second breadcrumb link points to the Orders section.
    The middle crumb lets users move back to the parent section.

  5. Mark the current page crumb.

    The final breadcrumb is marked as the current Order 42 page.
    aria-current page identifies the page the user is on now.
breadcrumb landmark A nav element with aria-label gives the breadcrumb trail a clear name.
aria-current aria-current="page" marks the link that represents the current page in a set.