Breadcrumb
How it works
The Breadcrumb component implements the
Breadcrumb design pattern from WAI ARIA
for Carbon. It establishes a landmark on the page which assists the user in
understanding where they currently are and which pages exist in the current
page’s hierarchical order.
The landmark is provided through the <nav> element which contains a list of
links. The <nav> element is labeled by the aria-labelattribute, providing a
chance to describe to the user the type of navigation provided by the list of
links. The current page is identified with the aria-current="page" attribute
on the appropriate link.
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 the
aria-current="page"attribute.
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 Design System 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 content 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.