Accessibility Support
Out of the box, the Telerik and Kendo UI Gantt provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The Gantt is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus and is tested against the most popular screen readers.
WAI-ARIA
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
The Gantt component is a composite component that is used to represent project planning.
| Selector | Attribute | Usage |
|---|---|---|
.k-gantt | role=application | Indicates the Gantt's role as an application. |
The Gantt component integrates the toolbar component and follows its wai-aria support.
The main inner component in the Gantt is the TreeList.
Another part of the component is the Splitter component and Wai-Aria support.
The following Wai-Aria support is implemented in the TimeLine of the Gantt.
| Selector | Attribute | Usage |
|---|---|---|
.k-gantt-timeline .k-grid-content | role=tree | Associates the role of the timeline as a tree. |
.k-gantt-timeline .k-gantt-rows | role=presentation | Used to build the accessibility tree. |
.k-gantt-timeline .k-gantt-columns | role=presentation | Used to build the accessibility tree. |
.k-gantt-timeline .k-gantt-tasks | role=presentation | Used to build the accessibility tasks. |
.k-gantt-timeline .k-task | role=treeitem | Associates the role of the timeline task as a tree item. |
aria-level | Specifies the level of the task. | |
aria-describedby=.k-tooltip id | Gives more details for the task through its tooltip. | |
.k-gantt-timeline .k-task .k-task-complete | aria-hidden=true | Hides the status element from the task. |
.k-gantt-timeline .k-task .k-task-actions | aria-hidden=true | Hides the actions element from the task. |
Keyboard Shortcuts
The Gantt component is a container that consists of 4 logically separated structural elements:
- Toolbar (
role="toolbar"); - Splitter (
role="separator"); - TreeList (
role="treegrid"); - TimeLine (
role="tree")
Each of them is part of the page tab sequence and can be navigated to using the Tab key of the keyboard. The list above illustrates the focus sequence.
The Toolbar implements the keyboard navigation specification for a ToolBar component:
The Splitter implements the keyboard navigation specification for a Splitter component
Gantt shortcuts
| Shortcut | Behavior |
|---|---|
Alt/Opt(Mac) + 1,2,3,... | navigates to the view with the respective number |
F10 | Focuses the ToolBar. |
TreeList shortcuts
The TreeList implements the keyboard navigation specification for a TreeList component:
| Shortcut | Behavior |
|---|---|
Tab | Moves focus to the corresponding task in the TimeLine. |
Shift + Tab | If focus has been previously on the same line in the treelist, moves focus to last focused cell. Otherwise, focus the last cell on the same line. |
TimeLine Shortcuts
| Shortcut | Behavior |
|---|---|
Home | Moves focus to first task. |
End | Moves focus to the last task. |
Up Arrow | Moves focus to previous task. |
Down Arrow | Moves focus to the next task. |
Left Arrow | Scrolls the view to the left. |
Right Arrow | Scrolls the view to the right. |
Enter | Gantt Popup Form is opened to provide editing of the task. The dependencies and field edit is made. On close focus is returned on the task. |
Delete | The task gets deleted. The focus is moved to the previous task. |
Alt/Opt(Mac) + Right Arrow | The task is expanded, if it contains child tasks. The task should remain in focus and the timeline should be scrolled to it. |
Alt/Opt(Mac) + Left Arrow | The task is collapsed, if it contains child tasks. The task should remain in focus and the timeline should be scrolled to it. |
Testing
The Gantt has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The Gantt has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
