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;
}