Accessibility in Angular Diagram
02 Sep 20265 minutes to read
The Angular Diagram component provides built-in compliance with the WAI-ARIA specifications through the aria-label attribute, providing information to assistive technologies such as screen readers.
The following table outlines accessibility compliance for the Angular 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 following ARIA attributes are used in the Angular Diagram component:
| Attributes | Purpose |
|---|---|
aria-label |
Provides an accessible name for Angular Diagram objects. |
Aria-label
The aria-label attribute provides text labels with default descriptions for the following elements in the Angular 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. |
| ResizeSouth | Thumb to resize the selected object on the bottom side. |
| ResizeWest | Thumb to resize the selected object on the left side. |
| ResizeEast | Thumb to resize the selected object on the right side. |
| 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 Angular Diagram component supports screen readers by properly conveying diagram information through ARIA attributes and semantic content structure.
Right-To-Left Support
Right-To-Left (RTL) rendering is not supported in the Diagram component.
Color Contrast
The Angular Diagram component relies on the applied theme for color contrast and meets WCAG contrast requirements when using the built-in themes.
WCAG 2.2 and Section 508 support is partial; see the compliance table links for the list of supported and unsupported criteria.
Mobile Device Support
The Angular 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 Angular Diagram component supports keyboard navigation, allowing users who rely on assistive technologies to navigate and interact with the component effectively. Some advanced interactions are partially supported, as indicated by the Intermediate rating in the compliance table.
Keyboard Interaction
The Angular Diagram component follows WCAG 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 Angular Diagram component’s accessibility levels are validated through accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Angular Diagram component is demonstrated in the following sample. Open the sample in a new window to evaluate accessibility using accessibility tools.