Accessibility in Blazor Kanban Component
9 Apr 20246 minutes to read
The Blazor Kanban component has been designed, keeping in mind the WAI-ARIA specifications, and applies the WAI-ARIA roles, states, and properties. This component is characterized by complete WAI-ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
The Blazor Kanban component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor Kanban 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 | |
| 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 Kanban component followed the WAI-ARIA patterns to meet the accessibility. The following WAI-ARIA attributes are used in the Kanban component:
| Attributes | Purpose |
|---|---|
aria-label |
It helps to provides information about elements in a kanban component for assistive technology. |
aria-expanded |
Attributes indicate the state of a collapsible element. |
aria-selected |
This attribute is assigned to the Kanban component for the selection of elements, and its default value is false. The value changes to true when the user selects a Kanban card. |
aria-grabbed |
Indicates whether the attribute is set to true. It has been selected for dragging. If this attribute is set to false, the element can be grabbed for a drag-and-drop operation but will not be currently grabbed. |
aria-describedby |
This attribute contains the ID of the Kanban header column to indicate that the attribute establishes an association between the Kanban header column and the Kanban column body. |
aria-roledescription |
This attribute is assigned to the Kanban component and is used to provide alternative descriptions for card elements. |
Keyboard interaction
The Blazor Kanban 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 Kanban component.
| Keyboard shortcuts | Actions |
|---|---|
| Home | To select the first card in the kanban |
| End | To select the last card in the kanban |
| Arrow Up | Select the card through the up arrow |
| Arrow Down | Select the card through the down arrow |
| Arrow Right | Move the column selection to the right |
| Arrow Left | Move the column selection to the left |
| Ctrl + Enter | Used to select the multi cards |
| Ctrl + Space | Used to select the multi cards |
| Shift + Arrow Up | Used to select the multiple cards towards up |
| Shift + Arrow Down | Used to select the multiple cards towards down |
| Shift + Tab | Reverse order of the tab action |
| Enter | Open the selected cards |
| Tab | To navigate the Kanban column |
| Delete | To delete the selected cards |
| ESC | Escape from the modified details |
| Space | Used to open the card edit dialog based on the column selection |
Disable keyboard interaction
Disables all the functionalities in the Kanban board performed using keyboard by setting the allowKeyboard properties to false.
Ensuring accessibility
The Blazor Kanban component’s accessibility levels are ensured through an axe-core software tool during automated testing.
The accessibility compliance of the Kanban component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Kanban component with accessibility tools.