Accessibility
To implement an accessible PatternFly breadcrumb component:
- Give each item in the breadcrumb concise, descriptive text
- Ensure each breadcrumb item can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
- Provide context to notify users if a breadcrumb item will open in a new tab or window
- Provide an
aria-label
to the breadcrumb if there are multiplenav
elements or breadcrumb components on the page - Follow the accessibility documentation for any other components used within a breadcrumb, such as a dropdown used within a breadcrumb item
For the PatternFly React library:
- Pass in the
isActive
prop to the breadcrumb item whose page is currently active
For the HTML/CSS library:
- Pass in the
aria-current="page"
attribute to the breadcrumb item whose page is currently active
Testing
At a minimum, a breadcrumb should meet the following criteria:
- Tab navigates to the next breadcrumb item or focusable element, and Shift + Tab navigates to the previous breadcrumb item or focusable element.
- This can be best achieved by rendering an icon for visual context, and passing in visually-hidden text via the
pf-screen-reader
class. - This helps users of assistive technologies to differentiate between multiple navigational elements.
- This notifies users of assistive technologies which breadcrumb item corresponds to the page they are currently on.
React customization
The following React props have been provided for more fine-tuned control over accessibility.
Prop | Applied to | Reason |
---|---|---|
aria-label="[text describing the breadcrumb]" | Breadcrumb | Adds an accessible name to the breadcrumb's internal nav element. |
isActive | BreadcrumbItem | Sets the aria-current attribute on the breadcrumb item, which indicates the current page to users of assistive technologies. |
HTML/CSS customization
The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.
Attribute or class | Applied to | Reason |
---|---|---|
aria-label="[text describing the breadcrumb]" | .pf-c-breadcrumb | Adds an accessible name to the breadcrumb's internal nav element. |
aria-current="page" | .pf-c-breadcrumb__item , .pf-c-breadcrumb__link | Indicates the current page to users of assistive technologies. |
View source on GitHub