Accessibility in React Speed Dial
4 Sep 20265 minutes to read
The React Speed Dial 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 React Speed Dial 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 React Speed Dial component follows WAI-ARIA patterns to ensure accessibility. The following ARIA attributes are implemented in the React Speed Dial component:
| Attributes | Purpose | Support |
|---|---|---|
role="menu" |
Defines the menu semantic role for the React Speed Dial popup container. | |
role="menuitem" |
Defines the menu item semantic role for individual React Speed Dial action items. | |
aria-label |
Provides an accessible name for the React Speed Dial button or action items. | |
aria-expanded |
Indicates whether the React Speed Dial popup is currently open (true) or closed (false). | |
aria-haspopup |
Indicates that the React Speed Dial button has an associated popup menu. | |
aria-controls |
References the popup element controlled by the React Speed Dial button for screen readers. | |
aria-disabled |
Indicates whether a React Speed Dial action item is disabled and cannot be activated. | |
Keyboard interaction
The React Speed Dial 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 | Opens or closes the React Speed Dial popup menu. |
| Space | Opens or closes the React Speed Dial popup menu. |
| Up Arrow | Moves focus to the previous action item in the menu. |
| Down Arrow | Moves focus to the next action item in the menu. |
| Left Arrow | Moves focus to the previous action item in the menu. |
| Right Arrow | Moves focus to the next action item in the menu. |
| Home | Moves focus to the first action item in the menu. |
| End | Moves focus to the last action item in the menu. |
| Escape | Closes the React Speed Dial popup menu. |
Ensuring accessibility
The React Speed Dial component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the React Speed Dial component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the React Speed Dial component with accessibility tools.