How to Get Accessible Breadcrumb Trails Right
The navigation trail showing where a page sits in a site's hierarchy.
Marcus Adeyemi
Why does it matter?
Breadcrumbs help orientation, and they need markup that identifies them as navigation and marks the current page.
What are the numbers?
- Landmark breadcrumbs sit in a labeled navigation landmark
- Current page should be marked with aria-current
- Separators decorative separators should be hidden
- Structured data breadcrumbs can be marked up for search
What should I do?
- Wrap breadcrumbs in a labeled nav element
- Mark the current page with aria-current
- Hide decorative separators from assistive technology
- Keep trails reflecting real hierarchy
- Add structured data for search results
What should I avoid?
Avoid:
- Separators announced as characters
- Breadcrumbs that show click history
- Current page rendered as a link with no indication
- Trails that contradict navigation
When should I get help?
Short answer Bring in help when deep sites need orientation.
Where this comes from
- W3C ARIA Authoring Practices Guide — Breadcrumb pattern
- Google Search Central — Breadcrumb structured data
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
