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

Tree provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-selected, aria-expanded, aria-label 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.

The Tree component is a type of list control that may contain sub-level nested groups that can be collapsed or expanded. As such it has the role tree applied.

The Tree component contains additional controls with their own specific roles:

  • searchbox - the filter input that is located inside the Tree is a type of textbox intended for specifying search criteria.
  • treeitem - the items of the Tree. They may be expanded or collapsed if they contain a sub-level group of tree item elements.
  • scrollbar - the scrollbars that allow to scroll through the content of the Tree.
  • button - the scroll buttons that represent the alternative mode to scrolling the Tree content.

The following ARIA attributes are used in the Tree:

  • aria-disabled - indicates that the interaction with the Tree is disabled.
  • aria-multiselectable - indicates the the Tree allows multiple items to be selected.
  • aria-selected - applied to the Tree items, this attribute indicates whether it is selected or not.
  • aria-orientation - indicates the orientation of the tree. The Tree is a vertically oriented component.
  • aria-expanded - applied to Tree items groups, indicates whether the group is expanded or not. When expanded it's items are visible.
  • aria-label - applied to multiple elements contained inside the Tree, such as the loading indicator, scroll buttons, tree item, tree groups, edit input and others. Indicates the textual value of the control depending on it's behavior.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the Tree:

Key Action
Arrow Down/Up Selects/Focuses the next/previous tree item.
Arrow Left Collapses the currently focused items group if the root is focused. If not, focuses the root of the currently focused tree item group.
Arrow Right Expands the currently focused tree items group if the root item is focused. If it's already expanded, focuses the first item in the group.
Page Down/Up Focuses the first/last item from the next/previous page of the tree.
Home Selects/Focuses the first item in the Tree.
End Selects/Focuses the last item in the Tree.
F2 Starts editing of the currently focused tree item.
Enter Finishes the editing operation.
Escape Cancels the editing operation.
Space Checks/Unchecks a highlighted checkable item in selection modes checkbox and radiobutton.

Additional information on WAI-ARIA for the SMART Framework can be found here.