GanttChart Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

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:

Key Action
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.