TreeView Accessibility

Out of the box, the Kendo React 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.1 AA 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.


The following table lists the selectors, attributes, and behavior patterns supported by the TreeView component:

.k-treeviewrole=treeThe root div element of the treeview.
.k-treeview-group:not(.k-treeview-lines)role=groupThe ul element that wraps child nodes.
.k-treeview-itemrole=treeitemThe li element rendered for a tree node.
aria-levelAnnounces the level of the tree node item. The value of level is number-based(>=1). Should be added when only subsection of the TreeView is rendered in the DOM.
aria-setsizeAnnounces the total count of the items at this level. Helps the user understand the position of the navigation (ex: item 3 of 14). Should be added only when load more functionality of the tree is enabled and there are still nodes belonging to the group that are yet not loaded (rendered).
aria-expanded=true/falseAnnounces the expanded state of the node. It is true when expanded, and false when collapsed.
aria-checked=true/falseRendered only when checkboxes are enabled and announces the checked state of the node. If the checkbox is indeterminate, the value is mixed.
.k-selectedaria-selected=trueRendered only when selection is enabled and announces the selected state of the node.
.k-checkboxrole=none/presentationAdded 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=trueAdded to the checkbox element to prevent duplicated information announced to the user. The checked state is controlled by aria-checked.

If the tree supports Load More functionality, the load more button is rendered as li.k-treeview-item element and has role="button". The list item does not implement any of the above attributes.


ARIA practices File Directory Treeview Example

Section 508

The TreeView is fully compliant with the Section 508 requirements.


The TreeView has been extensively tested automatically with static code analyzers and manually with the most popular screen readers.

To report any accessibility issues, contact the team through the Telerik Support System.

Screen Readers

The following table lists the screen readers supported by the TreeView:

Microsoft EdgeJAWS

See Also