Accessibility in React Gantt component

2 Feb 20235 minutes to read

Accessibility is achieved in the Gantt component through the WAI-ARIA standard and keyboard navigations. The Gantt features can be effectively accessed through assistive technologies such as screen readers. It is also available with a built-in keyboard navigation support; it makes accessibility easier for the people who use assistive technologies or who completely rely on the Keyboard support.

WAI-ARIA

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. It helps to provide information about elements in a document for assistive technology.

The following ARIA attributes are used in Gantt:

Attributes Description
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

Gantt functionalities can be interactive with keyboard shortcuts.

The following keyboard shortcuts are supported by Gantt.

Interaction Keys Description
Home Selects the first row.
End Selects the last row.
DownArrow Moves the cell focus/row or cell selection downward.
UpArrow Moves the cell focus/row or cell selection upward.
LeftArrow Moves the cell focus/row or cell selection left side.
RightArrow Moves the cell focus/row or 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 row/cell selection downwards.
Shift + UpArrow Extends the row/cell selection upwards.
Shift + LeftArrow Extends the cell selection to the left side.
Shift + RightArrow Extends the cell selection to the right side.