Accessibility in Blazor DataGrid Component
29 Jul 20215 minutes to read
Accessibility is achieved in the DataGrid component through WAI-ARIA standard and keyboard navigations. The DataGrid features can be effectively accessed through assistive technologies such as screen readers.
WAI-ARIA
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
The following ARIA attributes are used in the DataGrid:
- grid (role)
- row (role)
- gridcell (role)
- aria-selected (attribute)
- aria-expanded (attribute)
- aria-sort (attribute)
- aria-busy (attribute)
- aria-invalid (attribute)
- aria-grabbed (attribute)
- aria-owns (attribute)
- aria-label (attribute)
Keyboard navigation
DataGrid functionalities can be interactive with keyboard shortcuts.
The following keyboard shortcuts are supported by DataGrid.
| 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. If the current cell is an expand/collapse cell then expands/collapses the current group/detailrow/childgrid. If the current cell is a detailrow, child datagrid or command column then the focus will be moved to the focusable element inside the cell. |
| 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. |
| 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 | Prints the DataGrid. |
| Ctrl + C | Copy selected rows or cells data into clipboard |
| Ctrl + Shift + H | Copy selected rows or cells data with header into clipboard |