Accessibility in Angular Gantt component
24 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 | |
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 | |
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.