Accessibility Introduction

SpreadJS provides basic accessibility support for ADA compliance and screen readers like Windows Narrator, NVDA (NonVisual Desktop Access) for Windows, and VoiceOver for Mac OS X.

When accessibility is enabled in SpreadJS and the component has focus, the screen readers can access the text content of SpreadJS in the following situations.

  1. The active cell can be changed by pressing Tab key.
  2. The cell can be hovered over by moving the mouse.
SpreadJS will enable accessibility when enableAccessibility is set to true: SpreadJS can get focus in the following ways: Pressing the Tab key or the Tab key with the Shift key when the related keys are registered to moveToNextCellThenControl or selectNextControl, moveToPreviousCellThenControl or selectPreviousControl: Mouse down on the Workbook Invoking the Workbook's focus method In addition, these are common screen readers. NVDA for Windows VoiceOver for Mac
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); //enable accessibility spread.options.enableAccessibility = true; //set focus spread.focus(); //change the commands related to Tab key, Shift key with Tab key var commands = spread.commandManager(); //TAB commands.register("moveToNextCellThenControl", GC.Spread.Sheets.Commands.moveToNextCellThenControl, GC.Spread.Commands.Key.tab, false, false, false, false); //SHIFT+TAB commands.register("moveToPreviousCellThenControl", GC.Spread.Sheets.Commands.moveToPreviousCellThenControl, GC.Spread.Commands.Key.tab, false, true, false, false); var sheet = spread.getActiveSheet(); //set default row height and column width sheet.defaults.rowHeight = 50; sheet.defaults.colWidth = 150; //set default horizontal alignment and vertical alignment var defaultStyle = sheet.getDefaultStyle(); defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center; defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center; sheet.setDefaultStyle(defaultStyle); //bind data source sheet.setDataSource(dataSource); spread.resumePaint(); } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> </div> </div> </div> </body> </html>
.sample-tutorial { height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }