- Success Criterion 3.2.3
- Conformance level AA
Breadcrumbs Present on Some Pages but Missing on Others
3.2.3 — Consistent Navigation
Scenario
Setting
A food-delivery app's order-tracking screen
What’s wrong
Breadcrumbs present on some pages, absent/reordered on siblings.
Example
<!-- Restaurant page -->
<nav aria-label="Breadcrumb">Home > Restaurants > Thai Kitchen</nav>
<!-- Order tracking page: breadcrumb missing entirely -->
<h1>Track Your Order</h1> Why it matters
A customer who relied on breadcrumbs to jump back to the restaurant list from the menu page has no way to do the same from order tracking, since the breadcrumb simply isn't there.
How to test
Check breadcrumb presence/order on sibling pages: present on some, absent or reordered on others, fails.
How to fix
Include the same breadcrumb component on every page in the flow, extending the trail rather than omitting it.
<!-- Order tracking page -->
<nav aria-label="Breadcrumb">Home > Restaurants > Thai Kitchen > Track Order</nav> Outcome
A customer tracking an order can retrace their path back to the restaurant in one click, same as on any other page.
Who is affected
Users with cognitive disabilities who depend on breadcrumbs to understand where they are lose that orientation on pages that quietly drop it.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Navigation Links Appearing in a Different Order on Each Page
- Header Menu Items Reshuffled Differently on Different Sections
- Footer Link Groups Ordered Differently Across Page Templates
- Search Box That Moves to a Different Spot on Every Page
- Skip Link Appearing in a Different Order on Different Pages
- Mobile Navigation Order That’s Inconsistent With Itself