概述
本 Demo 展示了如何启用 SpreadJS 的辅助功能，实现与屏幕阅读器的兼容。Demo 演示了启用辅助功能、设置工作簿焦点、注册 Tab 键导航命令，以及绑定数据源的基本流程。
实现思路
创建工作簿实例并启用辅助功能
调用 focus 方法让工作簿获得焦点，使屏幕阅读器能够访问
通过命令管理器注册 Tab 键和 Shift+Tab 键的导航命令
设置工作表的默认样式和数据绑定
代码解析
启用辅助功能
这行代码通过设置 enableAccessibility 选项为 true 来启用工作簿的辅助功能支持。启用后，SpreadJS 会为屏幕阅读器提供可访问的内容信息。
设置工作簿焦点
focus() 方法让工作簿组件获得焦点，这是屏幕阅读器能够读取内容的前提条件。
注册 Tab 键导航命令
这段代码注册了两个导航命令：
moveToNextCellThenControl：Tab 键导航到下一个单元格，如果已是最后一个可见单元格则切换到下一个控件
moveToPreviousCellThenControl：Shift+Tab 键导航到上一个单元格，如果已是第一个可见单元格则切换到上一个控件
register 方法的参数依次为：命令名称、执行函数、按键码、Ctrl 键状态、Shift 键状态、Alt 键状态、Meta 键状态。
运行效果
工作簿加载后自动获得焦点，屏幕阅读器可以立即读取单元格内容
按 Tab 键可以移动到下一个单元格，到达最后一个可见单元格时会尝试切换到下一个控件
按 Shift+Tab 键可以移动到上一个单元格，到达第一个可见单元格时会尝试切换到上一个控件
在 Windows 上可使用 NVDA 或讲述人模式，在 Mac 上可使用 VoiceOver 来体验辅助功能
API 参考
enableAccessibility 选项
用于启用或禁用工作簿的辅助功能支持
默认值为 true
focus 方法
focusIn：可选参数，为 true 时获得焦点，为 false 时失去焦点
调用无参的 focus() 方法会让工作簿获得焦点
moveToNextCellThenControl 命令
当活动单元格是最后一个可见单元格时，选择下一个控件
否则将活动单元格移动到下一个单元格
moveToPreviousCellThenControl 命令
当活动单元格是第一个可见单元格时，选择上一个控件
否则将活动单元格移动到上一个单元格
register 方法
name：命令名称
command：执行函数
key：按键的 Unicode 编码
ctrl：按下 Ctrl 键时为 true
shift：按下 Shift 键时为 true
alt：按下 Alt 键时为 true
meta：按下 Command 键或 Windows 键时为 true
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="spreadjs culture" content="zh-cn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.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;
}
