Accessibility in ASP.NET Core Kanban control
18 Nov 20186 minutes to read
The Kanban control has been designed, keeping in mind the WAI-ARIA specifications, and applies the WAI-ARIA roles, states, and properties. This control is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
The accessibility compliance for the Kanban control is outlined below.
| 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 Support | |
| Accessibility Checker Validation | |
- All features of the control meet the requirement.
- Some features of the control do not meet the requirement.
- The control does not meet the requirement.
WAI-ARIA attributes
The Kanban control followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Kanban control:
| Attributes | Purpose |
|---|---|
aria-label |
It helps to provides information about elements in a kanban control for assistive technology. |
aria-expanded |
Attributes indicate the state of a collapsible element. |
aria-selected |
This attribute is assigned to the Kanban control 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 control and is used to provide alternative descriptions for card elements. |
Keyboard interaction
The Kanban control 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 control.
| Press | To do this |
|---|---|
| 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 Kanban control accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Kanban control is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Kanban control with accessibility tools.