Accessibility Support
Out of the box, the Telerik and Kendo UI TreeView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
The TreeView 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.
If the tree supports the load-more functionality, the Load More button is rendered as the li.k-treeview-item element and has role="button". The list item does not implement any of the following attributes.
| Selector | Attribute | Usage |
|---|---|---|
.k-treeview-lines | role=tree | The root div element of the treeview. |
.k-treeview-group:not(.k-treeview-lines) | role=group | The ul element that wraps child nodes. |
.k-input-inner | aria-label | Specifies the announced name for the filter input. |
role=searchbox | Specifies the role of the filter input. | |
aria-controls=.k-treeview-lines id | Points to the main ul element .k-treeview-lines. | |
.k-treeview-item | role=treeitem | The li element rendered for a tree node. |
aria-level | Announces the level of the tree node item. The value of the level is number-based (>=1). Must be added when only a subsection of the TreeView is rendered in the DOM. | |
aria-setsize | Announces the total count of the items at this level. Enables the user to understand the position of the navigation, for example, item 3 of 14. Must be added only when the load-more functionality of the tree is enabled and there are still nodes belonging to the group that are not loaded (rendered) yet. | |
aria-expanded=true/false | Announces the expanded state of the node. The value is true when expanded, and false when collapsed. | |
aria-checked=true/false | Rendered only when checkboxes are enabled. Announces the checked state of the node. If the checkbox is indeterminate, the value is mixed. | |
.k-treeview-item:has(> span > .k-selected, > div > .k-selected) | aria-selected=true | Rendered only when selection is enabled. Announces the selected state of the node. |
.k-checkbox | role=none/presentation | Added to the wrapper element of the checkbox to prevent duplicated information announced to the user. The checked state is controlled by aria-checked. |
aria-hidden=true | Added to the checkbox element to prevent duplicated information announced to the user. The checked state is controlled by aria-checked. |
Managing the Focus
The TreeView implements a roving tab index components strategy. On loading the TreeView, only the first node will contain tabindex="0" and the navigation keys will move the focus to other nodes and change the respective tabindex. When the focus is moved away from the TreeView, the tabindex="0" remains on the last focused node.
Keyboard Shortcuts
The TreeView supports the following keyboard shortcuts:
| Shortcut | Behavior |
|---|---|
Enter | Selects the focused tree view item when the selection mode is single or multiple. When the selection mode is multiple and there are other selected items, they get deselected. |
Space | Checks the checkbox of the TreeView node. |
Up Arrow | Goes to the previous tree node. The focus is moved to the previous node and its tabindex is set to 0. |
Down Arrow | Goes to the next tree node. The focus is moved to the next node and its tabindex is set to 0. |
Left Arrow | If the node is expanded, collapses it and the focus remains on the item. If the node is collapsed, the focus is moved to its parent. |
Right Arrow | If the node is collapsed, expands it and the focus remains on the item. If the node is expanded, the focus is moved to the first child node. |
Home | Moves the focus to the first node in the tree without opening or closing a node. |
End | Moves the focus to the last node in the tree that is focusable without opening a node. |
Ctrl (or Cmd on Mac) + Enter | Selects the focused item. When the item is already selected, it gets deselected. |
| Printable Characters | Typing M or any other printable character focuses the next or the first item in the list. |
Testing
The TreeView has been extensively tested automatically with axe-core and manually with the most popular screen readers.
Screen Readers
The TreeView has been tested with the following screen readers and browsers combinations:
| Environment | Tool |
|---|---|
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |
