Accessibility in React Treegrid component

24 Jan 20249 minutes to read

The Tree Grid component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Tree Grid 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 Tree Grid component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Tree Grid component:

Attributes Purpose
role=treegrid Used to convey a significant and contextual message to the user.
aria-selected Accurately reflect the selection state, whether it’s single-select or multi-select.
aria-expanded It can be used to show whether a node is expanded or collapsed, making it easier for screen reader users to navigate and understand the hierarchy.
aria-sort Indicate the current sorting order of a table column for users with disabilities, facilitating accessible data presentation and interaction.
aria-busy Loading state to improve accessibility for users, particularly those relying on screen readers.
aria-invalid To indicate whether the user’s input in a form field is valid or invalid, aiding users, including those with disabilities, in understanding and correcting their input.
aria-grabbed Provides accessibility information for users 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 Tree Grid component followed 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 by the Tree Grid component.

Interaction Keys Description
PageDown Goes to the next page.
PageUp Goes to the previous page.
Ctrl + Alt +PageDown Goes to the last page.
Ctrl + Alt + PageUp Goes to the first page.
Alt + PageDown Goes to the next page.
Alt + PageUp Goes to the previous page.
Home Goes to the first cell.
End Goes to the last cell.
Ctrl + Home Goes to the first row.
Ctrl + End Goes to the last row.
DownArrow Moves the cell focus downward.
UpArrow Moves the cell focus upward.
LeftArrow Moves the cell focus left side.
RightArrow Moves the cell focus right side.
Shift + DownArrow Extends the row/cell selection downwards.
Shift + UpArrow Extends the row/cell selection upwards.
Shift + LeftArrow Extends the cell selection to the left side.
Shift + RightArrow Extends the cell selection to the right side.
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 If the current cell is a header then performs multi-sorting.
Tab Moves the cell selection right side.
Shift + Tab Moves the cell selection left side.
Esc Deselects all the rows/cells.
Ctrl + A Selects all the rows/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 the visible groups.
Ctrl + Shift + UpArrow Collapses the selected group.
Ctrl + UpArrow Collapses all the visible groups.
Ctrl + P Prints the TreeGrid.

Ensuring accessibility

The Tree Grid component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Tree Grid component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Tree Grid component with accessibility tools.

See also

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.