How can I help you?
Accessibility in React ProgressButton component
2 Mar 20264 minutes to read
The ProgressButton component adheres to accessibility standards, including ADA, Section 508, WCAG 2.2, and WCAG roles. These standards ensure the component is usable by all users, including those using assistive technologies.
The following table outlines the accessibility compliance for the ProgressButton component.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
Legend:
- Fully supported
The ProgressButton component follows WAI-ARIA patterns to ensure accessibility. The following ARIA attributes are implemented in the ProgressButton component:
| Attributes | Purpose | Support |
|---|---|---|
aria-label |
Provides an accessible name for the icon-only ProgressButton, essential for screen reader users. | |
aria-disabled |
Indicates the disabled state of the button to assistive technologies. | |
aria-valuemin |
Specifies the minimum value for progress (0) to assistive technologies. | |
aria-valuemax |
Specifies the maximum value for progress (100) to assistive technologies. | |
aria-valuenow |
Indicates the current progress percentage to screen readers. | |
Keyboard interaction
The ProgressButton component implements keyboard interaction guidelines to support users relying on keyboard navigation or assistive technologies. The following keyboard shortcuts are supported:
| Press | To do this |
|---|---|
| Enter | Starts the progress when the button has focus. |
| Space | Starts the progress when the button has focus. |
| Tab | Moves focus to the next focusable element; shift+Tab moves to previous element. |
| Escape | Stops or cancels the progress operation. |
Ensuring accessibility
The ProgressButton component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the ProgressButton component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the ProgressButton component with accessibility tools.