How can I help you?
Accessibility in Vue Gantt Chart Component
3 Feb 20268 minutes to read
The Gantt Chart 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 Chart component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| https://www.section508.gov Support |  |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- 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 Gantt Chart component followed the WAI-ARIA patterns to meet accessibility.
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 |
Indicates the element’s information. Assigned to timeline cells, taskbars, labels, dependency lines, and event markers. |
aria-selected |
Assigned to the Gantt chart row. Defaults to false, becomes true on selection. |
aria-expanded |
Assigned to the parent task row; changes on expand/collapse. |
aria-grabbed |
Assigned when the user starts taskbar editing. |
Keyboard navigation
The Gantt Chart 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 Chart 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 selection left. |
| RightArrow | Moves the cell selection right. |
| 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 downward. |
| Shift + UpArrow | Extends the cell selection upward. |
| Shift + LeftArrow | Extends the cell selection left. |
| Shift + RightArrow | Extends the cell selection right. |
| Ctrl + Z | Undo. |
| Ctrl + Y | Redo. |
Navigate between toolbar items using keyboard
Step 1: Press ALT + J to focus on the Gantt component
Step 2: Press Tab to move to the first toolbar item
Step 3: Use LeftArrow / RightArrow to navigate
Step 4: Press Tab again to move focus back to Gantt
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.