Accessibility in Blazor Gantt Chart Component
25 Mar 20247 minutes to read
The Blazor 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 Blazor 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 | |
| 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
The Blazor Gantt component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Gantt component:
The following ARIA attributes are used in Blazor Gantt:
| Attributes | Description |
|---|---|
treegrid (role) |
Used to convey a significant and contextual message to the user. 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 is set to false by default. 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 Blazor 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 Blazor Gantt component.
| Interaction Keys | Description |
|---|---|
| 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. |
Ensuring accessibility
The Blazor Gantt component’s accessibility levels are ensured through an axe-core with playwright tests.
The accessibility compliance of the Blazor Gantt component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor Gantt component with accessibility tools.
NOTE
You can refer to our Blazor Gantt Chart feature tour page for its groundbreaking feature representations. You can also explore our Blazor Gantt Chart example to know how to render and configure the Gantt.