Accessibility in Angular TreeView component
27 Aug 20255 minutes to read
The TreeView component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility. The TreeView implements comprehensive accessibility features to support hierarchical data navigation, state management, and interactive operations for users with assistive technologies.
The accessibility compliance for the TreeView component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The TreeView component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA attributes are used in the TreeView component to provide comprehensive context about the tree structure, node states, and interactive capabilities:
| Attributes | Purpose |
|---|---|
role=tree |
All tree nodes are contained within the element. |
role=treeitem |
Specifies the role of each tree node in a selectable TreeView and its containment within the tree. |
role=group |
Specifies the role of each parent node container. |
role=checkbox |
Indicates checkbox control along with treeitem element. |
aria-multiselectable |
Indicates whether the TreeView enables multiple selection or not. |
aria-expanded |
Indicates whether the parent node has expanded or not. |
aria-selected |
Indicates the selected node. |
aria-grabbed |
Indicates the selected state on drag-and-drop of node. |
aria-level |
Indicates the level of node in TreeView. |
aria-checked |
Indicates the current checked state of TreeView checkbox. |
aria-label |
Indicates the contextual message for the TreeView checkbox. |
aria-activedescendant |
Identifies the currently active element when focusing on the TreeView. |
aria-disabled |
Indicates element is perceivable but disabled. |
Keyboard interaction
The TreeView component follows the keyboard interaction guideline, making it accessible for users who rely on assistive technologies and keyboard navigation. The following keyboard shortcuts support comprehensive TreeView operations across navigation, selection, editing, and state management:
Navigation Keys
| Interaction Keys | Description |
|——|———|
| Arrow Up | Moves focus to the previous visible tree node in the hierarchical order. |
| Arrow Down | Moves focus to the next visible tree node in the hierarchical order. |
| Arrow Right | Expands the focused parent node to reveal child nodes. |
| Arrow Left | Collapses the focused parent node to hide child nodes. |
| Home | Moves focus to the first tree node in the component. |
| End | Moves focus to the last visible tree node in the component. |
Selection and Action Keys
| Interaction Keys | Description |
|——|———|
| Enter | Selects the focused tree node or confirms editing operations when in edit mode. |
| Space | Toggles the checkbox state of the focused node when checkbox functionality is enabled. |
| Ctrl + A | Selects all tree nodes when multi-selection is enabled. |
Editing Keys
| Interaction Keys | Description |
|——|———|
| F2 | Initiates inline editing mode for the focused tree node when editing is enabled. |
| Esc | Cancels the current editing operation and returns focus to the tree node without saving changes. |
Ensuring accessibility
The TreeView component’s accessibility levels are ensured through comprehensive testing using accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the TreeView component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the TreeView component with accessibility tools.