Accessible Breadcrumbs

This week’s Accessibility Weekly post is all about a small but impactful way of helping users navigate websites: breadcrumbs.

Website “breadcrumbs” are the digital equivalent of Hansel and Gretel leaving – no, not breadcrumbs forest creatures will eat – but a trail of shiny white pebbles that will lead them home.

Read on for information on creating breadcrumbs and whether you should include them in your websites.

What are breadcrumbs?

Breadcrumbs are an alternative navigation element that typically appears above the title on a post or page and includes links to the parent page(s) up to the home page.

Here’s an example of breadcrumbs on the Equalize Digital website.

In this example, we’re viewing the Screenshots & Features page. The Breadcrumbs here look like this: “Home / Accessibility Checker / Screenshots & Features.”

This page is a child page of the Accessibility Checker page, which is a top-level page under the home page.

Why Breadcrumbs Help Accessibility

Enhanced Understanding

If someone landed directly on this page, it might not be immediately apparent that it has screenshots and features for the Accessibility Checker plugin because “Accessibility Checker” is not in the page’s title. We don’t always make the page titles as meaningful as they could be for reasons of space or design.

Arguably, I should improve the title on this page. However, even if I don’t add “Accessibility Checker” into the H1, there is another way that users can get context about what screenshots and features are on this page: from the breadcrumbs.

Breadcrumbs make websites more accessible because they communicate the site structure to visitors. They help people understand how pages are connected within the site’s hierarchy, which adds context to the current page.

Additional Navigation Options

Breadcrumbs also allow users to navigate up the website’s hierarchy. Including them on a web page is one way to meet Web Content Accessibility Guidelines (WCAG) 2.4.5 Multiple Ways (Level AA).

The “Multiple Ways” success criterion aims to make it easier for users to locate content in a way that best meets their needs. On extensive websites with multiple levels of content, it’s not always possible to add every post or page in the primary navigation menu. Adding additional ways for users to navigate the site is vital, and breadcrumbs are one way to do that.

Are breadcrumbs required for accessibility?

While breadcrumbs are super helpful on a website, and I would encourage you to include them in your designs, breadcrumbs are not an accessibility requirement. Along that same line, leaving breadcrumbs off a website is not a WCAG violation.

So, if a client is adamantly opposed to breadcrumbs, it’s OK to leave them off. But they are helpful, so here’s one bonus way to convince them to include breadcrumbs…

Bonus: Breadcrumbs are Good for SEO

Breadcrumbs don’t just help people understand how your site is structured; they also help Google understand how it is structured.

For this reason, most SEO professionals recommend including breadcrumbs. Google even has a structured data type for breadcrumbs, so you can help Google identify and crawl them.

If you have a client who isn’t on board with breadcrumbs, sharing the SEO benefit might convince them.

How to Code Breadcrumbs

If you’re hand-coding breadcrumbs or assessing the breadcrumbs on your website for accessibility, following the same best practices as other nav menus is essential.

Use a Labeled Nav Tag

The most important thing for breadcrumb accessibility is to wrap them in an HTML nav tag with an aria-label that identifies them as breadcrumbs.

<nav aria-label="Breadcrumbs"></nav>

Lists are Helpful But Not Required

Generally, breadcrumbs are contained in list markup as well. Some examples you’ll find around the web use ordered lists (<ol>), and some use unordered lists (<ul>).

Unlike in a primary navigation menu, where there are many links and list markup is required for users to understand how the links relate to one another, breadcrumbs have a much simpler structure.

Typically, breadcrumbs don’t contain more than 3-4 links, so a list structure isn’t needed for user comprehension unless the website is very large and the breadcrumbs go many pages deep. Beyond large sites, lists in breadcrumbs may just be user preference.

You may notice that the core WordPress breadcrumbs block does not include a list, for example. This lack of list markup is not considered an accessibility bug by the accessibility team.

Example Breadcrumbs Code with Lists

Here’s an example of HTML code for accessible breadcrumbs with a list:

<nav aria-label="Breadcrumbs" class="breadcrumb">
<ol>
<li>
<a href="/">Home </a>
</li>
<li>
<a href="/accessibility-checker">Accessibility Checker</a>
</li>
<li>Screenshots & Features</li>
</ol>
</nav>

If you were going to link the current page rather than have it as plain text, then you would want to indicate it was the current page with ARIA on the link like this:

<a href="/accessibility-checker/features" aria-current="page">Screenshots & Features</a>

Accessible Breadcrumbs Without a List

Here’s an example of code for this same element, but without the list markup.

<nav aria-label="Breadcrumbs" class="breadcrumb">
<p><a href="/">Home </a><span aria-hidden="true”> </span><a href="/accessibility-checker">Accessibility Checker</a><span aria-hidden="true”> | </span>Screenshots & Features</p>
</nav>

Notice we’re not adding the dividers with CSS, so they have been wrapped in a span with aria-hidden on them so screen readers won’t read out what is a decorative character.

How WordPress Breadcrumb Plugins Stack Up

The most common accessibility mistake in breadcrumbs in WordPress is that they are not contained in a nav tag. The second most common mistake I see is an unlabeled nav tag is unlabeled.

I checked out a few WordPress plugins that add breadcrumbs. Here’s what I found:

• WooCommerce has its breadcrumbs in a nav tag, but it’s unlabeled.
• Yoast’s shortcode doesn’t output breadcrumbs in a nav tag at all.
• Breadcrumb NavXT doesn’t have semantic markup as the default settings, but there are instructions on how to filter BreadcrumbNavXT to use a nav tag.
• Breadcrumb by PickPlugins is missing the nav tag.
• Flexy Breadcrumb is also missing the nav tag.

If I were to choose a breadcrumb plugin to use on my site, I’d go with Breadcrumb NavXT because it’s currently the only one with an accessible option.

If you’re using one of the other plugins, I opened support requests/GitHub issues for them that you can follow to track for a fix.

Special thanks to Alex Stine and Joe Dolson for discussing the necessity of lists in breadcrumbs with me as I drafted this article.