Accessibility in ASP.NET MVC Gantt component

20 May 202610 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	AA
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Accessibility Checker 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

The Syncfusion ASP.NET MVC 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 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.

See also

• Accessibility in Syncfusion^® ASP.NET MVC components