Button

A button is a box area or text that communicates and triggers user actions when clicked or selected. Buttons can be used to communicate and immediately trigger actions a user can take in an application, like submitting a form, canceling a process, or creating a new object. Buttons can also be used to take a user to a new location, like another page inside of a web application, or an external site such as help or documentation.

Accessibility

To implement an accessible PatternFly button component:

Ensure the button can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
Provide unique, descriptive text content to the button, or an aria-label if the button does not contain any visible text
Provide context that a link will open in a new tab/window when using a button as a link
Do not place other interactive content inside of a button

For the PatternFly React library:

Include the isAriaDisabled prop if the button is disabled, but should still be focusable

For the HTML/CSS library:

Include the aria-disabled="true" attribute if the button is disabled, but should still be focusable

Testing

At a minimum, a button should meet the following criteria:

Standard keyboard navigation can be used to navigate between buttons or other focusable elements.Tab navigates to the next button or focusable element, and Shift + Tab navigates to the previous button or focusable element.
Standard keyboard interaction can be used to interact with the button.Enter and Space should be able to activate the button. This can usually be achieved by using "click" events.
Each button on a page includes unique and descriptive text, or an aria-label if the button contains no visible text.This ensures that users can more quickly scan through and differentiate buttons on a page, such as when using VoiceOver's rotor menu.
Users are able to tell whether a button as a link will open in a new tab or window.This can be best achieved by rendering an icon for visual context, and passing in visually-hidden text via the pf-screen-reader class.
If a button should be disabled, but remain focusable, it has the aria-disabled="true" attribute instead of the standard disabled attribute.One example for when you should do this is if the button has a tooltip that should be triggered when the button receives focus.
There is no interactive content inside of the button.

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 button]`	`Button`	Adds an accessible name to the button. Required if the button does not contain visible text, such as the `plain` button variant.
`isAriaDisabled`	`Button`	Disables the button, but keeps it perceivable to users. Use this prop instead of `isDisabled` when you want users to still be aware of the button and that it is disabled, or when you expect or intend for the button to receive focus despite being disabled. For example, if the disabled button has a tooltip, you should pass this prop in to disable 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 button]"`	`.pf-c-button`	Adds an accessible name to the button. Required if the button does not contain visible text, such as the `plain` button variant.
`aria-disabled="true"`	`.pf-c-button`	Disables the button, but keeps it perceivable to users. Use this prop instead of `isDisabled` when you want users to still be aware of the button and that it is disabled, or when you expect or intend for the button to receive focus despite being disabled. For example, if the disabled button has a tooltip, you should pass this prop in to disable it.
`tabindex="-1"`	`a.pf-c-button.pf-m-disabled`, `span.pf-c-button.pf-m-link.pf-m-inline.pf-m-disabled`	When a non-button element is used, prevents it from being focusable via keyboard. Required when the element is disabled.
`tabindex="0"`	`span.pf-c-button.pf-m-link.pf-m-inline`	Inserts the `span` into the tab order so that is is focusable via keyboard. Required when the element is a `span`.

Button

Accessibility

Testing

React customization

HTML/CSS customization

Further reading