Accessibility in React Image Editor
4 Sep 20263 minutes to read
The React Image Editor component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WCAG roles commonly used to evaluate accessibility.
The accessibility compliance for the React Image Editor component is outlined below.
- 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.Keyboard interaction
The React Image Editor component follows keyboard interaction guidelines to support assistive technologies and keyboard-only users. The following keyboard shortcuts are supported by the React Image Editor component (enabled by default).
| Press | Action |
|---|---|
| Ctrl + Z | Undo last action |
| Ctrl + Y | Redo last action |
| Ctrl + S | Save image |
| Ctrl + O | Open image |
| Delete | Delete selected shape |
| Enter | Apply selection crop or resize image |
| Escape | Discard current operation |
Ensuring accessibility
Verify accessibility using automated tools and manual testing. Common test packages include axe-core (used via test integrations like jest-axe) and the accessibility-checker tools.
You can also run the accessibility-checker CLI against the live sample to get a report.
The accessibility compliance of the React Image Editor component is shown in the following sample. Open the sample in a new window to evaluate the component with accessibility tools.