Accessibility in Blazor TreeGrid Component
25 Apr 20259 minutes to read
The Blazor 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 Blazor Tree Grid 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 | |
| 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
The Blazor Tree Grid component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Blazor 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 Blazor 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 Blazor Tree Grid component.
| Windows | Mac | Description |
|---|---|---|
| PageDown | PageDown | Goes to the next page. |
| PageUp | PageUp | Goes to the previous page. |
| Ctrl + Alt +PageDown | ⌘ + ⌥ + PageDown | Goes to the last page. |
| Ctrl + Alt + PageUp | ⌘ + ⌥ + PageUp | Goes to the first page. |
| Alt + PageDown | ⌥ + PageDown | Goes to the next page. |
| Alt + PageUp | ⌥ + PageUp | Goes to the previous page. |
| Home | fn+← | Goes to the first cell. |
| End | fn+→ | Goes to the last cell. |
| Ctrl + Home | ⌘ + Home | Goes to the first row. |
| Ctrl + End | ⌘ + 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 | 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 | ⇧ + Enter | Moves the row/cell selection upward. If the current cell is a header then clears sorting for the selected column. |
| Ctrl + Enter | ⌘ + Enter | If the current cell is a header then performs multi-sorting. |
| Tab | Tab | Moves the cell selection right side. |
| Shift + Tab | ⇧ + Tab | Moves the cell selection left side. |
| Esc | Esc | Deselects all the rows/cells. |
| Ctrl + A | ⌘ + A | Selects all the rows/cells. |
| ↑ | ↑ | Moves up a row/cell selection. |
| ↓ | ↓ | Moves down a row/cell selection. |
| → | → | Moves to the right cell selection. |
| ← | ← | Moves to the left cell selection. |
| Alt + DownArrow | ⌥ + ↓ | Expands the selected group. |
| Ctrl + DownArrow | ⌘ + ↓ | Expands all the visible groups. |
| Alt + UpArrow | ⌥ + ↑ | Collapses the selected group. |
| Ctrl + UpArrow | ⌘ + ↑ | Collapses all the visible groups. |
| Ctrl + P | ⌘ + P | Prints the Tree Grid. |
Ensuring accessibility
The Blazor Tree Grid component’s accessibility levels are ensured through an axe-core with playwright tests.
The accessibility compliance of the Blazor Tree Grid component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor Tree Grid component with accessibility tools.