Accessibility in Vue Gantt Chart Component

22 May 20269 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.

The Syncfusion Vue Gantt Chart component is structured using a combined TreeGrid and chart architecture for rendering its grid (table) and timeline sections. To enhance accessibility for screen readers, roles and ARIA attributes are incorporated for the treegrid parent and all its child elements. Although this architectural approach may have some limitations with accessibility checker tools, it is important to note that these limitations do not affect the readability or usability of the Gantt content in screen readers.

The accessibility checker tools highlight the following known issues:

• The <table> element with role="presentation" or role="none" contains structural elements such as <th>.
• Verify that the table is not being used solely to format text content in columns unless the table can be properly linearized.
• Content is not placed within a landmark element.
• Verify that the <div> element with role="grid" provides proper keyboard access.
• The element with role="grid" contains child elements with roles such as "generic" and "textbox", which are not allowed. Only "row" or "rowgroup" roles are permitted as direct children.
• Interactive component with ARIA role treegrid does not have a programmatically associated accessible name.
• None of the descendant elements with role="row" are tabbable.
• The explicitly assigned ARIA role "rowgroup" is redundant with the implicit role of the <tbody> element.
• The explicitly assigned ARIA role "row" is redundant with the implicit role of the <tr> element.
• The explicitly assigned ARIA role "gridcell" is redundant with the implicit role of the <td> element.
• The tabbable element with role "columnheader" is not a widget role.
• The explicitly assigned ARIA role "columnheader" is redundant with the implicit role of the <th> element.
• The element with role="rowgroup" does not contain required child elements with role "row".
• The ARIA attribute aria-valuenow is not valid for a <div> element with role="separator".
• The cellspacing attribute is deprecated for the <table> element in HTML5.
• The ARIA attribute aria-label is not valid for a <div> element with role="term".
• The ARIA attribute aria-label is not valid for a <div> element with the implicit "generic" role.

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.

See also

• Accessibility in Syncfusion® Vue components