Accessibility in React Kanban component
24 Jan 20246 minutes to read
The 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 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 component is outlined below.
- 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 Kanban component followed the WAI-ARIA patterns to meet the accessibility. The following 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 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.
| 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 |
Ensuring accessibility
The Kanban component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools 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.