Accessible Breadcrumbs

When a website has a lot of pages, breadcrumbs can help a user find their current location within the overal hierarchy. This page shows how you can make breadcrumbs accessible to all users.

Breadcrumbs is an UX pattern that show where the current page is located in the overall website's hierarchy. It is a type of secondary navigation, that allows users to find their way back to the homepage.

You can use it you have several levels of navigation and want to make the parent pages available as navigation.

Breadcrumbs on Gov.uk(opens in a new tab).

Breadcrumbs on Amazon(opens in a new tab).

Breadcrumbs on SBB(opens in a new tab).

No keyboard interaction needed.

As HTML does not have dedicated semantic elements for breadcrumbs, developers need to add ARIA attributes(opens in a new tab) to make it accessible for people using screen readers

To make the breadcrumbs appear to users navigating the page using landmarks, we can make use of the nav element to wrap your markup. As we most likely have more nav elements on the page, it is a best practice to use aria-label to label this landmark.

<nav aria-label="breadcrumbs">
  ...breadcrumbs go here
</nav>

In order to make the set of links structured as a hierarchy, we can use an ordered list (ol) tag.

<ol>
  <li>home</li>
  <li>parent</li>
  <li>current</li>
</ol>

To mark the last link of the list the current page, we can make use of the aria-current='location'.

// ⛔ "Home, link"
<a
  href='/parent/current-page'
>
  Home
</a>
  
// ✅ "Home, current page link"
<a
  href='/parent/current-page'
  aria-current='location'
>
  Home
</a>

When using markup for the breadcrumb's separator, it's important to make it a decorative element, so that screen reader users don't announce it as text.

// ⛔ Separator as text content
<li>
  <a href='/'>Home</a>
  <span>►</span>
</li>
  
// ✅ Separator as decorative element
<li>
  <a href='/'>Home</a>
  <span aria-hidden="true">►</span>
</li>

<nav aria-label="breadcrumbs">
  <ol>
    <li>
      <a href="/">
        Home
      </a>
    </li>
    <li>
      <a href="/parent">
        Parent
      </a>
    </li>
    <li>
      <a
        href="/parent/current"
        aria-current="location"
      >
        Current
      </a>
    </li>
  </ol>
</nav>

<nav aria-label="breadcrumbs">
  <ol>
    <li>
      <a href="/">
        Home
      </a>
      <span aria-hidden="true">→<span>
    </li>
    <li>
      <a href="/parent">
        Parent
      </a>
      <span aria-hidden="true">→<span>
    </li>
    <li>
      <a
        href="/parent/current"
        aria-current="location"
      >
        Current
      </a>
    </li>
  </ol>
</nav>

Some search engines also recognise this pattern and display results with this information, as shown below:

⛔ without JSON+LD

✅ with JSON+LD

We recommend to use JSON+LD(opens in a new tab). We recommend the reading of the BreadcrumbList Schema(opens in a new tab) format. An example of markup using the Breadcrumb Pattern in JSON+LD is shown below:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://example.com/parent",
        "name": "Parent"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://example.com/parent/current",
        "name": "Current"
      }
    }
  ]
}
</script>