How Can I Make Breadcrumbs Accessible for People with Disabilities?

Breadcrumbs can help users navigate your website, and they’re extremely helpful for lowering bounce rates, improving search engine optimization, and enhancing the user experience. 

A breadcrumb menu lays out the structure of your site, presenting users with an easily understandable list of links related to the current page. The feature also provides quick information about the user’s location within the site’s structure, which is especially helpful for forums, ecommerce stores, and blogs. 

However, breadcrumbs can also create accessibility concerns. Without proper markup, people who use screen readers (software that converts text to audio or braille) may not understand the purpose of the breadcrumb menu.

Below, we’ll explain how to identify breadcrumbs and provide a few tips for testing your content. 

Identifying Breadcrumbs for Screen Reader Users

The Web Content Accessibility Guidelines (WCAG) Success Criterion 1.3.1 requires that “information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.” In other words, if the presentation of your content changes, users should still have ways to understand the relationships between different elements. 

For breadcrumb menus, that means providing machine-readable labels that clearly explain the purpose of the content. People who use screen readers will immediately understand that they’re looking at a sub-navigation menu — and they’ll be able to find and use the breadcrumbs more easily. 

Can HTML identify breadcrumb menus?

Currently, HTML doesn’t include dedicated semantic elements for breadcrumbs. Some websites format breadcrumbs as simple unordered lists. This isn’t ideal, since most breadcrumbs have a defined hierarchy. For example, an ecommerce website might use this breadcrumb structure:

Clothes > Men’s Clothes > Men’s Footwear > Shoes > Current Page

Each level of the breadcrumbs is the child of the previous level. Unordered lists wouldn’t show that relationship. 

While ordered lists can present the information in a cleaner way, ordered lists could potentially create confusion for some users — the list doesn’t explicitly describe the function of the breadcrumbs within the context of the page. 

Using WAI-ARIA for Accessible Breadcrumbs

With that in mind, you may want to use WAI-ARIA (Web Accessibility Initiative - Accessible Rich Applications) markup along with an ordered list establishing the breadcrumb hierarchy. 

As we’ve noted in other articles, WAI-ARIA can be complex, and when misused, it can create accessibility issues. However, it’s an excellent resource when roles can’t be defined in semantic HTML. Before using WAI-ARIA, review these common ARIA misconceptions and make sure you’re prepared to test your content.

Example: ARIA Breadcrumbs with an Ordered List

Developers should use the nav element “Breadcrumb" to make navigation easier for people who use screen readers and other assistive technologies. Using an ordered list helps to ensure that the breadcrumbs are interpretable for a variety of technologies, including those that don’t fully support ARIA. 

Here’s an example of proper ARIA markup for a breadcrumb trail:

1. <nav aria-label="Breadcrumb" class="breadcrumb">
2.   <ol>
3.     <li>
4.       <a href="../../">
5.        The First Page in the Breadcrumb Trail
6.       </a>
7.     </li>
8.     <li>
9.       <a href="../../#aria_ex">
10.         The Second Page in the Breadcrumb Trail
11.       </a>
12.     </li>
13.     <li>
14.       <a href="../../#breadcrumb">
15.         The Third Page in the Breadcrumb Trail
16.       </a>
17.     </li>
18.     <li>
19.       <a href="./index.html" aria-current="page">
20.         The Final Page (and Current Page)
21.       </a>
22.     </li>
23.   </ol>
24. </nav>

We recommend reviewing the World Wide Web Consortium (W3C)’s Breadcrumb Example page for guidance on WAI-ARIA authoring practices. 

Other Tips for Creating Accessible Breadcrumbs

Generally speaking, breadcrumbs improve the on-page experience for all users. WAI-ARIA markup helps to ensure that your site is accessible for as many people as possible, though you’ll need to test your markup carefully to make sure it’s appropriately implemented.

Here are a few other considerations to keep in mind when adding a breadcrumb menu: 

• Wherever possible, use decorative separators. Screen readers will announce non-decorative separators as part of the content, which can make breadcrumb menus frustrating for users. Use CSS or the aria-hidden="true" attribute for a better user experience.
• Avoid extremely long breadcrumb trails. With a few exceptions, long lists of links aren’t helpful, and if your breadcrumbs are located at the top of each page, screen reader users will need to listen to each link announcement or skip through the links to get to the content.
• Remember, breadcrumbs don’t replace primary navigation. Users should be able to access important pages (such as your homepage) without clicking through the breadcrumb menu.

Finally, test your content throughout the development process. Prioritizing accessibility can limit development costs while delivering a better experience to real-life users. 

An experienced accessibility partner can help you adopt the best practices of web accessibility and create a testing strategy that works for your organization. Contact the Bureau of Internet Accessibility to learn more.