Skip to content

Latest commit

 

History

History
69 lines (50 loc) · 3.77 KB

breadcrumb.md

File metadata and controls

69 lines (50 loc) · 3.77 KB
Raw
id section
Breadcrumb
components

import { Checkbox, List, ListItem } from '@patternfly/react-core';

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 multiple nav 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.} /> The breadcrumb has an aria-label if there are other nav elements or breacrumbs on the page.} description="This helps users of assistive technologies to differentiate between multiple navigational elements." /> The breadcrumb item whose page is currently active has the aria-current="page" attribute.} description="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 that labels 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 that labels the breadcrumb]" .pf-v5-c-breadcrumb Adds an accessible name to the breadcrumb's internal nav element.
aria-current="page" .pf-v5-c-breadcrumb__item, .pf-v5-c-breadcrumb__link Indicates the current page to users of assistive technologies.