Web Accessibility in JavaScript Grid

1 Mar 202213 minutes to read

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)

    Grid Actions through keyboard Navigation

    In addition to the built-in actions in Keyboard, we can also perform Grid actions like Sorting, Filtering, Grouping and Reordering externally through keyboard Navigation. In order to achieve that we have used grid methods on keypress event handler.
    Here is the list of actions and the corresponding key for performing the operation

    Interaction Keys Description
    Enter Sort the Selected column
    Alt Opens the Filter Dialog
    Esc Closes the Filter Dialog
    Tab navigates through the elements in the filter menu(default browser behavior)
    Shift + Tab same as Tab, but in reverse order
    Ctrl + LeftArrow Reorder the column with the previous one
    Ctrl + RightArrow Reorder the column with the next one
    Enter Expand/Collapse the Grouped row
    Ctrl + Space Group/Ungroup the selected column
    Ctrl + upArrow Expand/Collapse the Grouped row

    Based on selected column from [columnSelected] (https://help.syncfusion.com/api/js/ejgrid#events:columnselected “columnSelected”) event, we can perform Sorting, Grouping, Filtering, Reorder actions.

  • HTML
    • <div id="Grid"></div>
  • JAVASCRIPT
    • <script type="text/javascript">
            var column,columnSelected, index, cell;
           $(function () {
                $("#Grid").ejGrid({
                    // the datasource "window.gridData" is referred from jsondata.min.js
                    dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(300)),
                    allowGrouping: true,
                    allowPaging: true,
                    allowSorting: true,
                    allowFiltering: true,
                    allowReordering: true,
                    filterSettings: { filterType: "Excel" },
                    allowKeyboardNavigation: true,
                    allowSelection: true,
                    selectionType: "multiple",
                    selectionSettings: { selectionMode: ["column"] },
                    columnSelected: "columnSelected",
                    columns: [
                        { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 100 },
                        { field: "CustomerID", headerText: "Customer ID", width: 120 },
                        { field: "EmployeeID", headerText: "Emp ID", textAlign: ej.TextAlign.Right, width: 80 },
                        { field: "ShipCity", headerText: "Ship City", width: 110 }
                    ],

                });

            $(document).on("keyup", function (e) {
              var gridObj = $("#Grid").ejGrid('instance'), getele;
               if (e.altKey && e.keyCode === 74) { // j- key code.
                   $("#Grid").focus();
               }
               if(columnSelected){
                  getele = $(gridObj.element.find(".e-headercell"))[index];
                  $(getele).focus();
                if($(getele).is(":focus")){
                  if(e.keyCode == 13){  // Enter key-- Sort
                       gridObj.sortColumn(column.field, "ascending");
                  }
                  if (e.keyCode == 18) {  // Alt key--open filter dialog
                       gridObj.element.find(".e-filtericon").eq(index).trigger("tap");
                  }
                  if(e.ctrlKey && e.keyCode == 39 ){  //ctrl+ rightarrow Reorder next column
                     var col = gridObj.getColumnByIndex(index + 1);
                     if(!ej.isNullOrUndefined(col))
                         gridObj.reorderColumns(column.field, col.field);
                 }
                 if(e.ctrlKey && e.keyCode == 37){   //ctrl+ rightarrow Reorder previous column
                    var col = gridObj.getColumnByIndex(index - 1);
                    if(!ej.isNullOrUndefined(col))
                         gridObj.reorderColumns(column.field, col.field);
                 }
                 if(e.ctrlKey && e.keyCode == 32){   //ctrl + space Group/ungroup column
                       if(!gridObj.model.groupSettings.groupedColumns.length)
                          gridObj.groupColumn(column.field);
                       else
                          gridObj.ungroupColumn(column.field);
                  }
                 }
                }
                 if(e.keyCode == 27){    // Esc to close the filter menu
                   if(gridObj.element.closest("body").find(".e-excelfilter").is(":visible"))
                     gridObj.element.closest("body").find(".e-excelfilter").hide();
                  }
                 if(e.ctrlKey && e.keyCode == 38){   // Ctrl+ UpArrow to expand collapse Grouped row
                   ele = gridObj.element.find("tr td >div").first();
                   gridObj.expandCollapse(ele)
                 }
               });

             });
          function columnSelected(args){
            columnSelected = true;
            column = args.column;
            cell = args.headerCell;
            index = args.columnIndex;
         }
    </script>