TreeList

Accessibility Support

Out of the box, the Telerik and Kendo UI TreeList provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.

The TreeList 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.

The TreeList is a composite component that consists of 2 logically separated structural elements:

• Toolbar (role=toolbar);
• Tree Grid (role=treegrid);

TreeList Toolbar

TreeList Toolbar follows the specification of the ToolBar component.

Tree Grid

The element with role=treegrid must not include the ToolBar element as it does not belong to the role=treegrid element itself. It implements the ARIA specification for the Grid component with some exceptions listed below.

The below table lists the ARIA requirements for the TreeList which are not present in the Grid specification:

Managing the Focus

The TreeList component is a container that consists of 2 logically separated structural elements:

• Toolbar (role="toolbar");
• Tree Grid (role="treegrid");

Each of them is part of the page tab sequence and can be navigated to using the Tab key of the keyboard.

The Toolbar implements the keyboard navigation specification for a ToolBar component.

The below description focuses only on the Tree Grid part (the element with role="treegrid") of the composite component.

Tree Grid Focus

The Tree Grid is a single tab stop component. Upon focusing the Tree Grid, the initial focus is set to either the previously focused cell (if any), or the first data (<td>) cell in the Tree Grid. The change of the focused cell should be implemented using one of the following two techniques:

• Roving TabIndex components Practice for managing the focus. Meaning that going through the cells will update the tabindex of the cell.
• Active descendant - keeping the focus always on the Data Grid and using the aria-activedescendant on the Tree Grid element which points to the id of the currently focused cell.

If a cell contains only one focusable element that does not itself require arrow keys for its inner navigation - focus goes to that element instead of its parent <td>.

If column header cells do not provide functions, such as sort, filter, or column menu, they may not be focusable.

If the TreeList contains no items (empty TreeList), the No data element in the TreeList should be focused. That applies also for the scenario when the last item in the Grid has been deleted.

Keyboard Shortcuts

The TreeList implements the same keyboard shortcuts as the Grid component. In addition to that, here is the appropriate shortcut to expand/collapse a row:

Testing

The TreeList has been extensively tested automatically with axe-core and manually with the most popular screen readers.

Screen Readers

The TreeList has been tested with the following screen readers and browsers combinations:

Resources

• WAI-ARIA specification for tree grid
• ARIA Authoring Practices: Treegrid Pattern