Case study: Tui TreeView Accessibility

After identifying several accessibility issues in our existing Tree component and recognising its limitations in implementing the TreeView pattern, we developed a new TreeView component. This component is specifically designed for this use case, offering improved accessibility and testability. The following is a summary of our accessibility considerations.

Semantic HTML

Use semantically correct HTML attributes whenever possible. For example, the TreeView uses <ul> and <li> elements instead of <div>s.

Semantic HTML is important for several reasons:

• Accessibility: Semantic elements provide meaningful context to assistive technologies like screen readers.

• Readability and Maintainability: The code’s intent is immediately clear, especially when inspecting the DOM in the browser.

• W3C Standards: Adhering to standards ensures the code remains compatible as web technologies evolve.

In the case of the TreeView, the semantic elements also provide default browser styling, such as margin and padding for item indentation.

ARIA Roles

ARIA roles add semantic meaning to content. For the TreeView, we use the role tree on the list element, and treeitem on each list item. This describes the common interactive pattern of a tree where it wouldn’t otherwise be clear.

Avoid redundant roles when an equivalent HTML element exists. For instance, use <ul> and <li> elements instead of the list and listitem roles.

When testing, querying elements by roles is the preferred method because:

1. It closely mirrors how users and assistive technologies interact with the page

2. Roles are less likely to change compared to classes

3. It improves readability of tests

All available ARIA roles

ARIA Attributes

There are a number of relevant aria attributes used on the TreeView:

1. aria-expanded

   • Used to indicate if a tree item is expanded or collapsed

2. aria-selected

   • Used to indicate if a tree item is selected

3. aria-controls

   • Used to indicate that the toggle button controls the visibility of the child items

4. aria-label

   • Used to name the item and toggle button

All available ARIA attributes

Keyboard support

For standard HTML elements, keyboard interactions (e.g., tabbing, selecting) are already managed by the browser. However, a TreeView component requires custom implementation to meet accessibility and interaction requirements.

For our TreeView implementation each tree item in the DOM is assigned a data-id attribute (from the items data provided to the component) for unique identification.

Custom keyboard event listeners are implemented to manage interactions. Based on the key pressed we either move focus, select/deselect, or expand collapse an item.

The full specification for TreeView keyboard interaction is defined here.