Build your web apps using Smart UI
Smart.GanttChart - Accessibility
GanttChart provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-label, aria-controls, aria-hidden and others.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
GanttChart contains items that are presented in a tree strucutre and can expand/collapse if necessary. As such the role of the component is "treegrid". It also uses other custom components that provide their own ARIA attributes, for example the Tree.
The following ARIA attributes are used inside the GanttChart:
- aria-disabled - indicates that interaction with the GanttChart is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the GanttChart and will not be mapped to the accessibility API. This attribute is typically applied to containers that do not provide any feedback regarding the state or the value of the GanttChart.
- aria-controls - applied to the Tree and Scrollbar components inside the GanttChart, indicates that those components control the behavior of the element. It is also used to determine the relationship between the tree items and the timeline tasks which control each other.
- aria-selected - indicates the selected state of the task bars inside the Timeline of the GanttChart.
- aria-valuemax - applied to the ScrollBars inside the GanttChart to determine their maximal scroll value.
- aria-valuemin - applied to the ScrollBars inside the GanttChart to determine their minimal scroll value.
- aria-valuenow - applied to the ScrollBars inside the GanttChart to determine their current scroll value.
- aria-owns - indicates the functional and contextual relationship between the editor window and the GanttChart. Since the window is not part of the GanttChart's template hierarchy it is neccessary to use this attribute to define it's parent owner.
- aria-label - GanttChart contains many interactive controls that provide visual feedback, for example the window editor, tree and splitter. All of them use this attribute in order to present their current value. The Timeline also uses the attribute to indicate each task bar's value. The value includes the starting and ending time of the task.
- aria-labelledby - identifies the elements that label the input controls inside the window editor of the GanttChart.
- aria-expanded - used by the Tree component of the GanttChart to indicate which task item is exapnded.
The GanttChart element features several focusable components ( Tree, Window, Splitter ) that have their own keyboard navigation. Key actions depend on the currently focused component.
The following keyboard shortcuts are available to interact with the GanttChart:
|Arrow Down/Up||Focuses the next/previous task from the task tree list.|
|Home||Focuses the first task from the task tree list.|
|End||Focuses the last task from the task tree list.|
|Escape||Closes the window editor.|
|Arrow Left/Right||Collapse/Expand a Project ( task group ) inside the task tree list.|
|Control + Arrow Up/Down/Left/Right||Changes the position of the window editor, if opened and focused.|
Additional information on WAI-ARIA for the SMART Framework can be found here.