Accessibility in Blazor Gantt Chart Component
29 Nov 202418 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 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:
Focus Elements
| Windows | MAC | To do this |
|---|---|---|
| Alt + J | Alt + J | Moves the focus to the entire gantt chart. |
| Home | Fn + Left Arrow | Moves the focus to the first cell of the focused row. |
| End | Fn + Right Arrow | Moves the focus to the last cell of the focused row. |
| Ctrl + Home | Command + Fn + Left Arrow | Moves the focus to the first Cell of the first row in the gantt chart. |
| Ctrl + End | Command + Fn + Right Arrow | Moves the focus to the last Cell of the last row in the gantt chart. |
| Up Arrow | Up Arrow | Moves the cell focus upward from the focused cell. |
| Down Arrow | Down Arrow | Moves the cell focus downward from the focused cell. |
| Right Arrow | Right Arrow | Moves the cell focus right side from the focused cell. |
| Left Arrow | Left Arrow | Moves the cell focus left side from the focused cell. |
| Alt + W | Alt + W | Moves the focus to the gantt content element. |
Expand/Collapse
| Windows | MAC | To do this |
|---|---|---|
| Ctrl + Down arrow | Ctrl + Down arrow | Expands all tasks. |
| Ctrl + Up arrow | Ctrl + Up arrow | Collapses all tasks. |
| Ctrl + Shift + Up arrow | Ctrl + Shift + Up arrow | Collapse the selected row. |
| Ctrl + Shift + Down arrow | Ctrl + Shift + Down arrow | Expands the selected row. |
Selection
| Windows | MAC | To do this |
|---|---|---|
| Up Arrow | Up Arrow | Moves up a row/cell selection from the selected row/cell. |
| Down Arrow | Down Arrow | Moves down a row/cell selection from the selected row/cell. |
| Right Arrow | Right Arrow | Moves to the right cell selection from the selected cell. |
| Left Arrow | Left Arrow | Moves to the left cell selection from the selected cell. |
| Shift + Up Arrow | Shift + Up Arrow | Extends the row/cell selection upwards from the selected row/cell. |
| Shift + Down Arrow | Shift + Down Arrow | Extends the row/cell selection downwards from the selected row/cell. |
| Shift + Right Arrow | Shift + Right Arrow | Extends the cell selection to the right side from the selected cell. |
| Shift + Left Arrow | Shift + Left Arrow | Extends the cell selection to the left side from the selected cell. |
| Enter | Enter | Moves the row/cell selection downward from the selected cell/row. |
| Shift + Enter | Shift + Enter | Moves the row/cell selection upward. |
| Esc | Esc | Deselects all the selected row/cells. |
| Ctrl + A | Ctrl + A | Select all the row/cells in the current page. |
Clipboard
| Windows | MAC | To do this |
|---|---|---|
| Ctrl + C | Command + C | Copies selected rows or cells data into the clipboard. |
| Ctrl + Shift + H | Ctrl + Shift + H | Copies selected rows or cells data with header into clipboard. |
Context Menu
| Windows | MAC | To do this |
|---|---|---|
| Esc | Esc | Closes the opened sub menu. |
| Enter | Enter | Selects the focused item. |
| Up | Up | Navigates up or to the previous menu item. |
| Down | Down | Navigates down or to the next menu item. |
| Left | Left | Close the current sub menu and navigates to the parent menu. |
| Right | Right | Navigates and open the next sub menu. |
Cell Editing
| Windows | MAC | To do this |
|---|---|---|
| F2 | F2 | Starts editing of selected Row/cell. |
| Enter | Enter | Saves current cell. |
| Insert | Ctrl + Command + Enter | Creates a new add form based on the new row position. |
| Delete | Delete | Deletes the current selected record. |
| Tab | Tab | Navigates to the next editable cell, saves the current cell, and starts editing the next cell. |
| Shift + Tab | Shift + Tab | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell. |
| Shift + Enter | Shift + Enter | Saves the current cell and starts editing the previous row cell. |
Filtering
| Windows | MAC | To do this |
|---|---|---|
| Alt + Down arrow | Alt + Down arrow | Opens the filter menu when its header element is in focused state. |
Column Menu
| Windows | MAC | To do this |
|---|---|---|
| Alt + Down arrow | Alt + Down arrow | Opens column menu when its header element is in focused state. |
Reordering
| Windows | MAC | To do this |
|---|---|---|
| Ctrl + left arrow or right arrow | Command + left arrow or right arrow | Reorders the focused header column to the left or right side. |
Sorting
| Windows | MAC | To do this |
|---|---|---|
| Enter | Enter | Performs sorting(ascending/descending) on a column when its header element is in focused state. |
| Ctrl + Enter | Command + Enter | Performs multi-sorting on a column when its header element is in focused state. |
| Shift + Enter | Shift + Enter | Clears sorting for the focused header column. |
Toolbar
| Windows | MAC | To do this |
|---|---|---|
| Left | Left | Focuses the previous element. |
| Right | Right | Focuses the next element. |
| Enter | Enter | Performs the focused toolbar element action. |
Tooltip
| Windows | MAC | To do this |
|---|---|---|
| Escape | Escape | Closes or dismisses the tooltip. |
| Tab | Tab | A form control receiving focus (say through tab key), opens the tooltip, and on focus out closes it. |
Dialog Editing
| Windows | MAC | To do this |
|---|---|---|
| Ctrl + Insert | Command + Insert | Opens the add row dialog popup. |
| Ctrl + F2 | Command + F2 | Opens the edit row dialog popup. |
| Del | Del | Deletes the currently selected record. |
| Enter | Enter | Saves the current row. |
| Esc | Esc | Closes the dialog. |
| Tab | Tab | Navigates to the next editable cell, saves the current cell, and starts editing the next cell in the dialog elements. |
| Shift + Tab | Shift + Tab | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell in the dialog elements. |
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.