Breadcrumb navigation for screen readers

Breadcrumbs indicate your location within a site’s hierarchy (e.g., Home > Products > Shoes > Running Shoes). Sighted users see the trail at a glance. Screen reader users need explicit markup to understand that this is navigation, what it represents, and which page they’re currently on. Without proper structure, breadcrumbs become a confusing list of links with no context.

Here’s how to build them correctly.

Wrap it in a nav element: Use <nav> with aria-label="Breadcrumb" or aria-label="Breadcrumbs". This makes it a navigation landmark that screen readers can identify and jump to. The label distinguishes it from your main navigation and other nav elements on the page.

Use an ordered list: Breadcrumbs show hierarchy, and order matters. Use <ol> and <li> tags. This informs screen readers of the number of items in the trail and enables users to navigate by list items. Unordered lists don’t communicate the parent-child relationship.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/shoes">Shoes</a></li>
    <li><a href="/products/shoes/running" aria-current="page">Running Shoes</a></li>
  </ol>
</nav>

Mark the current page: Add aria-current="page" to the last link. This explicitly tells screen readers “you are here.” There’s some debate about whether to keep the current page as a link or remove it entirely. Keeping it as a link means keyboard users and screen reader users navigating by links will encounter it. Removing it keeps it out of the focus order, as it simply refreshes the page anyway. Both approaches work.

Hide visual separators from screen readers: Those slashes or arrows between links should be CSS-only, using pseudo-elements like ::before. If you add them as text content, screen readers will announce “slash” between every link, which becomes noise. The <nav> element and ordered list already communicate the structure.

When not to use breadcrumbs: Skip them on homepages and single-level sites where hierarchy doesn’t exist. Also, avoid them for step-by-step processes like checkout flows. Breadcrumbs are for hierarchical navigation, not linear progression.

Breadcrumbs require semantic markup to convey the hierarchy and location. The visual trail is obvious to sighted users, but screen reader users need proper HTML and ARIA to understand the same information.