Components
Breadcrumbs
Breadcrumbs help users understand where they are within a structure and make it possible to navigate back to higher levels.
What you need to check
Breadcrumbs must be handled so that it does not become too long on small screens.
Check that the breadcrumb trail does not extend beyond the visible area at a narrow viewport or high zoom.
If the trail becomes too long, it should be replaced with a back link.
See the Breadcrumbs documentation for the recommended solution.
WCAG: 1.4.10 Reflow
Skip link must bypass breadcrumbs and go directly to the main content.
Users should be able to skip repeated content without navigating through the breadcrumbs.
WCAG: 2.4.1 Bypass blocks
The link text in breadcrumbs must be understandable.
Avoid generic names or unclear abbreviations.
Example: “Tax for businesses”
Not just: “Page 2” or “Info”
Breadcrumbs must be consistently placed and structured across pages.
The breadcrumb trail should appear in the same location and follow the same order on all pages where it is used.
Breadcrumbs must not be the only way to navigate.
Users should have multiple ways to navigate to content.
WCAG: 2.4.5 Multiple ways
Last level
The last link should correspond to the current page. It looks like regular text, but is coded as a link with aria-current="page". This way, screen readers get the correct information about which page the user is on, without other users mistakenly perceiving it as a clickable link.