Accessibility in Vue Gantt component
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 |  |
| Section 508 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 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.