Breadcrumbs A11Y

title: "Accessible Breadcrumbs — Bypassing Repetitive Navigation Accessibly" description: "Learn how to implement accessible breadcrumbs with nav, aria-label, aria-current, and proper list markup for screen reader navigation support." weight: 6 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

Accessible breadcrumbs use the nav element with aria-label="Breadcrumbs", an ordered list, and aria-current to indicate the current page.

## What You'll Learn

How to build accessible breadcrumb navigation that helps all users understand their location within the site hierarchy.

## Why It Matters

Breadcrumbs provide orientation and a secondary navigation path. Without proper markup, screen reader users cannot distinguish breadcrumbs from other navigation.

## Real-World Use

A user navigates to Documentation > Accessibility > Breadcrumbs. The breadcrumb shows each level as a link. The screen reader announces "Breadcrumbs navigation, Home, Documentation, Accessibility, Breadcrumbs, current page."

## Breadcrumb Implementation

```html
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Documentation</a></li>
    <li><a href="/docs/a11y">Accessibility</a></li>
    <li aria-current="page">Breadcrumbs</li>
  </ol>
</nav>

With Separators

<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">Home</a><span aria-hidden="true">/</span></li>
    <li><a href="/docs">Docs</a><span aria-hidden="true">/</span></li>
    <li aria-current="page">Breadcrumbs</li>
  </ol>
</nav>

/* Accessible separator alternative */
nav[aria-label="Breadcrumbs"] ol {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}

nav[aria-label="Breadcrumbs"] li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: #666;
}

JSON-LD Structured Data

<nav aria-label="Breadcrumbs">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/docs"><span itemprop="name">Documentation</span></a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Accessibility</span>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

Common Mistakes

1. Using aria-hidden on breadcrumb links

Links in the breadcrumb path are functional and should not be hidden from screen readers.

2. No aria-label on the breadcrumb nav

Without aria-label="Breadcrumbs", the nav appears as another generic navigation landmark.

3. Not using an ordered list

Breadcrumbs represent hierarchy. An ordered list (ol) reflects this semantic meaning.

4. Missing aria-current on the last item

The current page in the breadcrumb must have aria-current="page" so screen readers announce it.

5. Separator not hidden from screen readers

Visual separators should use aria-hidden="true" to avoid confusing screen reader output.

Practice Questions

1. What aria-label should the breadcrumb nav use? "Breadcrumbs" or "Breadcrumb" so it is distinguishable from other navigation landmarks.

2. What attribute marks the current page in breadcrumbs? aria-current="page" on the last li element indicates the current page.

3. Why use an ordered list for breadcrumbs? Because breadcrumbs represent a hierarchical path with sequence. Ordered list conveys this meaning semantically.

Challenge: Create a breadcrumb component for a documentation site with three levels of hierarchy. Add JSON-LD structured data.

FAQ

Mini Project

Add breadcrumbs to a multi-level documentation section. Use nav with aria-label, ordered list, aria-current, and CSS separators. Verify with screen reader.

What's Next

Learn about Accessible Pagination and how to implement paging controls that work for all users.