Accessibility in React TreeGrid

11 Oct 20258 minutes to read

The TreeGrid follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WCAG roles, which are commonly used to evaluate accessibility.

The accessibility compliance for the TreeGrid component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support intermediate
Section 508 Support Yes
Screen Reader Support intermediate
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The TreeGrid component follows WAI‑ARIA patterns. The following ARIA attributes are used in the TreeGrid component:

Attributes Purpose
role=treegrid Used to convey a significant and contextual message.
aria-selected Reflects the selection state for single or multiple selection.
aria-expanded Indicates whether a hierarchical row is expanded or collapsed.
aria-sort Conveys the current sort direction for a column.
aria-busy Announces a loading state while data is being processed.
aria-invalid Indicates that the current input value is invalid.
aria-grabbed Provides accessibility information for interacting with draggable elements
aria-owns Establishing relationships between an element and the elements it owns or controls
aria-label Provides an accessible name for the close icon.

Keyboard interaction

The TreeGrid follows the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported.

Interaction Keys Description
PageDown Navigates to the next page.
PageUp Navigates to the previous page.
Ctrl + Alt + PageDown Navigates to the last page.
Ctrl + Alt + PageUp Navigates to the first page.
Alt + PageDown Navigates to the next page.
Alt + PageUp Navigates to the previous page.
Home Moves focus to the first cell in the row.
End Moves focus to the last cell in the row.
Ctrl + Home Moves focus to the first row.
Ctrl + End Moves focus to the last row.
DownArrow Moves focus down one cell.
UpArrow Moves focus up one cell.
LeftArrow Moves focus left one cell.
RightArrow Moves focus right one cell.
Shift + DownArrow Extends row/cell selection downward.
Shift + UpArrow Extends row/cell selection upward.
Shift + LeftArrow Extends cell selection to the left.
Shift + RightArrow Extends cell selection to the right.
Enter Moves the row/cell selection downward. If current cell is in edit state, then completes the editing. If the current cell is a header then performs sorting.
Shift + Enter Moves the row/cell selection upward. If the current cell is a header then clears sorting for the selected column.
Ctrl + Enter Applies multi-sorting when focused on a header.
Tab Moves focus to the cell selection right side.
Shift + Tab Moves focus to the cell selection left side.
Esc Clears selection.
Ctrl + A Selects all rows or cells.
UpArrow Moves up a row/cell selection.
DownArrow Moves down a row/cell selection.
RightArrow Moves to the right cell selection.
LeftArrow Moves to the left cell selection.
Ctrl + Shift + DownArrow Expands the selected group.
Ctrl + DownArrow Expands all visible groups.
Ctrl + Shift + UpArrow Collapses the selected group.
Ctrl + UpArrow Collapses all visible groups.
Ctrl + P Prints the TreeGrid.

Ensuring accessibility

Accessibility is validated using automated tools such as accessibility-checker and axe-core. The following sample demonstrates TreeGrid accessibility. Open the sample in a new window to evaluate accessibility with these tools.

See also

Refer to the React TreeGrid feature tour page for highlights. Explore the React TreeGrid example to learn how to present and manipulate data.