Accessibility in EJ2 JavaScript Gantt control

4 Jul 20248 minutes to read

The Gantt component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Gantt component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate
Section 508 Support Yes
Screen Reader Support Intermediate
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
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 Gantt component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Gantt component:

The following ARIA attributes are used in Gantt:

Attributes Purpose
grid (role) This attribute is added to the e-table element present in the Gantt, which represents Grid part
gridcell (role) This attribute is added to the td elements present within the e-table, which represents the work cells of Gantt
columnheader (role) This attribute is added to the th elements within the e-table, which represents the header cells of Grid table
separator (role) This attribute is added to the e-split-bar element, which represents the splitter between the Grid table and Chart
dialog (role) This attribute is added to the e-dialog element, which represents the pop-up dialog
toolbar (role) This attribute is added to the e-gantt-toolbar element, which represents the toolbars of Gantt
aria-label It indicates the element’s information<br> It is assigned to the Gantt UI elements such as timeline cell, taskbar, left label, right label, dependency line, and event markers.
aria-selected This attribute is assigned to the Gantt chart row, and it defaults to false. The value is changed to true when the user selects a grid cell or task
aria-expanded This attribute is assigned to the Gantt chart parent task row. The value is changed to true when the user clicks a parent taskbar to expand. After the user clicked a parent taskbar to collapse, the attribute value is changed to false
aria-grabbed This attribute is assigned to the taskbars of Gantt when the user tries to achieve taskbar editing

Keyboard navigation

The Gantt component follows the keyboard interaction guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component:

Press To do this
Alt + J Focus Gantt component.
Tab / Shift + Tab Focus the next or previous element.
Home Selects the first row.
End Selects the last row.
DownArrow Moves the row selection downward.
UpArrow Moves the row selection upward.
LeftArrow Moves the cell focus/cell selection left side.
RightArrow Moves the cell focus/cell selection right side.
Ctrl + Up Arrow Collapses all tasks.
Ctrl + Down Arrow Expands all tasks.
Ctrl + Shift + Up Arrow Collapses the selected row.
Ctrl + Shift + Down Arrow Expands the selected row.
Enter Saves request.
Esc Cancels request.
Insert Adds a new row.
Ctrl + Insert Opens addRowDialog.
Ctrl + F2 Opens editRowDialog.
Delete Deletes the selected row.
Shift + F5 FocusTask
Ctrl + Shift + F Focus search
Shift + DownArrow Extends the cell selection downwards.
Shift + UpArrow Extends the cell selection upwards.
Shift + LeftArrow Extends the cell selection to the left side.
Shift + RightArrow Extends the cell selection to the right side.
Ctrl + Z Undo the last action.
Ctrl + Y Redo the last action.

Navigate between toolbar items using keyboard

In the Gantt component, follow these steps to navigate between toolbar items using the keyboard:

Step 1: Press ALT + J to focus on the gantt component.
Step 2: Press the Tab key to navigate to the first item in the toolbar.
Step 3: Use the LeftArrow or RightArrow keys to move between toolbar items.
Step 4: Press Tab key again to remove focus from the toolbar and return focus to the Gantt component.

Ensuring accessibility

The Gantt component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Gantt component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Gantt component with accessibility tools.

See also