Accessibility in Blazor Gantt Chart Component

6 May 202517 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 Intermediate
Section 508 Support Yes
Screen Reader Support Intermediate
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - 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 Actions
Alt + J ⌥ + J Moves the focus to the entire gantt chart.
Home Fn + ← Moves the focus to the first cell of the focused row.
End Fn + → Moves the focus to the last cell of the focused row.
Ctrl + Home ⌘ + Fn + ← Moves the focus to the first Cell of the first row in the gantt chart.
Ctrl + End ⌘ + Fn + → Moves the focus to the last Cell of the last row in the gantt chart.
↑ ↑ Moves the cell focus upward from the focused cell.
↓ ↓ Moves the cell focus downward from the focused cell.
→ → Moves the cell focus right side from the focused cell.
← ← Moves the cell focus left side from the focused cell.
Alt + W ⌥ + W Moves the focus to the gantt content element.

Expand/Collapse

Windows MAC Actions
Ctrl + ↓ ⌘ + ↓ Expands all tasks.
Ctrl + ↑ ⌘ + ↑ Collapses all tasks.
Ctrl + Shift + ↑ ⌘ + ⇧ + ↑ Collapse the selected row.
Ctrl + Shift + ↓ ⌘ + ⇧ + ← Expands the selected row.

Selection

Windows MAC Actions
↑ ↑ Moves up a row/cell selection from the selected row/cell.
↓ ↓ Moves down a row/cell selection from the selected row/cell.
→ → Moves to the right cell selection from the selected cell.
← ← Moves to the left cell selection from the selected cell.
Shift + ↑ ⇧ + ↑ Extends the row/cell selection upwards from the selected row/cell.
Shift + ↓ ⇧ + ↓ Extends the row/cell selection downwards from the selected row/cell.
Shift + → ⇧ + → Extends the cell selection to the right side from the selected cell.
Shift + ← ⇧ + ← 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 ⇧ + Enter Moves the row/cell selection upward.
Esc Esc Deselects all the selected row/cells.
Ctrl + A ⌘ + A Select all the row/cells in the current page.

Clipboard

Windows MAC Actions
Ctrl + C ⌘ + C Copies selected rows or cells data into the clipboard.
Ctrl + Shift + H ⌘ + ⇧ + H Copies selected rows or cells data with header into clipboard.

Context Menu

Windows MAC Actions
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 Actions
F2 F2 Starts editing of selected Row/cell.
Enter Enter Saves current cell.
Insert ⌘ + 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 ⇧ + Tab Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell.
Shift + Enter ⇧ + Enter Saves the current cell and starts editing the previous row cell.

Filtering

Windows MAC Actions
Alt + ↓ ⌥ + ↓ Opens the filter menu when its header element is in focused state.

Column Menu

Windows MAC Actions
Alt + ↓ ⌥ + ↓ Opens column menu when its header element is in focused state.

Reordering

Windows MAC Actions
Ctrl + ← / → ⌘ + ← / → Reorders the focused header column to the left or right side.

Sorting

Windows MAC Actions
Enter Enter Performs sorting(ascending/descending) on a column when its header element is in focused state.
Ctrl + Enter ⌘ + Enter Performs multi-sorting on a column when its header element is in focused state.
Shift + Enter ⇧ + Enter Clears sorting for the focused header column.

Toolbar

Windows MAC Actions
← ← Focuses the previous element.
→ → Focuses the next element.
Enter Enter Performs the focused toolbar element action.

Tooltip

Windows MAC Actions
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 Actions
Ctrl + Insert ⌘ + Insert Opens the add row dialog popup.
Ctrl + F2 ⌘ + 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 ⇧ + 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.

See also