Accessibility in Blazor Gantt Chart Component

4 Nov 202516 minutes to read

The Syncfusion Blazor Gantt Chart component adheres to accessibility guidelines, including ADA, Section 508, WCAG 2.2, and WCAG roles standards, ensuring compatibility with assistive technologies, including those relying on assistive technologies.

Accessibility Compliance

The table below summarizes the accessibility compliance of the Blazor Gantt Chart component.

Accessibility Criteria Compatibility
WCAG 2.2 Support Intermediate compatibility
Section 508 Support Full compatibility
Screen Reader Support Intermediate compatibility
Right-To-Left Support Full compatibility
Color Contrast Full compatibility
Mobile Device Support Full compatibility
Keyboard Navigation Support Full compatibility
Axe-core Accessibility Validation Full compatibility
Full compatibility - All features meet the requirement.
Intermediate compatibility - Some features do not fully meet the requirement.
No compatibility - The component does not meet the requirement.

WAI-ARIA attributes

The Blazor Gantt Chart component implements WAI-ARIA patterns to enhance accessibility. The following ARIA attributes are applied:

Attributes Description
treegrid (role) Applied to the e-table element in the Gantt’s grid section to indicate a treegrid structure.
gridcell (role) Added to td elements within the e-table to represent work cells in the Gantt grid.
columnheader (role) Assigned to th elements within the e-table to denote header cells in the grid.
separator (role) Used for the e-split-bar element, representing the splitter between the grid and chart sections.
dialog (role) Applied to the e-dialog element for pop-up dialogs in the Gantt.
toolbar (role) Assigned to the e-gantt-toolbar element to indicate the toolbar.
aria-label Provides descriptive information for UI elements, such as timeline cells, taskbars, labels, dependency lines, and event markers.
aria-selected Indicates selection state for chart rows, set to false by default and true when a cell or task is selected.
aria-expanded Used for parent task rows, set to true when expanded and false when collapsed.
aria-grabbed Applied to taskbars during editing to indicate drag-and-drop interaction.

Keyboard navigation

The Blazor Gantt Chart component supports comprehensive keyboard interaction for users relying on keyboards or assistive technologies. Below are the supported keyboard shortcuts, organized by functionality.

Focus elements

Windows Mac Action
Alt + J ⌥ + J Focuses the entire Gantt chart.
Home Fn + ← Moves focus to the first cell of the current row.
End Fn + → Moves focus to the last cell of the current row.
Ctrl + Home ⌘ + Fn + ← Moves focus to the first cell of the first row.
Ctrl + End ⌘ + Fn + → Moves focus to the last cell of the last row.
↑ ↑ Moves focus to the cell above the current cell.
↓ ↓ Moves focus to the cell below the current cell.
→ → Moves focus to the cell to the right.
← ← Moves focus to the cell to the left.
Alt + W ⌥ + W Focuses the Gantt content element.

Expand/Collapse

Windows Mac Action
Ctrl + ↓ ⌘ + ↓ Expands all tasks.
Ctrl + ↑ ⌘ + ↑ Collapses all tasks.
Ctrl + Shift + ↑ ⌘ + ⇧ + ↑ Collapses the selected row.
Ctrl + Shift + ↓ ⌘ + ⇧ + ↓ Expands the selected row.

Selection

Windows Mac Action
↑ ↑ Selects the row or cell above the current selection.
↓ ↓ Selects the row or cell below the current selection.
→ → Selects the cell to the right of the current selection.
← ← Selects the cell to the left of the current selection.
Shift + ↑ ⇧ + ↑ Extends selection upward.
Shift + ↓ ⇧ + ↓ Extends selection downward.
Shift + → ⇧ + → Extends cell selection to the right.
Shift + ← ⇧ + ← Extends cell selection to the left.
Enter Enter Selects the row or cell below the current selection.
Shift + Enter ⇧ + Enter Selects the row or cell above the current selection.
Esc Esc Clears all selections.
Ctrl + A ⌘ + A Selects all rows or cells on the current page.

Clipboard

Windows Mac Action
Ctrl + C ⌘ + C Copies selected rows or cells to the clipboard.
Ctrl + Shift + H ⌘ + ⇧ + H Copies selected rows or cells with headers to the clipboard.

Context menu

Windows Mac Action
Esc Esc Closes the context menu.
Enter Enter Selects the focused menu item.
↑ ↑ Navigates to the previous menu item.
↓ ↓ Navigates to the next menu item.
← ← Closes the current submenu and navigates to the parent menu.
→ → Opens the next submenu.

Cell editing

Windows Mac Action
F2 F2 Initiates editing of the selected row or cell.
Enter Enter Saves the current cell.
Insert ⌘ + Enter Opens a form to add a new row.
Delete Delete Deletes the selected record.
Tab Tab Saves the current cell and moves to the next editable cell.
Shift + Tab ⇧ + Tab Saves the current cell and moves to the previous editable cell.
Shift + Enter ⇧ + Enter Saves the current cell and edits the cell in the previous row.

Filtering

Windows Mac Action
Alt + ↓ ⌥ + ↓ Opens the filter menu for the focused header.

Column Menu

Windows Mac Action
Alt + ↓ ⌥ + ↓ Opens the column menu for the focused header.

Reordering

Windows Mac Action
Ctrl + ← / → ⌘ + ← / → Moves the focused column to the left or right.

Sorting

Windows Mac Action
Enter Enter Sorts the focused column (ascending or descending).
Ctrl + Enter ⌘ + Enter Applies multi-column sorting.
Shift + Enter ⇧ + Enter Clears sorting for the focused column.

Toolbar

Windows Mac Action
← ← Focuses the previous toolbar element.
→ → Focuses the next toolbar element.
Enter Enter Activates the focused toolbar element.

Tooltip

Windows Mac Action
Esc Esc Closes the tooltip.
Tab Tab Opens the tooltip on focus and closes it on focus out.

Dialog editing

Windows Mac Action
Ctrl + Insert ⌘ + Insert Opens the add row dialog.
Ctrl + F2 ⌘ + F2 Opens the edit row dialog.
Del Del Deletes the selected record.
Enter Enter Saves the current row.
Esc Esc Closes the dialog.
Tab Tab Saves the current cell and moves to the next editable cell in the dialog.
Shift + Tab ⇧ + Tab Saves the current cell and moves to the previous editable cell in the dialog.

Validate Accessibility Compliance

Accessibility is validated using axe-core with Playwright tests to ensure compliance with WCAG 2.2 and other standards. Evaluate the accessibility of the Blazor Gantt Chart component using the sample in a new window with accessibility tools.