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