Accessibility in Blazor Diagram Component
29 Nov 20249 minutes to read
Accessibility in the Blazor diagram component is achieved through compliance with the ADA, Section 508, and WCAG 2.2 standards, as well as WCAG roles and support for keyboard navigation. This ensures that users can effectively interact with the diagram features using assistive technologies such as screen readers.
The accessibility compliance for the Blazor diagram component is outlined below:
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support |  |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- 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 Blazor Diagram component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Diagram component:
| Attributes | Purpose |
|---|---|
aria-label |
Provides an accessible name for the Diagram Objects. |
Aria-label
The 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. |
Keyboard Navigation
The Blazor 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 Blazor Diagram component.
| Interaction Keys | Description |
|---|---|
| Ctrl+C | Copy the selected diagram elements to the clipboard. |
| Ctrl+X | Cut the selected diagram elements to the clipboard. |
| Ctrl+V | Paste the diagram elements from the clipboard. |
| Ctrl+A | Select all the diagram elements. |
| Delete | Delete the selected diagram elements. |
| Ctrl+P | Print the diagram page. |
| Ctrl+Z | Undo the last action. |
| Ctrl+Y | Redo the last undo action. |
| ArrowUp | Move the selected diagram elements upwards by the specified delta value. |
| ArrowDown | Move the selected diagram elements downwards by the specified delta value. |
| ArrowRight | Move the selected diagram elements to the right by the specified delta value. |
| ArrowLeft | Move the selected diagram elements to the left by the specified delta value. |
| F2 | Start editing the selected diagram elements. |
| Ctrl++ | Zoom in the diagram. |
| Ctrl+- | Zoom out the diagram. |
| Ctrl+B | Toggle bold formatting for the selected text. |
| Ctrl+I | Toggle italic formatting for the selected text. |
| Ctrl+U | Toggle underline formatting for the selected text. |
| Ctrl+Shift+Right Angle Bracket (>) | Increase the font size of the selected text. |
| Ctrl+Shift+Left Angle Bracket (<) | Decrease the font size of the selected text. |
| Ctrl+Shift+L | Align the selected text to the left. |
| Ctrl+Shift+C | Center the selected text horizontally. |
| Ctrl+Shift+R | Align the selected text to the right. |
| Ctrl+Shift+J | Justify the selected text, aligning it to both the left and right margins. |
| Ctrl+Shift+E | Align the selected text to the top vertically. |
| Ctrl+Shift+M | Center the selected text vertically. |
| Ctrl+Shift+V | Align the selected text to the bottom vertically. |
| Ctrl+G or Ctrl+Shift+G | Group selected shapes together, treating them as a single shape. |
| Ctrl+Shift+U | Ungroup shapes within a previously grouped selection. |
| Ctrl+Shift+F | Bring the selected shape forward in the stacking order. |
| Ctrl+Shift+B | Send the selected shape backward in the stacking order. |
| Ctrl+] | Move the selected node, connector, and group over the nearest overlapping node, connector, or group. |
| Ctrl+[ | Move the selected node, connector, and group behind the underlying node, connector, or group. |
| Ctrl+L | Rotate the selected nodes counterclockwise. |
| Ctrl+R | Rotate the selected nodes clockwise. |
| Ctrl+H | Flip the selected diagram elements horizontally. |
| Ctrl+J | Flip the selected diagram elements vertically. |
| Tab | Select the diagram elements forward based on the rendering order. |
| Shift + Tab | Select the diagram elements backward based on the rendering order. |
| Ctrl+D | Duplicate the selected shape. |
| Enter | Perform annotation editing for the selected diagram element. |
| Ctrl+1 | Activate the pointer tool. |
| Ctrl+3 | Activate the connector tool. |
| Ctrl+2 | Activate the text tool. |
| Ctrl+8 | Activate the rectangle tool. |
| Ctrl+6 | Activate the line tool. |
| Ctrl+5 | Activate the free form tool. |
| Ctrl+9 | Activate the ellipse tool. |
NOTE
You can download a complete working sample for keyboard navigation from GitHub
Ensuring accessibility
The Blazor diagram component’s accessibility levels are ensured through an axe-core with playwright tests.
The accessibility compliance of the Blazor diagram component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor diagram component with accessibility tools.