Accessibility
- The default breadcrumb navigation is not accessible. Use the accessible option for compliance.
- Place breadcrumb navigation in a
nav
element with role="navigation"
. The nav
element should also be marked with aria-label="breadcrumbs"
to clearly describe the type of navigation.
- Breadcrumbs should remain in the same relative order and location on each page.
- The link text should be clear, reflect the breadcrumb location accurately, and easy to understand for all users.
- Make sure the tab order matches the hierarchy.
- Apply
aria-current="page"
to the last item of the set to indicate that it represents the current page.
- For more information, see the
WAI-ARIA Authoring Practices for the breadcrumb pattern.