Button
How it works
The Button component is used to trigger an action or event, such as submitting
a form, opening a modal, canceling an action, or performing an add or delete
operation. Almost all interactions in the Carbon Design System are implemented
using the native <button> element.
By default, interactive elements like <button> are included in the tab order
of the document. When a button has focus, both the Space and Enter keys will
activate the button. If the button is disabled, then the disabled attribute is
provided.
The label for a button can be computed by the contents of the underlying
<button>, or provided by the aria-label or aria-labelledby attributes.
Additional information about the button may be supplied by the
aria-describedby attribute.
Accessibility considerations
This component has been validated to meet the WCAG 2.1 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 button can be activated using both the
SpaceorEnterkey. - The button should have text or label that accurately describes the action of the button.
- If a description of the button’s function is present, the button element
should have an
aria-describedbyset to the ID of the element containing the description. - After the button is activated ensure the focus is set correctly based on the type of action the button performs. See W3C WAI-ARIA Authoring Practices Button Design Pattern for a list of examples.
Resources
- W3C WAI-ARIA Authoring Practices Button Design Pattern covers the usage of ARIA names, state and roles, as well as the expected keyboard interactions.
- IBM Accessibility Checklist Checkpoint:
- 2.4.7 Focus Visible (WCAG Success Criteria 2.4.7)
- 3.2.2 On Input (WCAG Success Criteria 3.2.2)
Accessibility testing
Accessibility issues are tracked in the Carbon Design System GitHub repository.
Automated test
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- No violations
macOS screen reader tests
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Tab to the first button, VO announces, "The button label".
- Clicking the Enter or Space key activates the button.
- Safari version 13.0.2
- Carbon React version 7.7.1
- Tab to the first button, VO announces, "The button label".
- Clicking the Enter or Space key activates the button.
Windows screen reader tests
- Firefox version 67
- JAWS 19.1810.64
- Carbon React version 7.7.1
- Tab to the first button, JAWS announces, "The button label".
- Clicking the Enter or Space key activates the button.
- Chrome Version 73.0.3683.68 (Official Build) (64-bit)
- JAWS Version 19.1810.64
- Carbon React version 7.7.1
- Tab to the first button, JAWS announces, "The button label".
- Clicking the Enter or Space key activates the button.
- Chrome Version 73.0.3683.68 (Official Build) (64-bit)
- NVDA Version 2018.4.1
- Carbon React version 7.7.1
- Tab to the first button, NVDA announces, "The button label".
- Clicking the Enter or Space key activates the button.
iOS screen reader tests
- Safari version 13.1.3
- Carbon React version 7.7.1
- Tab to the first button, VO announces, "The button label".
- Clicking the Enter or Space key activates the button.
Android screen reader tests
- Chrome version 72.0.3683.68 (Official Build) (64-bit)
- Carbon React version 7.7.1
- Tab to the first button, Talkback announces, "The button label".
- Clicking the Enter or Space key activates the button.