Tabs

Tabs allow users to navigate between views within the same page or context.

Accessibility

To implement accessible PatternFly tabs:

Ensure each tab within a set of tabs contains unique text.

Testing

At a minimum, tabs should meet the following criteria:

Each tab within a set of tabs contains unique text.
The active tab has the attribute aria-selected with a value of "true", while all other tabs within a set of tabs have a value of "false".This notifies users navigating via screen readers which tab is currently selected and when a new tab has been selected.
The tab content of any inactive tabs has the hidden attribute.
Standard keyboard navigation can be used to navigate between each tab within a set of tabs or other focusable elements.Tab navigates to the next tab or focusable element, and Shift + Tab navigates to the previous tab or focusable element.
Each tab can be selected via keyboard by pressing Space or Enter.If a tab has the href attribute, then only Enter should activate the tab.
When a set of tabs creates an overflow and one of the tabs has focus, pressing Left Arrow or Right Arrow scrolls the tablist.
If there are multiple sets of tabs on a page, each set of tabs has a unique aria-label.This provides better context to users navigating via landmarks with a screen reader, as it will differentiate each set of tabs.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`title="[label for the tab]"`	`Tab`	Sets the text label of the tab. Each tab within a set of tabs should have unique text passed into its `title` prop.
`isDisabled`	`Tab`	Disables the tab and prevents it from being perceivable and operable by users navigating via assistive technologies. Use this prop to disable a tab if you don't expect or intend for the tab to ever need to receive focus. For example, if the tab will never have a tooltip, you should pass this prop in to disable it.
`isAriaDisabled`	`Tab`	Disables the tab, but keeps the tab perceivable to users. Use this prop instead of `isDisabled` when you want users to still be aware of the tab and that it is disabled, or when you expect or intend for the tab to receive focus despite being disabled. For example, if the disabled tab has a tooltip, you should pass this prop in to disable it.
`inoperableEvents={[array of events to prevent]}`	`Tab`	Prevents events from firing when the `isAriaDisabled` prop is also passed in. Since the `aria-disabled` attribute doesn't change the behavior of an element, any events must be manually prevented. By default the value is `["onClick", "onKeyPress"]`.
`closeButtonAriaLabel="[text describing a tab close button]"`	`Tab`	Adds an accessible name to the close button of a closeable tab when the `onClose` prop is passed into the Tabs sub-component. The value passed in should indicate that the button will close a tab and which tab will be closed. For example, "Close users tab".
`aria-label="[text describing the tab content]"`	`TabContent`	Adds an accessible name to the tab content when this sub-component is used outside the Tabs sub-component. The value passed in should generally indicate the title of the tab that the content is related to. For example, if a `TabContent` is related to a tab with a title of "Users", you could pass in "Content for users tab" as a value to this prop.
`addButtonAriaLabel="[text describing the tabs add button]"`	`Tabs`	Adds an accessible name to the add button when the `onAdd` prop is also passed in. The value passed in should generally indicate that the button will add a tab to the tablist, and optionally which tablist the tab will be added to. When this prop is not passed in and an add button is rendered, the default `aria-label` on the button will be set to "Add tab".
`aria-label="[text describing the tabs component]"`	`Tabs`	Adds an accessible name to the entire set of tabs. Each set of tabs should have a unique accessible name on a page. The value passed in should generally indicate the primary purpose or content of the tablist.
`isExpanded`	`Tabs`	Adds styling to visually determine whether the toggle for a tablist is expanded or collapsed when the `isVertical` prop is also passed in. Also sets the accessibility attribute `aria-expanded` with a value of "true" or "false", which notifies screen readers whether the toggle is expanded ("true") or collapsed ("false").
`leftScrollAriaLabel="[text describing the left scroll button]"`	`Tabs`	Adds an accessible name to the left scroll button when an overflow of tabs occurs. The value passed in should indicate that the button will scroll the tablist left. The default value is "Scroll left".
`rightScrollAriaLabel="[text describing the right scroll button]"`	`Tabs`	Adds an accessible name to the right scroll button when an overflow of tabs occurs. The value passed in should indicate that the button will scroll the tablist right. The default value is "Scroll right".
`toggleAriaLabel="[text describing the toggle]"`	`Tabs`	Adds an accessible name to the expandable toggle when the `isVertical` prop is also passed in. If the `toggleText` prop is not passed in, this prop must be passed in.
`toggleText="[label for a vertical tabs toggle]"`	`Tabs`	Sets the visible text label for the expandable toggle when the `isVertical` prop is also passed in.

Tab icons

When adding an icon to a tab's title prop, you should ensure the icon has the aria-hidden="true" attribute if there is accompanying title text so that the icon will be removed from the accessibility tree. This will prevent assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it.

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 tabs component]"`	`.pf-c-tabs`	Adds an accessible name to the entire set of tabs. Each set of tabs should have a unique accessible name on a page. The value passed in should generally indicate the primary purpose or content of the tablist.
`aria-label="[text describing the tabs add button]"`	`.pf-c-tabs__add .pf-c-button.pf-m-plain`	Adds an accessible name to the add button of the tabs component when a tab can by dynamically added. The value passed in should generally indicate that the button will add a tab to the tablist, and optionally which tablist the tab will be added to.
`aria-label="[text describing a tab close button]"`	`.pf-c-tabs__item-close .pf-c-button.pf-m-plain`	Adds an accessible name to the close button of a closeable tab. The value passed in should indicate that the button will close a tab and which tab will be closed. For example, "Close users tab".
`aria-controls="[id of the tab content controlled by the tab]"`	`.pf-c-tabs__link`	Indicates which tab content panel is controlled by the tab by passing in the ID of the tab content panel as a value. Required.
`aria-disabled="true"`	`.pf-c-tabs__link.pf-m-aria-disabled`	Disables the tab, but keeps the tab perceivable to users. Use this attribute instead of `disabled` when you want users to still be aware of the tab and that it is disabled, or when you expect or intend for the tab to receive focus despite being disabled. For example, if the disabled tab has a tooltip, you should pass this prop in to disable it. When using this attribute, additional steps must be taken via JavaScript to prevent events from firing on the element.
`aria-selected="false"`	`.pf-c-tabs__link`	Indicates to assistive technologies that a tab is not selected. Required on all tab components that are not currently selected.
`aria-selected="true"`	`.pf-c-tabs__link`	Indicates to assistive technologies that a tab is selected. Required when a tab is currently selected.
`disabled`	`.pf-c-tabs__link`	Disables the tab and prevents it from being perceivable and operable by users navigating via assistive technologies. Use this attribute to disable a tab if you don't expect or intend for the tab to ever need to receive focus. For example, if the tab will never have a tooltip, you should pass this prop in to disable it.
`role="tab"`	`.pf-c-tabs__link`	Adds a tab role to the component. Required.
`role="tabslist"`	`.pf-c-tabs__list`	Adds a tablist role to the component. Required.
`aria-hidden="true"`	`.pf-c-tabs__scroll-button`	Removes the scroll button from the accessibility tree to prevent assistive technologies from being able to place focus on it. This is only added because the tabs list will automatically scroll as focus is placed on each tab.
`disabled`	`.pf-c-tabs__scroll-button`	Adds styling to indicate that a scroll button is disabled. Required on the applicable scroll button when the tabs list is scrolled all the way to the first or last tab.
`aria-expanded="[true or false]"`	`.pf-c-tabs__toggle-button .pf-c-button.pf-m-plain`	Indicates whether an expandable, vertical tabs toggle is expanded (true) or collapsed (false) to assistive technologies. Required.
`aria-label="[text describing the toggle]"`	`.pf-c-tabs__toggle-button .pf-c-button.pf-m-plain`	Adds an accessible name to the expandable tabs toggle.
`aria-hidden="true"`	`.pf-c-tabs__toggle-icon i`	Removes the toggle icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required.
`aria-label="[text describing the tab content]"`	`.pf-c-tab-content`	Adds an accessible name to the tab content panel. The value passed in should generally indicate the title of the tab that the content is related to. For example, if a tab content panel is related to a tab with a title of "Users", you could pass in "Content for users tab" as a value to this attribute. Either this or the `aria-labelledby` attribute can be used, but do not use both.
`aria-labelledby="[id of the element that labels the tab content]"`	`.pf-c-tab-content`	Adds an accessible name to the tab content panel. The value passed in should be the ID of the related tab component. Either this or the `aria-labelledby` attribute can be used, but do not use both.
`role="tabpanel"`	`.pf-c-tab-content`	Adds a tabpanel role to the component. Required.
`tabindex="0"`	`.pf-c-tab-content`	Allows users navigating via keyboard to place focus on the tab content panel. Required.

Additional considerations

Consumers must ensure they take any additional considerations when customizing tabs, using them in a way not described or recommended by PatternFly, or in various other specific use-cases not outlined elsewhere on this page.

If a tab's title consists of only an icon without any accompanying title text, the tab sub-component should have the tooltip prop passed in to provide visual context and an accessible name. For information regarding accessibility with a tooltip, read the tooltip accessibility documentation.