Overview

Breadcrumbs help users understand where they are in a site’s hierarchy and navigate back to higher-level pages. When built with plain links and visible text separators, screen readers read every separator character aloud (e.g., “greater than”), cluttering the experience. The correct pattern uses a <nav> landmark, an ordered list for hierarchy, visually hidden separators, and aria-current="page" on the final item.

WCAG Criteria:

• 1.3.1 Info and Relationships  — structure and relationships conveyed through presentation must also be available programmatically
• 2.4.8 Location  — users should be able to determine their location within a set of pages

Key requirements:

• Wrap breadcrumbs in <nav aria-label="Breadcrumb"> to create a navigation landmark
• Use <ol> (ordered list) to convey the hierarchical sequence
• Hide visual separators from assistive technology with aria-hidden="true"
• Mark the current page with aria-current="page" on the last link

Breadcrumb Trail

<!-- Separators are read aloud: "Home greater than Products greater than Shoes" -->
<div>
  <a href="/">Home</a>
  <span>&gt;</span>
  <a href="/products">Products</a>
  <span>&gt;</span>
  <span>Shoes</span>
</div>

<nav aria-label="Breadcrumb">
  <ol style="list-style:none;display:flex;align-items:center;gap:0;margin:0;padding:0;">
    <li style="display:flex;align-items:center;">
      <a href="/">Home</a>
      <span aria-hidden="true" style="margin:0 8px;">/</span>
    </li>
    <li style="display:flex;align-items:center;">
      <a href="/products">Products</a>
      <span aria-hidden="true" style="margin:0 8px;">/</span>
    </li>
    <li>
      <a href="/products/shoes" aria-current="page">Shoes</a>
    </li>
  </ol>
</nav>

What’s wrong with plain links and text separators?

• No <nav> landmark — screen reader users cannot locate the breadcrumb via landmarks
• No list structure — the hierarchy is not conveyed programmatically
• > text separators are read aloud as “greater than” by screen readers
• The current page has no aria-current, so the user cannot tell which page they are on

What the screen reader announces:

Resources

• WAI-ARIA Authoring Practices — Breadcrumb Pattern 
• MDN — <nav> element
• MDN — aria-current
• WCAG 1.3.1 — Info and Relationships 
• WCAG 2.4.8 — Location