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.

No keyboard interaction needed.

Attribute Element Notes

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": "https://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>

Load More Related Articles
Load More By john
Load More In Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *