Breadcrumbs
Breadcrumbs are a secondary navigation method that show content hierarchy or traces someone’s path. They allow a user to move quickly up to a higher level or to a previous step.
On this page
Use Cases
User should be able to:
- View labels
- Navigate to new pages
- Identify the current page
- Identify the number of steps in breadcrumb trail
Relevant WCAG Requirements
Info and Relationships
Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.
WCAG 2.1 Understanding 1.3.1Link Purpose (In Context)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
WCAG 2.1 Understanding 2.4.4Location
Information about the user's location within a set of Web pages is available.
WCAG 2.1 Understanding 2.4.8Name, Role, Value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
WCAG 2.1 Understanding 4.1.2
Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Moves focus to each breadcrumb link sequentially. |
| Enter | Activates the link. |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.