Search results

Accessibility in Vue Grid component

Accessibility is achieved in the Grid component through WAI-ARIA Standard and Keyboard Navigations. User can effectively access the Grid features 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 list of ARIA attributes is used in 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)

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
PageDown Goes to the next page.
PageUp Goes to the previous page.
Ctrl + Alt +PageDown Goes to the 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.