Accessibility in React Diagram Component
21 Oct 20254 minutes to read
The Diagram component provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA accessibility support is achieved through attributes like aria-label, which provide information about elements in a document for assistive technologies such as screen readers.
The following table outlines accessibility compliance for the Diagram component:
- 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
The Diagram component follows [WAI-ARIA] patterns to meet accessibility requirements. The following ARIA attributes are used in the Diagram component:
| Attributes | Purpose |
|---|---|
aria-label |
Provides an accessible name for the Diagram Objects. |
Aria-Label
The aria-label attribute provides text labels with default descriptions for the following elements in the Diagram component:
| Element | Default description |
| ResizeNorthWest | Thumb to resize the selected object on the top-left corner. |
| ResizeNorthEast | Thumb to resize the selected object on the top-right side direction. |
| ResizeSouthWest | Thumb to resize the selected object on the bottom-left side direction. |
| ResizeSouthEast | Thumb to resize the selected object on the bottom-right side direction. |
| ResizeNorth | Thumb to resize the selected object on the top side direction. |
| ResizeSouth | Thumb to resize the selected object on the bottom side direction. |
| ResizeWest | Thumb to resize the selected object on the left side direction. |
| ResizeEast | Thumb to resize the selected object on the right side direction. |
| ConnectorSourceThumb | Thumb to move the source point of the connector. |
| ConnectorTargetThumb | Thumb to move the target point of the connector. |
| RotateThumb | Thumb to rotate the selected object. |
Screen Reader Support
The Diagram component supports screen readers, and its information is properly conveyed by screen readers based on ARIA attributes and content structure.
Mobile Device Support
Syncfusion® Diagram component is designed to be user-friendly and accessible on mobile devices, including for users with disabilities. The component is responsive, adapts to various screen sizes and orientations, and provides touch-friendly interactions.
Keyboard Navigation Support
Syncfusion® Diagram component supports keyboard navigation, allowing users who rely on assistive technologies to navigate and interact with the component effectively.
Keyboard Interaction
The Diagram component follows keyboard interaction guidelines, making it accessible for users who rely on keyboard navigation. The following keyboard shortcuts are supported:
Selection and Clipboard Operations
| Command | Action |
| — | — |
| Ctrl + A | Select All |
| Ctrl + X | Cut |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
Edit Operations
| Command | Action |
| — | — |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Delete | Delete |
Navigation and Movement
| Command | Action |
| — | — |
| Up Arrow | Move selected object to up |
| Down Arrow | Move selected object to down |
| Left Arrow | Move selected object to left |
| Right Arrow | Move selected object to right |
Annotation Editing
| Command | Action |
| — | — |
| Enter | Start Annotation Edit |
| Escape | End Annotation Edit |
Ensuring Accessibility
The Diagram component’s accessibility levels are validated through accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Diagram component is demonstrated in the following sample. Open the sample in a new window to evaluate the accessibility of the Diagram component with accessibility tools.