Web Accessibility

Web Accessibility is achieved in the Grid control through Keyboard Navigation and WAI-ARIA Standard.

Keyboard Navigation

Supported Keyboard Interactions keys with its description and its corresponding Grid keySettings properties are tabulated as follows.

Interaction Keys Description KeySettings Property
Alt + j Focus the Grid
Insert Insert record in Grid insertRecord
Delete Delete record in Grid deleteRecord
F2 Edit record in Grid editRecord
Enter Save edited or added saveRequest
Esc Cancel add or edit state cancelRequest
PgDn Go to next Page nextPage
PgUp Go to previous Page previousPage
Ctrl +Alt +PgDn Go to last page lastPage
Ctrl + Alt + PgUp Go to first page firstPage
Alt + PgDown Go to next Pager nextPager
Alt + PgUp Go to previous Pager previousPager
Home Go to first cell firstCellSelection
End Go to last cell lastCellSelection
Ctrl + Home Go to first row firstRowSelection
Ctrl + End Go to last row lastRowSelection
Up arrow Move to up cell selection upArrow
Down arrow Move to down cell selection downArrow
Right arrow Move to right cell selection rightArrow
Left arrow Move to left cell selection leftArrow
Shift + Up arrow Select cells or rows from current cell to its top cell multiSelectionByUpArrow
Shift + Down arrow Select cells or rows from current cell to its down cell multiSelectionByDownArrow
Shift + Left arrow Select cells from current cell to its left cell multiSelectionByLeftArrow
Shift + Right arrow Select cells from current cell to its Right cell multiSelectionByRightArrow
Tab Go to next cell moveCellRight
Shift + tab Go to previous cell moveCellLeft
Alt + DownArrow Expand selected group selectedGroupExpand
Ctrl + DownArrow Expand All visible groups totalGroupExpand
Alt + UpArrow Collapse selected group selectedGroupCollapse
Ctrl + UpArrow Collapse All visible groups totalGroupCollapse

To change the keyboard interaction keys for the grid actions mentioned in above table, modify the corresponding properties of Grid keySettings.

The default key for moving to next page in grid is “PageDown” key and in the following code example, we have changed it to “Right Arrow”.

  • html
  • <div id="Grid"></div>
  • javascript
  • $(function () {
    	$("#Grid").ejGrid({
    		//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
    		dataSource : window.gridData,
    		keySettings: {
                     nextPage: "39", previousPage: "37"
            },
    		allowPaging : true,
    		columns : [
    					{ field: "OrderID"},
    					{ field: "CustomerID" },
    					{ field: "EmployeeID" },
    					{ field: "ShipCity" },
    					{ field: "ShipCountry" }
    				]
    	});
    });

    WAI - ARIA

    This helps in enabling better user interaction in ejGrid and uses the W3C’s Widget Design specification and added customize attributes. Please find the list of ARIA attributes used.

    • grid (role)
    • row (role)
    • gridcell (role)
    • aria-selected (attribute)