Accessibility With Custom Alternative Text

SpreadJS supports custom alternative texts for pictures, charts and shapes.

For the graphics contents, including pictures, charts and shapes, SpreadJS can't provide proper alternative texts, but the users could. The class GC.Spread.Sheets.FloatingObjects.Picture has the method alt. The class GC.Spread.Sheets.Charts.Chart has the method alt. The class GC.Spread.Sheets.Shapes.Shape, class GC.Spread.Sheets.Shapes.ConnectorShape and class GC.Spread.Sheets.Shapes.GroupShape have the method alt.
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); var p1 = sheet.pictures.add("p1", "$DEMOROOT$/spread/source/images/apple.jpg", 50, 50, 200, 200); p1.alt("this is a apple image"); p1.borderColor("rgba(20, 119, 167, 1)"); p1.borderWidth(2); p1.borderStyle("solid"); 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 chartArea = c1.chartArea(); chartArea.border.color = "rgba(20, 119, 167, 1)"; chartArea.border.width = 2; c1.chartArea(chartArea); var sp1 = sheet.shapes.add("sp1", GC.Spread.Sheets.Shapes.AutoShapeType.sun, 300, 50, 200, 200); sp1.alt("this is a sun shape"); spread.resumePaint(); //bind events to set alternative text function setAltText(collection, altText) { var success = false; collection.forEach(function (obj) { if (obj.isSelected()) { obj.alt(altText); success = true; } }); return success; } var alternativeText = document.getElementById("alternativeText"); document.getElementById("setAlternativeText").addEventListener("click", function () { var altText = alternativeText.value; var success = setAltText(sheet.pictures.all(), altText); if (success) { return; } success = setAltText(sheet.charts.all(), altText); if (success) { return; } setAltText(sheet.shapes.all(), altText); }); spread.bind(GC.Spread.Sheets.Events.PictureChanged, function (event, args) { if (args.propertyName === "isSelected" && args.picture.isSelected()) { alternativeText.value = args.picture.alt(); } }); spread.bind(GC.Spread.Sheets.Events.FloatingObjectChanged, function (event, args) { var floatingObject = args.floatingObject; if (floatingObject && floatingObject instanceof GC.Spread.Sheets.Charts.Chart) { if (args.propertyName === "isSelected" && floatingObject.isSelected()) { alternativeText.value = floatingObject.alt(); } } }); spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (event, args) { if (args.propertyName === "isSelected" && args.shape.isSelected()) { alternativeText.value = args.shape.alt(); } }); } 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$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.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"> <textarea type="text" id="alternativeText" value=""></textarea> <input type="button" id="setAlternativeText" value="Set Alternative Text" /> </div> </div> </div> </body> </html>
.sample-tutorial { height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); 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; } #alternativeText { width: 240px; height: 120px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }