Accessibility in EJ2 JavaScript Grid control
13 Apr 20238 minutes to read
Accessibility is achieved in the Grid component through WAI-ARIA standard and keyboard navigations. The Grid 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 Grid:
- 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)
You can achieve a single table announcing on the JAWS screen reader by setting an
e-gridcell-readclass throughcssClassproperty of the grid.
Keyboard navigation
Grid functionalities can be interactive with keyboard shortcuts. In order to utilize all the available keyboard shortcuts, the enableHeaderFocus property of the Grid needs to be set as true.
The following keyboard shortcuts are supported by the Grid.
| Interaction Keys | Description |
|---|---|
| Pager | |
| Tab / Shift + Tab | Focus on the next/previous pager item. |
| Enter / Space | Select the currently focused page. |
| Right Arrow / PageDown | Navigate to next page. |
| Left Arrow / PageUp | Navigate to previous page. |
| Home / End | Navigate to first and last page. |
| Focus Elements | |
| 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. |
| Alt + J | To focus grid header element. |
| Alt + W | To focus grid content element. |
| Selection | |
| 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. |
| Shift + Enter | Moves the row/cell selection upward. |
| 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. |
| Grouping | |
| Ctrl + DownArrow | Expands all the visible groups. |
| Ctrl + UpArrow | Collapses all the visible groups. |
| Ctrl + Space | Performs grouping when focused on a header element. |
| Enter | If the current cell is an expand/collapse cell then expands/collapses the current group/detailrow/childgrid. |
| Ctrl + P | Prints the Grid. |
| Clipboard | |
| Ctrl + C | Copy selected rows or cells data into clipboard |
| Ctrl + Shift + H | Copy selected rows or cells data with header into clipboard |
| Edit | |
| F2 | Edits current selected row/cell in Grid. |
| Enter | If current row/cell is in edit state, then completes the editing. |
| Filtering | |
| Alt + Down arrow | Opens the filter menu(excel, menu and checkbox filter) when its header element is in focused state. |
| Column Menu | |
| Alt + Down arrow | Opens column menu when its header element is in focused state. |
| Reordering | |
| Ctrl + left arrow or right arrow | Reorders the focused header column to the left or right side. |
| Sorting | |
| Ctrl + Enter | Performs multi-sorting on a column when its header element is in focused state. |
| Shift + Enter | Clears sorting for the focused header column. |
| Enter | Performs sorting(ascending/descending) on a column when its header element is in focused state. |