Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter, Space | When focus is on the breadcrumb, opens the link. |
Roles & attributes
The list below describes roles and attributes that component already has.
| Attribute | Element | Usage |
|---|---|---|
nav | The nav element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. | |
aria-label="Breadcrumbs" | nav | Provides a label for the group of links that describes the type of navigation provided. |
aria-current="page" | a | Applied to the last link in the set to indicate that it represents the current page. |
Considerations for designers & developers
Don't forget to check that long text in links is truncated with an ellipsis, and the full text is displayed in a tooltip when there isn't enough space.
Resources
- W3 breadcrumbs example has detailed information about the breadcrumbs accessible behavior.
- A11y style guide gives recommendations for the accessible components.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.