Accessibility and ARIA Compliance in Blazor Kanban
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 | AA |
| 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:
| Selector | Attribute | Usage |
|---|---|---|
.e-kanban |
role="application", aria-label, aria-roledescription
|
Identifies the Kanban board as an interactive application, provides its accessible name, and supplies an alternative description. |
.e-kanban .e-header-table |
role="table", aria-label
|
Identifies the header table and provides its accessible name. |
.e-kanban .e-content-table |
role="presentation" |
Removes the content table’s native table semantics; its body exposes the grid role. |
.e-kanban .e-content-row |
role="row", aria-expanded
|
Identifies a content or swimlane row and indicates its expanded state. |
.e-kanban .e-header-cells |
aria-expanded |
Indicates whether a Kanban column is expanded or collapsed. |
.e-kanban .e-card-container |
role="listbox", aria-label
|
Identifies the selectable card list for a column and provides its accessible name. |
.e-kanban .e-card |
role="option", aria-selected, aria-grabbed, aria-roledescription
|
Identifies a card as an option, reports its selection and drag state, and provides an alternative description. |
.e-kanban .e-empty-card |
role="option" |
Identifies the empty-card placeholder as an option in the card list. |
.e-kanban .e-content-cells[data-role="kanban-column"] |
aria-label, aria-describedby
|
Provides the column cell’s accessible name and associates the column body with its header. |
.e-kanban .e-header-icon, .e-kanban .e-swimlane-header .e-icons
|
role="button", aria-label
|
Identifies the column and swimlane expand/collapse controls as buttons and provides their accessible names. |
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.