Notes on Implementation
We do not use Bootstrap’s Breadcrumb component, but implement our own with increased color contrast and including the greater-than character between links to make the link hierarchy clear to visual users.
Breadcrumb navigation can greatly enhance the users ability to navigate and find their place within a website or web application.
To prevent screen reader announcement of the visual separators between links, they are added via CSS.
Since breadcrumbs provide a navigation, it is recommended to add a meaningful label such as
aria-label="breadcrumb" to identify the type of navigation provided in the
<nav> element, as well as applying an
aria-current="page" to the last item of the breadcrumb trail to indicate that it represents the current page.
For more information on implementing accessible breadcrumbs, see the WAI-ARIA Authoring Practices for the breadcrumb pattern