Accessibility
Learn how the Tree View implements accessibility features and guidelines, including keyboard navigation that follows international standards.
Guidelines
Common conformance guidelines for accessibility include:
- Globally accepted standard: WCAG
- US:
- ADA - US Department of Justice
- Section 508 - US federal agencies
- Europe: EAA (European Accessibility Act)
WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.
The WAI-ARIA Authoring Practices provide valuable information on how to optimize the accessibility of a Tree View.
Keyboard interactions
Keys | Description |
---|---|
Enter | Activates the focused item.
|
Arrow Up | Moves focus to the previous focusable item, without expanding or collapsing it |
Arrow Down | Moves focus to the next focusable item, without expanding or collapsing it |
Arrow Right + RTL off Arrow Left + RTL on |
|
Arrow Left + RTL off Arrow Right RTL on |
|
Home | Focuses the first item in the tree |
End | Focuses the last item in the tree |
* | Expands all siblings that are at the same level as the focused item without moving focus |
Type-ahead is supported for single characters. When typing a character, focus moves to the next item with a label that starts with the typed character.
Selection
The Tree View supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the Simple Tree View or the Rich Tree View.
To read more about the distinction between selection and focus, you can refer to the WAI-ARIA Authoring Practices guide.
On single-select trees
When a single-select tree receives focus:
- If none of the items are selected when the tree receives focus, focus is set on the first item.
- If an item is selected before the tree receives focus, focus is set on the selected item.
Keys | Description |
---|---|
Space | Selects the focused item. |
Enter | Selects the focused item if the item does not have children. |
On multi-select trees
When a multi-select tree receives focus:
- If none of the items are selected when the tree receives focus, focus is set on the first item.
- If one or more items are selected before the tree receives focus, then focus is set on:
- the first selected item if it is the first render
- the item that was last selected otherwise
Keys | Description |
---|---|
Space | Toggles the selection state of the focused item. |
Shift+Arrow Up | Moves focus and toggles the selection state of the previous item. |
Shift+Arrow Down | Moves focus and toggles the selection state of the next item. |
Ctrl+Shift+Home | Selects the focused item and all items up to the first item. |
Ctrl+Shift+End | Selects the focused item and all the items down to the last item. |
Ctrl+A | Selects all items. |