Accessibility in React Diagram component
23 Jan 20245 minutes to read
Diagram provides built-in compliance with the WAI-ARIA specifications. WAI-ARIA Accessibility supports are achieved through the attributes like aria-label. It helps to provides information about elements in a document for assistive technology.
The accessibility compliance for the diagram 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.WAI-ARIA attributes
The Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Diagram component:
| Attributes | Purpose |
|---|---|
aria-label |
Provides an accessible name for the Diagram Objects. |
Aria-label
Attribute provides the text label with some default description for below elements in diagram.
| 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. |
Mobile device support
Syncfusion Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly.
Screen Reader Support
The Diagram component supports and its information was dictated properly by the screen readers based on the ARIA attributes and content.
Keyboard navigation support
Syncfusion Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component.
Keyboard interaction
The Diagram component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Diagram component.
| Command | Action |
|---|---|
| Ctrl + A | Select All |
| Ctrl + X | Cut |
| Ctrl + C | Copy |
| Ctrl + V | Paste |
| Ctrl + Z | Undo |
| Ctrl + Y | Redo |
| Delete | Delete |
| 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 |
| Enter | Start Annotation Edit |
| Escape | End Annotation Edit |
Ensuring accessibility
The Diagram component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Diagram component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Diagram component with accessibility tools.