Breadcrumb
How it works
The Carbon breadcrumb Component provides a way for the user to navigate Web content by providing a group of links to the parent Web pages of the current page in a hierachical order. The breadcrumb is contained within a <nav> element labelled “breadcrumb” using an ARIA label attribute. The landmark region contains an ARIA label, to advise users of assistive technologies that they are navigating a breadcrumb trail. CSS is used for the visual separators between each link so they are not represented in the accessibility tree used by screen readers which helps to prevent redundancy and at times distracting verbosity.
Accessibility considerations
This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.
- The breadcrumb should remain in the same relative order and location on each web page.
- The link text should be clear, reflect the breadcrumb location accurately and easy to understand for all users.
- The link to the current page element in the breadcrumb has an ARIA current attribute. If the current page in the breadcrumb is not a link the ARIA current attribute is optional.
Resources
- W3C WAI-ARIA Authoring Practices Breadcrumb Design Pattern covers the usage of ARIA names, state and roles.
- IBM Accessibility Checklist Checkpoint:
- 2.4.4 Link Purpose (In Context) (WCAG Success Criteria 2.4.4)
- 3.2.3 Consistent Navigation (WCAG Success Criteria3.2.3)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
Automated test Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test:
- No violations
- No violations
macOS screen reader tests
Environment
Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) Test:
- Tab to the breadcrumb and VO announces, "Breadcrumb 1, breadcrumb navigation."
- The Tab key and shift-tab navigate between the links in the breadcrumb. VO announces, "Link Breadcrumb #. You are currently on a link to click this link press Control-Option-Space."
- macOS Mojave version 10.14.6 with VoiceOver
- Safari version 12.14.6
- Carbon React Version 7.7.1
- Safari version 12.14.6
- Carbon React Version 7.7.1
VoiceOver(VO) Test:
- Tab to the breadcrumb and VO announces, "Breadcrumb 1, breadcrumb navigation."
- The Tab key and shift-tab navigate between the links in the breadcrumb. VO announces, "Link Breadcrumb #. You are currently on a link to click this link press Control-Option-Space."
- Note: In Safari > Preferences > Advanced > ensure "Press Tab to highlight each item on a webpage" option is checked.
Windows screen reader tests
Environment
Results
- Microsoft Windows 10
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- JAWS 19.1810.64
- Carbon React version 7.7.1
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- JAWS 19.1810.64
- Carbon React version 7.7.1
JAWS Test:
- Navigate the list with the Up and Down Arrow keys.
- JAWS announces the beginning of the list, number of items in the list, nesting level, content of the list item and end of the list.
- Information and the list item content are announced on two separate lines on the virtual viewer.
- Bullets and item numbers are also placed on a separate line.
- Microsoft Windows 10
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- NVDA 2018.4.1
- Carbon React version 7.7.1
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- NVDA 2018.4.1
- Carbon React version 7.7.1
NVDA test:
- Navigate the list with the Up and Down Arrow keys.
- NVDA announces the beginning of the list, number of items in the list, nesting level, content of the list item.
- End of list, when exiting the list from the top or bottom.
- List item parameters are announced together with the list item content.
Android screen reader tests
Environment
Results
- Android version 9 with Talkback
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- Carbon React version 7.7.1
- Chrome: 71.0.3578.98 (Official Build) (64-bit)
- Carbon React version 7.7.1
Talkback Test:
- Navigate the list by swiping left or right or pressing the Alt key with the Left or Right Arrow key.
- Talkback announces, "in list" when entering the list and "out of list" when exiting the list.
- Talkback also announces entering and exiting the nested lists, the number of list items, nesting level, and contnt of the list item.
- Bullets and numbers are announced separately from the list item content.
iOS screen reader tests
Environment
Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
- Navigate list items by swiping left or right, or using the Left and Right Arrow keys on the keyboard when the quick navigation is turned on.
- VoiceOver announces the beginning of the list, nesting level, content of the list item, the end of the list.
- VoiceOver announces the beginning of the list, nesting level, content of the list item, the end of the list.
- Information about the list, bullets and numbers and list item contents are pronounced separately, we have to navigate through these one by one.