Accessibility in Angular Diagram Component
30 Aug 20254 minutes to read
The Diagram component provides built-in compliance with the WAI-ARIA specifications through attributes like aria-label, providing information to 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 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 corner. |
| ResizeSouthWest | Thumb to resize the selected object on the bottom-left corner. |
| ResizeSouthEast | Thumb to resize the selected object on the bottom-right corner. |
| 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 by properly conveying diagram information through ARIA attributes and semantic content structure.
Mobile Device Support
The 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
The 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 up |
| Down Arrow | Move selected object down |
| Left Arrow | Move selected object left |
| Right Arrow | Move selected object 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 accessibility using accessibility tools.