Accessibility in Blazor Diagram Component

28 Mar 20249 minutes to read

Accessibility in the Blazor diagram component is achieved through compliance with the ADA, Section 508, WCAG 2.2 standards, and 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 Intermediate
Section 508 Support Intermediate
Screen Reader Support Intermediate
Right-To-Left Support Intermediate
Color Contrast Intermediate
Mobile Device Support Yes
Keyboard Navigation Support Yes
Axe-core Accessibility Validation Intermediate
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 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

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.

See also