20% Off My Easy-Peasy Proposal with the Coupon Code 20OFF (Now - April 30th)

Accessibility Weekly

Accessible Breadcrumbs

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 39

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.

Breadcrumbs on the Equalize Digital website showing Home, Accessibility Checker, and the current page “Screenshots & Feature

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:

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.

Join the Conversation!

There's a dedicated thread on this post inside of The Admin Bar community. Join in on the conversation, ask questions, and learn more!

Group Thread
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 51

How Accessible is “Accessible Enough”

In an ideal world where clients have unlimited budgets and everything is custom, every website would …

Week 50

How to Sell Accessibility in New Builds

Creating websites that prioritize accessibility is no longer just a best practice—it’s a business must, especially …

Week 49

Accessibility in Web Development Contracts

Whether you’re running an agency or freelancing, having a clear contract for your web development and …