Accessibility in EJ2 TypeScript Kanban control

24 Jan 20249 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.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Intermediate
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Intermediate
Axe-core Accessibility Validation Yes

Yes - All features of the component meet the requirement.

Intermediate - Some features of the component do not meet the requirement.

No - 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

Disable keyboard interaction

Disables all the functionalities in the Kanban board performed using keyboard by setting the allowKeyboard properties to false.

import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    allowKeyboard: false,
    columns: [
        { headerText: 'Backlog', keyField: 'Open', allowToggle: true },
        { headerText: 'In Progress', keyField: 'InProgress', allowToggle: true },
        { headerText: 'Testing', keyField: 'Testing', allowToggle: true },
        { headerText: 'Done', keyField: 'Close', allowToggle: true }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    swimlaneSettings: {
        keyField: 'Assignee'
    }
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Disable Keyboard Functionalities</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Disable Kanban keyboard functionalities" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>

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.

See also