The Top Accessibility Options of a JavaScript Spreadsheet Component

Accessibility support can be a make-or-break feature for many companies, especially those in or developing for US Federal agencies that need their applications to be fully accessible to people with disabilities, for example, Section 508 Compliance. This requirement also includes support for keyboard shortcuts to better interact with the data.

These different key combinations let you perform a range of different actions to interact with SpreadJS without using the mouse. This blog will detail a few of these keyboard shortcuts and what you can do with them.

General Accessibility

SpreadJS has support for a few general accessibility options, which can be turned on by setting enableAccessibility to true:

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));  
spread.options.enableAccessibility = true;

This essentially will enable screen readers (NVDA for Windows and VoiceOver for Mac), which will read the currently active cell if the SpreadJS component has focus. You could also set alternative text for pictures, charts, and shapes in a sheet, and this text is what will be read by the screen reader:

var p1 = sheet.pictures.add("p1", "./apple.jpg", 50, 50, 200, 200);  
p1.alt("this is a apple image");

var c1 = sheet.charts.add("c1", GC.Spread.Sheets.Charts.ChartType.columnCluster, 50, 300, 400, 400, "C1:D5");  
c1.alt("this is a column chart");

var sp1 = sheet.shapes.add("sp1", GC.Spread.Sheets.Shapes.AutoShapeType.sun, 300, 50, 200, 200);  
sp1.alt("this is a sun shape");

Built-in Shortcuts

There are a few keyboard shortcuts already built into SpreadJS. These include:

• Ctrl+Z and Ctrl+Y for undo/redo
• Ctrl+Down/Left/Up/Right arrow for navigating the sheet
• Shift+Down/Left/Up/Right arrow for changing selection
• Many more

To see a complete list of the supported keyboard shortcuts, check out this documentation page: /spreadjs/docs/latest/online/keyboard.html

It should be noted that they depend entirely on what platform SpreadJS is being run in for all these shortcuts. For example, Ctrl+PageUp or PageDown will switch between sheet tabs, but if SpreadJS is being used in a standard browser (like Google Chrome), these shortcuts will instead switch browser tabs.

Registering Shortcuts

If you want to bind a specific keyboard shortcut in SpreadJS, you can check to see which commands are available here:/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Commands.html

Once you have a command picked out, you can register it to a keypress using the command manager, like pressing "W" to navigate up a cell in the worksheet:

var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));  
var commandManager = spread.commandManager();  
commandManager.register('customNavigationUp', GC.Spread.Sheets.Commands.navigationUp, 'W'.charCodeAt(0), false, false, false, false);

This can be any keyboard shortcut that you want, but it should be noted that sequential keyboard shortcuts are not supported currently (like Alt + S + E).

A more common shortcut would be to switch between sheets, which you can bind to Alt+PageUp/PageDown:

commandManager.setShortcutKey("navigationPreviousSheet", GC.Spread.Commands.Key.pup, true, false, true, false); // Ctrl + Alt + PageUp  
commandManager.setShortcutKey("navigationNextSheet", GC.Spread.Commands.Key.pdn, true, false, true, false); // Ctrl + Alt + PageDown

Another valuable shortcut to create would be to move to another control either before or after the SpreadJS instance if there are multiple controls on a page:

// Maps Tab key to the moveToNextCellThenControl command  
commandManager.setShortcutKey('moveToNextCellThenControl', GC.Spread.Commands.Key.tab, false, false, false, false); // Tab key  
// Maps Shift + Tab key to the moveToPreviousCellThenControl command  
commandManager.setShortcutKey('moveToPreviousCellThenControl', GC.Spread.Commands.Key.tab, false, true, false, false); // Shift key and Tab key

The focusable controls could be defined as such:

<input type="text" value="This is header." />  
<div id="sampleDiv"></div>  
<input type="text" value="This is footer" />

And then defined as the previous and next controls for SpreadJS:

spread.nextControl(document.getElementById("input1"));  
spread.previousControl(document.getElementById("input2"));

In each of these examples, either the register or setShortcutKey methods were used.

• The register method is used for registering a custom command to the command manager, and a shortcut key combination can be added in this same method call
• The setShortcutKey method is used for setting shortcut key combinations to commands that already exist in the command manager. This is more used for the built-in commands to change their shortcut key

Custom Commands

You can also define your own custom commands to bind to a specific key combination. To allow undo/redo functionality, we need to make sure to include the startTransaction and endTransaction methods.

As an example, if I wanted to create a custom command that changed the background color of selected cells, I could create a command like so:

var sheet = spread.getActiveSheet();  
var command = {  
    canUndo: true,  
    execute: function(spread, options, isUndo) {  
        var Commands = GC.Spread.Sheets.Commands;  
        if (isUndo) {  
            Commands.undoTransaction(spread, options);  
            return true;  
        } else {  
            Commands.startTransaction(spread, options);  
            spread.suspendPaint();  
            var selections = options.selections;  
            var value = options.backColor;  
            selections.forEach(function(sel) {  
                sheet.getRange(sel.row, sel.col, sel.rowCount, sel.colCount).backColor(value);  
            });  
            spread.resumePaint();  
            Commands.endTransaction(spread, options);  
            return true;  
        }  
    }  
};

This essentially specifies when the command starts and ends so that the commandManager can undo or redo it. You can then register this command to a key using the register method in the commandManager used in the previous section.

Another example would be to use a custom function as a shortcut. In this case, we might want to have the F2 key (which has a keycode of "113) start editing a cell:

spread.commandManager().register('f2_cmd', function (context) {  
    var sheet = context.getActiveSheet();  
    if (!sheet.isEditing()) {  
        return sheet.startEdit();  
    }  
}, 113, false, false, false, false);

Keyboard Shortcuts Project

In addition to the built-in shortcuts and creating your custom shortcuts, we have put together a special project with some typical Excel-like shortcuts implemented in it. This project can be found in our GitHub SpreadJS Resources repo: https://github.com/GrapeCity/spreadjs-resources/tree/master/Keyboard%20Shortcuts

This project has commands such as:

• Shift+Space to select an entire row
• Ctrl+9 to hide selected rows
• Alt+= to insert a SUM function
• Ctrl+Shift+"+" to insert rows or columns
• Complete list here under "Additional Keyboard Shortcuts": /spreadjs/docs/latest/online/keyboard.html

You can include this project as an extension to your own to have all of these keyboard shortcuts implemented for you.

That is all that is needed to implement your keyboard shortcuts and support accessibility in your project with SpreadJS. To try this out and more, download a trial of SpreadJS today: /spreadjs