Accessibility and ARIA Compliance in Blazor Gantt Chart

The 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 AA
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:

Selector Attribute Usage
.e-gantt-tree-grid-pane .e-treegrid .e-gridcontent table.e-table role="treegrid" Identifies the Gantt task grid as a hierarchical tree grid.
.e-gantt-tree-grid-pane .e-treegrid .e-gridcontent td.e-rowcell role="gridcell" Identifies a task data cell in the grid.
.e-gantt-tree-grid-pane .e-treegrid .e-gridheader th.e-headercell role="columnheader" Identifies a grid column header.
.e-gantt-splitter .e-split-bar role="separator" Identifies the splitter between the grid and chart sections.
.e-dialog role="dialog" Identifies a Gantt pop-up dialog.
.e-gantt-toolbar role="toolbar" Identifies the Gantt toolbar.
.e-timeline-single-header-cell, .e-timeline-top-header-cell aria-label Provides a descriptive label for a timeline header cell.
.e-taskbar-main-container role="group", aria-label Identifies a taskbar group and provides its accessible description.
.e-connector-line-container role="img", aria-label Identifies a dependency line and provides its accessible description.
.e-event-markers role="region", aria-label Identifies an event marker and provides its accessible description.
.e-gantt-tree-grid-pane .e-treegrid .e-gridcontent tr.e-row aria-level Indicates the hierarchical level of a task row.
.e-gantt-tree-grid-pane .e-treegrid .e-gridcontent tr.e-row aria-selected Indicates whether a task row is selected.
.e-gantt-tree-grid-pane .e-treegrid .e-gridcontent tr.e-row aria-expanded Indicates whether a parent task row is expanded or collapsed.
Tooltip target (for example, .e-taskbar-main-container) aria-describedby Associates the target with its tooltip while the tooltip is displayed.

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 Blazor 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.

Undo Redo

Windows Mac Action
Ctrl + Z ⌘ + Z Undoes the most recent tracked action.
Ctrl + Y ⌘ + Y Redoes the most recently undone action.
Ctrl + Shift + Z ⌘+ ⇧ + Z Redoes the most recently undone action.
Ctrl + Shift + Y ⌘+ ⇧ + Y Undoes the most recent tracked action.

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.