Skip to main content
Accessible Web Dev

Accessible Breadcrumbs

On This Page

Introduction

Breadcrumbs are a type of navigation, designed to make it easy to see where you are within the structure of a website and easily navigate to different areas. The name refers to the story of Hansel and Gretel who left a trail of breadcrumbs in the hope to find their way back out of the forest. They are most useful when content is nested several layers deep.

Breadcrumbs are most often found at the top of a page and should be placed just before the main content. There is no semantic HTML element for breadcrumbs but it can be made from a combination of semantic HTML elements plus a small amount of ARIA.

HTML Structure

Although there is not one HTML element that can be used to make breadcrumbs, there are a few elements available that, when used together, offer the semantics needed to make accessible breadcrumbs.

What is needed:

  • A nav element will let users know that this is a navigation landmark. Landmarks make things easier to find, especially for screen reader users.
  • An ordered list will let users know that the order of the items is important.
  • Links within the list will let users know that they can click to navigate to that area of the website.
  • Since the last element in a breadcrumb trail should represent the current page, making it a link is optional.

Add Extra Information with ARIA

ARIA is used to add extra semantic information where HTML is not enough. In this case, there is probably another navigation present on the page. Therefore we will need to distinguish the breadcrumb navigation from any other navigation with an aria-label.

If the last link in the breadcrumb trail is the current page, we can also use aria-current on that link to specify that it is the currently active page. If the last element is not a link then aria-current is optional.

Aria-hidden can be used to hide any dividers between links.

html
<nav aria-label="Breadcrumbs" class="breadcrumbs">
	<ol>
		<li>
			<a href="#">Website root</a>
			<p aria-hidden="true">></p>
		</li>
		<li>
			<a href="#">Website level 1</a>
			<p aria-hidden="true">></p>
		</li>
		<li>
			<a href="#" aria-current="page">Website level 2</a>
		</li>
	</ol>
</nav>

Using an ordered list element within breadcrumbs causes each list item to be numbered. This styling can be removed with CSS and flexbox can be used to make list items sit side by side. CSS can also be used to create dividers between each link, or the divider can be added within the HTML and hidden with aria-hidden (as in the previous example).

css
.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 1rem;
	display: flex;
	gap: 0.5rem;
}

Be aware that removing list styles from lists can cause the screen reader VoiceOver on Mac to stop announcing items as a list. If this happens, add role="list" to the ol element.

WCAG Criteria

Other Resources

Page last updated: 10th April 2023