Breadcrumb
This page contains the inaccessible version of the component including the description of issues, and also the more accessible version of the component for comparison.
Inaccessible Version
Issues
Expand each issue to see the user impact.
Breadcrumb links have no visual focus.
Although the breadcrumb links are accessible by keyboard, sighted keyboard users cannot see where they are focused as there is no visual focus indicator. They are lost in the darkness.
There is not enough contrast between links and the background colors.
Users with moderately low vision cannot read the text because they do not see it.
Read more about the color contrast to learn about the minimum and recommended contrast ratios.
The set of links is structured using an unordered list.
Breadcrumb links follow the site structure, so the order of links is important. The ordered list should be used instead so users know of the hierarchy.
The breadcrumb navigation is not easily located for screen reader users.
The nav element with a proper label should be used to identify the breadcrumb as a navigation landmark.
The link separators create a redundant and potentially distracting verbosity for screen reader users.
To prevent screen readers' announcement of the visual separators between links, they should be added via CSS or hidden from assistive technologies.
The aria-label attributes on links are unnecessary and invalid.
There is no reason to put the aria-label on the breadcrumb links as the title inside the link is descriptive enough.
The last item in the breadcrumb is not marked as the currently active link.
The last link should have the aria-current attribute to indicate the current item within a set of related elements and let users know they are currently on this page.
The layout breaks on smaller resolutions.
The breadcrumb items do not wrap on smaller resolutions causing content overflow and a horizontal scrollbar appears.
Considerations
The usage of certain techniques depends on the circumstances. Expand each consideration to learn more.
Consider shortening the breadcrumb trail on small resolutions.
Sometimes, a single breadcrumb pointing up one level on smaller resolutions or mobile screens might be sufficient for key user goals. For instance, on an e-commerce site, a product-detail page could have a breadcrumb leading to the parent category, helping users explore related products without taking up excessive screen space.