Skip to content

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.

What are breadcrumbs and when to use them

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.

Screenshot of gov.uk

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

Screenshot of amazon.com

Breadcrumbs on Amazon(opens in a new tab).

Screenshot of sbb.ch

Breadcrumbs on SBB(opens in a new tab).

Keyboard Support

No keyboard interaction needed.

AttributeElementNotes

Attribute:

aria-label="breadcrumbs"

Element:

<nav>
Describes the navigation to screen reader users (who navigate the page using landmarks)Learn more about aria-label

Attribute:

aria-current="location"

Element:

<a>
Indicates the last link as the current page.Learn more about aria-current

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:

Screenshot of a result from google without breadcrumbs information

⛔ without JSON+LD

Screenshot of a result from google with breadcrumbs information

✅ 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>
João Picture

Need help? The first consultation is on us.

We'll discuss your biggest accessibility problems, and figure out what you need to do to make your website more accessible.

In this free 45 min session we will:

  • Analyse your website or product.

  • Review some accessibility issues.

  • Make a plan on how to improve.

Schedule Your Free Session