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-read class through cssClass property 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.
Print  
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.