Accessibility in Angular TreeGrid component
25 Aug 20257 minutes to read
The TreeGrid component follows established accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WAI-ARIA practices to promote an inclusive user experience.
Accessibility compliance
The following table summarizes TreeGrid’s compliance with major accessibility criteria:
| 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 fully meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The TreeGrid component implements WAI-ARIA TreeGrid patterns to ensure accessibility support. The following ARIA attributes are used:
| Attribute | Purpose |
|---|---|
role=treegrid |
Identifies the component as a treegrid, conveying its hierarchical nature to assistive technologies. |
aria-selected |
Represents the selection state, whether single or multiple. |
aria-expanded |
Indicates whether a node is expanded or collapsed, helping users understand hierarchical structure. |
aria-sort |
Communicates the current sorting state of a column for accessible data presentation. |
aria-busy |
Indicates loading state to users, especially for screen readers. |
aria-invalid |
Signals whether user input is valid or invalid, aiding accessible form validation. |
aria-grabbed |
Provides context for draggable elements within the grid. |
aria-owns |
Establishes relationships between an element and the elements it controls or owns. |
aria-label |
Supplies accessible names to various controls, such as the close icon. |
Keyboard interaction
TreeGrid follows WAI-ARIA keyboard interactions to support users relying on assistive technologies or keyboard navigation alone. The following keyboard shortcuts are available:
| Interaction Keys | Description |
|---|---|
| PageDown | Go to the next page. |
| PageUp | Go to the previous page. |
| Ctrl + Alt + PageDown | Go to the last page. |
| Ctrl + Alt + PageUp | Go to the first page. |
| Alt + PageDown | Go to the next page. |
| Alt + PageUp | Go to the previous page. |
| Home | Move focus to the first cell. |
| End | Move focus to the last cell. |
| Ctrl + Home | Move focus to the first row. |
| Ctrl + End | Move focus to the last row. |
| DownArrow | Move cell focus downward. |
| UpArrow | Move cell focus upward. |
| LeftArrow | Move cell focus left. |
| RightArrow | Move cell focus right. |
| Shift + DownArrow | Extend row/cell selection downward. |
| Shift + UpArrow | Extend row/cell selection upward. |
| Shift + LeftArrow | Extend cell selection left. |
| Shift + RightArrow | Extend cell selection right. |
| Enter | Move selection downward; in edit, complete editing; in header, sort. |
| Shift + Enter | Move selection upward; in header, clear sort for the column. |
| Ctrl + Enter | In header, perform multi-sorting. |
| Tab | Move right in cell selection. |
| Shift + Tab | Move left in cell selection. |
| Esc | Deselect all rows or cells. |
| Ctrl + A | Select all rows or cells. |
| Ctrl + Shift + DownArrow | Expand the selected group. |
| Ctrl + DownArrow | Expand all visible groups. |
| Ctrl + Shift + UpArrow | Collapse the selected group. |
| Ctrl + UpArrow | Collapse all visible groups. |
| Ctrl + P | Print the TreeGrid. |
Ensuring accessibility
The accessibility of the TreeGrid component is verified using accessibility-checker and axe-core tools with automated testing.
To evaluate accessibility in real scenarios, view the TreeGrid accessibility sample in a new window and test with your preferred accessibility tools.
See also
For additional feature highlights, see the Angular TreeGrid feature tour or explore the TreeGrid live example for interactive data presentation and accessibility configurations.