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.

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)

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>

Web Accessibility in JavaScript Grid

Keyboard Navigation

WAI - ARIA

Grid Actions through keyboard Navigation