Accessibility in Vue Gantt component

27 Jan 20247 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 followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component.

Press To do this
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.
Tab / Shift + Tab To focus the close icon in the message.
Alt + j Focus 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