Accessibility in Angular Gantt component
26 Aug 202513 minutes to read
The Angular Gantt component is designed with comprehensive accessibility support, adhering to established guidelines and standards including ADA, Section 508, WCAG 2.2 standards, and WCAG roles. This ensures the component is usable by individuals with disabilities and meets legal accessibility requirements for enterprise applications.
Accessibility compliance
The accessibility compliance for the Gantt component provides detailed insight into supported features and current limitations. Understanding these compliance levels helps developers implement appropriate accessibility measures and identify areas requiring additional attention.
- 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.| 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 | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
WCAG 2.2 compliance details
The Gantt component achieves Level AA compliance for most WCAG 2.2 criteria. The “Intermediate” rating reflects specific limitations including complex data relationships where advanced dependency visualizations may not provide complete programmatic relationships for assistive technologies, dynamic content updates where certain real-time data changes in large datasets may require additional ARIA live region implementation, and custom templates where user-defined templates may require additional accessibility considerations depending on content complexity.
WAI-ARIA attributes
The Gantt component implements comprehensive WAI-ARIA patterns to ensure optimal accessibility. These attributes provide semantic information to assistive technologies and enhance the user experience for individuals with disabilities.
Core ARIA implementation
| Attributes | Purpose | Implementation Context |
|---|---|---|
grid (role) |
Applied to the e-table element representing the Grid portion of the Gantt component |
Provides semantic structure for the data grid area |
gridcell (role) |
Applied to td elements within the e-table, representing individual work cells in the Gantt grid |
Enables cell-by-cell navigation for screen readers |
columnheader (role) |
Applied to th elements within the e-table, representing header cells in the Grid table |
Provides column identification and sorting information |
separator (role) |
Applied to the e-split-bar element, representing the splitter between the Grid table and Chart sections |
Indicates resizable boundary between interface sections |
dialog (role) |
Applied to the e-dialog element, representing modal dialog boxes |
Manages focus and provides modal interaction patterns |
toolbar (role) |
Applied to the e-gantt-toolbar element, representing the component’s toolbar |
Groups related actions and provides toolbar navigation |
Dynamic ARIA properties
| Attributes | Purpose | Dynamic Behavior |
|---|---|---|
aria-label |
Provides descriptive information for UI elements including timeline cells, taskbars, labels, dependency lines, and event markers | Dynamically updates based on task names, dates, progress, and relationships |
aria-selected |
Applied to Gantt chart rows with a default value of false. Changes to true when users select a grid cell or task |
Updates during selection changes to maintain current selection state |
aria-expanded |
Applied to parent task rows. Value changes to true when expanding and false when collapsing parent tasks |
Reflects hierarchical task structure state changes |
aria-grabbed |
Applied to taskbars during taskbar editing operations to indicate drag state | Activated during drag-and-drop operations for accessibility feedback |
aria-describedby |
Links tasks to detailed descriptions, tooltips, or error messages | Dynamically associates contextual information with interactive elements |
aria-rowindex |
Applied to grid rows to indicate position within the complete dataset | Updates based on current view and virtualization state |
aria-colindex |
Applied to grid cells to indicate column position | Maintains column identification during horizontal scrolling |
Keyboard navigation
The Gantt component provides comprehensive keyboard navigation support following keyboard interaction guidelines. This ensures full functionality for users relying on assistive technologies or keyboard-only navigation patterns.
| Press | To do this | Context |
|---|---|---|
| Alt + J | Focus Gantt component | Global application shortcut |
| Tab / Shift + Tab | Focus the next or previous element | Standard tab navigation |
| Home | Selects the first row | Grid and chart areas |
| End | Selects the last row | Grid and chart areas |
| DownArrow | Moves the row selection downward | Row navigation |
| UpArrow | Moves the row selection upward | Row navigation |
| LeftArrow | Moves the cell focus/cell selection left side | Cell navigation |
| RightArrow | Moves the cell focus/cell selection right side | Cell navigation |
| Ctrl + Up Arrow | Collapses all tasks | Hierarchy management |
| Ctrl + Down Arrow | Expands all tasks | Hierarchy management |
| Ctrl + Shift + Up Arrow | Collapses the selected row | Individual task control |
| Ctrl + Shift + Down Arrow | Expands the selected row | Individual task control |
| Enter | Saves request | During edit operations |
| Esc | Cancels request | During edit operations |
| Insert | Adds a new row | Quick task creation |
| Ctrl + Insert | Opens addRowDialog | Detailed task creation |
| Ctrl + F2 | Opens editRowDialog | Task editing |
| Delete | Deletes the selected row | Task removal |
| Shift + F5 | Focus specific task | Task location |
| Ctrl + Shift + F | Focus search functionality | Data filtering |
| Ctrl + Z | Undo the last action | Operation reversal |
| Ctrl + Y | Redo the last action | Operation restoration |
| Shift + DownArrow | Extends the cell selection downwards | Multi-cell selection |
| Shift + UpArrow | Extends the cell selection upwards | Multi-cell selection |
| Shift + LeftArrow | Extends the cell selection to the left side | Multi-cell selection |
| Shift + RightArrow | Extends the cell selection to the right side | Multi-cell selection |
Error handling and validation accessibility
The Gantt component provides accessible error handling and validation feedback patterns for Gantt-specific scenarios including dependency validation, resource conflicts, and date constraint violations.
@Component({
template: `
<ejs-gantt
[dataSource]="data"
[editSettings]="editSettings"
(actionFailure)="onActionFailure($event)">
</ejs-gantt>
<div role="alert" aria-live="assertive" class="sr-only" #errorRegion></div>
`
})
export class AccessibleGanttComponent {
@ViewChild('errorRegion') errorRegion: ElementRef;
public onActionFailure(args: FailureEventArgs): void {
const errorMessage = this.formatErrorMessage(args.error);
this.errorRegion.nativeElement.textContent = errorMessage;
// Focus management for error scenarios
this.manageFocusForError(args);
}
private formatErrorMessage(error: any): string {
return `Error: ${error.message}. Please review your input and try again.`;
}
private manageFocusForError(args: FailureEventArgs): void {
// Return focus to the element that caused the error
const targetElement = document.querySelector(`[data-task-id="${args.data?.taskId}"]`);
if (targetElement) {
(targetElement as HTMLElement).focus();
}
}
}Mobile and touch accessibility
The Gantt component provides comprehensive accessibility support for mobile and touch devices through the enableAdaptiveUI property, ensuring individuals with disabilities can effectively interact with the component across all device types.
Touch gesture accessibility includes single tap equivalent to click for task selection and activation, double tap to open task editing dialog or activate focused elements, long press to open context menu with full keyboard navigation support, swipe gestures for horizontal scrolling through timeline with appropriate announcements, and pinch to zoom for timeline scaling with accessibility feedback. These gestures are optimized for assistive touch technologies and provide haptic feedback where supported by the device platform.
Testing accessibility
The Gantt component’s accessibility compliance is validated through automated testing using accessibility-checker and axe-core tools. These tools help ensure the component meets established accessibility standards during development and testing phases, providing comprehensive coverage of WCAG guidelines and Section 508 compliance requirements.
Voluntary Product Accessibility Template (VPAT)
The Syncfusion Angular Gantt component includes comprehensive VPAT documentation detailing accessibility conformance across international standards. This documentation provides structured information about compliance with Section 508, WCAG 2.2, and EN 301 549 requirements.
For detailed accessibility conformance information, refer to the Syncfusion VPAT document which provides specific compliance details for all Syncfusion components including the Gantt chart.
Live accessibility sample
The accessibility compliance of the Gantt component is demonstrated in the following comprehensive sample. This sample showcases all accessibility features, keyboard navigation patterns, and assistive technology support.
The sample demonstrates complete keyboard navigation functionality, screen reader announcements and ARIA implementation, focus management during complex operations, accessible error handling and validation, mobile and touch accessibility support, and real-time content update accessibility with appropriate ARIA live region announcements for virtualized content and dynamic data changes.