- Contents:
Breadcrumbs:
- Help orient a user within a website’s hierarchy
- Supplement a site’s primary desktop navigation
Guidelines
Sites with a flat, single-level hierarchy and one-page sites don’t need breadcrumbs. If your site doesn’t have sub-pages, consider highlighting the active page or section in the main nav.
Use breadcrumbs when a site’s navigation architecture has three or more levels.
A trail of breadcrumbs should always start with the homepage.
Use arrowheads, forward slashes, or other clear identifiers to separate the different breadcrumbs in the user’s trail.
Style the active link to look different from the other links in the breadcrumbs so a user can easily identify the current page.
Do not hyperlink the active link. Doing so will confuse users as to the current page.
Do not replace the primary nav with breadcrumbs. Use breadcrumbs only as a supplementary navigational pattern.
Style
Accessibility
Using keyboard only (with no screen reader running)
- Use key to navigate to breadcrumb links and ensure visible focus outline appears
- Use [enter] key to activate breadcrumb links
On desktop with screen reader running
- Use key to navigate to breadcrumb links
- Ensure screen reader announces navigation region named “Breadcrumb”
- Ensure screen reader announces list
- Ensure screen reader announces links
- Ensure screen reader announces current page
- Ensure no decorative divider elements are announced such as / or > when using or arrow keys to navigate through the breadcrumb links
On mobile with screen reader running
- Use [swipe] to navigate to breadcrumb links
- Ensure screen reader announces navigation region named “Breadcrumb”
- Ensure screen reader announces list
- Ensure screen reader announces links
- Ensure screen reader announces current page
On desktop, zoom the browser window to 200% (this may invoke the mobile view which is acceptable). Components, text labels, and other elements may change to reflect the mobile web view, but as long as content and other elements don’t overlap and the site functions correctly (and meets applicable acceptance criteria), then it passes.
On mobile, use the pinch feature to zoom the interface. Make sure that content doesn’t overlap with other copy or features on the screen.
Run your axe tool against both desktop and mobile versions to ensure that there are no errors specific to the scope of the relevant ticket.
Visit w3.org’s guide on coding accessible breadcrumb trails (link opens externally).
Related elements
Related components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| May. 08 2017 4:15pm | Initial content entry |