Accessibility in Blazor Kanban Component
8 Oct 20256 minutes to read
The Blazor Kanban component is built in accordance with WAI-ARIA specifications, incorporating appropriate roles, states, and properties. It offers full accessibility support for users relying on assistive technologies (AT) or keyboard navigation.
It adheres to key accessibility standards including ADA, Section 508, WCAG 2.2 and WCAG roles , ensuring inclusive design and usability.
The following table summarizes the accessibility compliance of the Blazor Kanban component:
| 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.
| Windows | Mac | Actions |
|---|---|---|
| Home | Home | To select the first card in the kanban |
| End | End | To select the last card in the kanban |
| ↑ | ↑ | Select the card through the up arrow |
| ↓ | ↓ | Select the card through the down arrow |
| → | → | Move the column selection to the right |
| ← | ← | Move the column selection to the left |
| Ctrl + Enter | ⌘ + Enter | Used to select the multi cards |
| Ctrl + Space | ⌘ + Space | Used to select the multi cards |
| Shift + ↑ | ⇧ + ↑ | Used to select the multiple cards towards up |
| Shift + ↓ | ⇧ + ↓ | Used to select the multiple cards towards down |
| Shift + Tab | ⇧ + Tab | Reverse order of the tab action |
| Enter | Enter | Open the selected cards |
| Tab | Tab | To navigate the Kanban column |
| Delete | Delete | To delete the selected cards |
| ESC | Esc | Escape from the modified details |
| Space | Space | Used to open the card edit dialog based on the column selection |
Disable keyboard interaction
To disable all keyboard-based interactions in the Kanban board, set the allowKeyboard property to false. This may impact accessibility for users relying on keyboard navigation or assistive technologies.
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.