If you are familiar with fairytales, you may have heard the German fairytale about Hansel and Gretel, siblings that venture deep inside the woods. In a version of this story, they create a trail by breaking off pieces of bread so they can find their way home again.
Similarly, the visual pattern called the “breadcrumb” or “breadcrumb trail” allows users to keep track of their present location in relation to the website’s architecture and navigate through the parent pages. In other words, it displays the page’s hierarchy and helps users find their way home.
A horizontal list with a symbol dividing each item. In this list, the homepage is the first element, and the current page’s title is the last element.
Appropriate usage
The success criterion 2.4.5 Multiple Ways of the Web Content Accessibility Guidelines (WCAG), 2.0 and above, requires “more than one way…to locate a Web page.” Think of the breadcrumb as the secondary navigation of a site. Sites with more than one level in page hierarchy can use this pattern to satisfy the mentioned WCAG requirement. It is most helpful right above the content of the page since it’s where most users expect the breadcrumb to be located. No matter the location, it should always starts with the homepage of the website or application. Needless to say that this pattern should not be used on the homepage itself.
Expected interactions
A few key interactions must be considered to ensure this pattern is as accessible as possible.
Keyboard Interactions
The focus moves to each link in the list except the last item, which should not be a link or focusable.
Screen Reader Interactions
- The navigation region must be announced via a nav element with an appropriate aria-label attribute. This will allow screen reader users to identify this component clearly.
- The breadcrumb must be structured as a list, and every list item must be a link except the last item, as mentioned above.
- The last item must announce that it’s the current page with the aria-current attribute set to page.
- Symbols between the list items must be hidden from the screen reader. If the image is done with an img element, ensure the alt attribute is empty. If the image is done with an SVG, ensure it has an aria-hidden attribute set to true. If added in CSS, ensure the symbol is not read by screen readers, i.e., the content property must be empty.
The Accessible Breadcrumb Navigation example provides all of these interactions.
Making the breadcrumb pattern more user-friendly
Other best practices to consider to make the breadcrumb the powerful tool it can be:
- It is best to avoid using breadcrumbs for navigation history. It is more helpful for users to understand the hierarchical structure of the website or application than the navigation history. Especially when a user arrives from an external source.
- Use symbols to divide each item in the breadcrumb. The most common symbols are the greater than symbol (>) and the forward slash (/).
- Ensure the breadcrumb is consistent throughout a website or on appropriate pages of an application. Consistency provides users with a better navigation experience. It can also help search engines like Google to index your website better.
- Ensure the target area of each link allows users to click on it without accidentally activating an adjacent link.
Breadcrumbs are one of the simplest if not most common patterns. They are universally recognizable and offer other benefits like search engine optimization. So when incorporating a breadcrumb into your website, follow the techniques mentioned in this article to ensure it’s accessible to all users.
Related content: