アクセシビリティサポート

spread.options.enableAccessibility = true;

<script>
        $(document).ready(function () {
            // Spreadを初期化します。
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
            // アクティブシートを取得します。
            var sheet = spread.getSheet(0);
            // アクセシビリティを有効にします。
            spread.options.enableAccessibility = true;
            spread.suspendPaint();
            // フォーカスを設定します。
            spread.focus();
            // Tabキー、Shift+Tabキーに関連するコマンドを変更します。
            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);
            // デフォルトの行の高さと列の幅を設定します。
            sheet.defaults.rowHeight = 50;
            sheet.defaults.colWidth = 150;
            // デフォルトの水平方向と垂直方向の配置を設定します。
            var defaultStyle = sheet.getDefaultStyle();
            defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
            defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
            defaultStyle.rowHeight = 50;
            defaultStyle.colWidth = 150;
            sheet.setDefaultStyle(defaultStyle);
            // データソースをバインドします。
            sheet.setDataSource(dataSource);
            // Sheet1を取得します。
            var sheet = spread.getSheet(1);
            // チャートのデータを準備します。
            sheet.setValue(0, 1, "Q1");
            sheet.setValue(0, 2, "Q2");
            sheet.setValue(0, 3, "Q3");
            sheet.setValue(1, 0, "Mobile Phones");
            sheet.setValue(2, 0, "Laptops");
            sheet.setValue(3, 0, "Tablets");
            for (var r = 1; r <= 3; r++) {
                for (var c = 1; c <= 3; c++) {
                    sheet.setValue(r, c, parseInt(Math.random() * 100));
                }
            }
            // columnClusteredチャートを追加します。
            var c1 = chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Spread.Sheets.Charts.ChartType.columnClustered, 50, 300, 300, 300, "A1:D4");
            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 p1 = sheet.pictures.add("p1", "mango.jpg", 500, 50, 200, 200);
            p1.alt("これはマンゴーの画像です。");
            p1.borderColor("rgba(20, 119, 167, 1)");
            p1.borderWidth(2);
            p1.borderStyle("solid");
            // 雲のシェイプを追加します。
            var sp1 = sheet.shapes.add("sp1", GC.Spread.Sheets.Shapes.AutoShapeType.cloud, 250, 50, 200, 200);
            sp1.alt("これは雲のシェイプです。");
            spread.resumePaint();
            // イベントをバインドして代替テキストを設定します。
            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();
                }
            });
        });
</script>