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.

Accessibility Criteria Compatibility
WCAG 2.2 Support intermediate
Section 508 Support intermediate
Screen Reader Support Yes
Right-To-Left Support No
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support intermediate
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - 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.

See also