Breadcrumbs
A navigation landmark that displays a trail of links reflecting the user's current position within a site hierarchy, helping them understand context and navigate to higher-level pages.
Demo
Review both breadcrumb scenarios below. Tab through the links and observe how each is identified and announced. Notice how the current page item is distinguished from the preceding navigation links, and how the separator characters are handled by assistive technology.
What to Observe
- The breadcrumb trail is contained within a navigation landmark with a distinct accessible name
- Separator characters between items are hidden from assistive technology and not announced
- The current page item is marked programmatically so screen readers identify it as the active location
- When the current page is a link, it is distinguishable from ancestor links both visually and semantically
- When the current page is plain text, it is not focusable and does not behave like a link
Anatomy
[Anatomy image placeholder — will be added when assets are available]
- Navigation Landmark — the wrapping nav element with a label that distinguishes this breadcrumb from other navigation regions on the page
- Ordered List — the semantic list container that groups breadcrumb items and communicates their count and sequential relationship to screen readers
- Ancestor Link — a standard anchor element linking to a higher-level page in the site hierarchy
- Current Page Item — the final item representing the user's current location, marked to indicate it is the active page; may be a link or plain text depending on the implementation
- Separator — a visual-only character or icon between items that is hidden from assistive technology
Accessibility Behavior
- Wrap the breadcrumb in a navigation landmark and give it an accessible name that distinguishes it from other navigation regions on the page
- Use an ordered list to convey the hierarchical and sequential nature of the breadcrumb trail
- Mark the current page item programmatically so assistive technology can identify the user's active location within the trail
- Hide separator characters from assistive technology so they are not read aloud as part of the breadcrumb content
- Ensure ancestor links have meaningful and descriptive link text that reflects the destination page
- If the current page item is rendered as a link, it should still be identifiable as the current location rather than just another navigation link
Common Mistakes
- Placing the breadcrumb outside a navigation landmark, making it invisible to users who navigate by landmarks
- Using an unordered list or a flat sequence of links without a list element, losing the semantic structure that communicates hierarchy
- Failing to mark the current page item, leaving screen reader users without a clear indication of their location
- Not hiding separator characters, causing them to be read aloud and cluttering the screen reader's output
- Using generic link text such as "click here" or truncated labels that do not describe the destination page
Why This Matters
Breadcrumbs are a wayfinding tool. For sighted users, the visual trail makes location obvious at a glance. For screen reader users navigating by landmarks or links, the breadcrumb's structure — its landmark label, list semantics, and current-page marker — is what makes location comprehensible. When these elements are absent, screen reader users may have no way to understand where they are in a site's structure or how to return to a parent page without using the browser's back button. A correctly implemented breadcrumb gives all users an equivalent sense of orientation.
Accessibility Validation
This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.
To learn more, please contact us.
Code
Scenario: Current page as a link
Scenario: Current page is NOT a link