Accessibility and Part 503 Compliance in apps are a requirement for a lot of completely different corporations, so it is very important be sure that your utility has accessibility choices in it. With SpreadJS, a JavaScript spreadsheet, you possibly can set completely different accessibility choices to assist make your functions compliant when presenting information throughout the spreadsheet. This weblog will go over the completely different accessibility choices you could set within the spreadsheet and what they do.
- Display Readers
- Accessibility Assist
- Various Textual content
If wanted, you possibly can obtain a 30-day totally purposeful trial right here to observe together with this weblog.
Display Readers
SpreadJS helps display readers:
- NVDA for Home windows
- VoiceOver for Mac
These display readers work with various kinds of cells in SpreadJS along with fundamental textual content and quantity cells. These cells embody:
- Buttons – Reads as “Cell (cell reference, i.e. A1) has button (button identify)”
- Checkboxes – Reads as “Cell (cell reference, i.e. A1) has checkbox (checkbox identify)”
- Hyperlinks – Reads as “Cell (cell reference, i.e. A1) has hyperlink (hyperlink identify)”
Accessibility Assist
To get began with including accessibility, the choice have to be set to true:
var unfold = GC.Unfold.Sheets.findControl(doc.getElementById('ss'));
unfold.choices.enableAccessibility = true;This may also be enabled within the SpreadJS Designer utilizing the Settings>Common window:
It ought to be famous that enabling this feature doesn’t have an effect on the efficiency of SpreadJS.
Along with conventional spreadsheet navigation, you can even work together with the context menus of headers as effectively, similar to a filter on the column. This may be finished via a keyboard shortcut with the next code:
var unfold = new GC.Unfold.Sheets.Workbook("ss", { sheetCount: 3 });
var sheet = unfold.getActiveSheet();
unfold.commandManager().register('openColumnContextMenu', perform (workbook, choices) {
var host = workbook.getHost(), sheet = unfold.getActiveSheet();
var activeColIndex = sheet.getActiveColumnIndex();
var colHeaderRect = sheet.getCellRect(0, activeColIndex, -1);
var pointerEvent = new PointerEvent("contextmenu", {
bubbles: true,
cancelable: true,
view: window,
clientX: colHeaderRect.x + colHeaderRect.width / 2 + host.offsetLeft,
clientY: colHeaderRect.y + colHeaderRect.peak / 2 + host.offsetTop,
button: 2
});
host.dispatchEvent(pointerEvent);
}, 49, true, true, false, false);//ctrl+shift+1Various Textual content
SpreadJS helps utilizing various textual content for cells. That is descriptive textual content that helps customers with disabilities and those that are utilizing display readers to work together with cells. If the alt textual content is about for a cell, the display reader will learn the alt textual content out loud. Alt textual content helps plain textual content along with placeholders, similar to “{worth}” for cell values and {formatted} for formatted cell values.
Alt textual content might be set, considered, copied, moved, and modified, and they’re supported in serialization and deserialization for .SSJSON or .SJS file codecs. There are a number of other ways you could set alt textual content:
// Set and get the choice textual content worth with the cell worth utilizing setAltText and getAltText strategies.
activeSheet.setAltText(0, 0, "Set various textual content for the cell ");
console.log(activeSheet.getAltText(0, 0));- altText technique of the CellRange class:
// Set and get the choice textual content worth of a cell utilizing altText technique.
activeSheet.getCell(0, 0).altText("Set various textual content for the cell");
var B1= activeSheet.getCell(1, 1).worth(1000);
B1.altText("Alt Textual content is the cell worth: " + activeSheet.getCell(1, 1).worth());
console.log(activeSheet.getCell(0, 0).altText());
console.log(activeSheet.getCell(1, 1).altText());
activeSheet.setValue(0, 3, new Date(2013, 3, 1));
activeSheet.getCell(0, 3).formatter('d-mmm;@');
console.log("Cell formatter of cell[0,3] is :" + activeSheet.getCell(0, 3).formatter());
console.log("Formatted worth of cell[0,3] is :" + activeSheet.getCell(0, 3).worth());- altText possibility of the StorageType enumeration:
// Use StorageType enumeration to get the choice textual content worth of cell.
activeSheet.getCell(0, 0).altText("Various textual content for the cell ");
activeSheet.clear(0, 0, 3, 3, GC.Unfold.Sheets.SheetArea.viewport, GC.Unfold.Sheets.StorageType.altText);- altText possibility of the CopyToOptions enumeration:
//Use CopyToOption enumeration to repeat the choice textual content worth of cell.
activeSheet.getCell(0, 0).altText("Various textual content for the cell ");
activeSheet.copyTo(0, 0, 1, 1, 2, 2, GC.Unfold.Sheets.CopyToOptions.altText);You may also set altText utilizing the UI by right-clicking on a cell:
The altText characteristic additionally lets you create customized various textual content for cells, which is very helpful for customized fonts and icons inside a cell. You possibly can manually management what the display reader will learn aloud for particular cells.
Along with cells, you possibly can set customized various textual content for photos, shapes, and charts. This may be finished simply utilizing the “alt” technique for the next lessons:
- Image
- FloatingObject
- ConnectorShape
- GroupShape
- Form
- Chart
This may be finished with the next code:
$(doc).prepared(perform () {
// initializing Unfold
var unfold = new GC.Unfold.Sheets.Workbook(doc.getElementById('ss'), { sheetCount: 2 });
// Get the activesheet
var sheet = unfold.getSheet(0);
//allow accessibility
unfold.choices.enableAccessibility = true;
unfold.suspendPaint();
//set focus
unfold.focus();
//change the instructions associated to Tab key, Shift key with Tab key
var instructions = unfold.commandManager();
//TAB
instructions.register("moveToNextCellThenControl", GC.Unfold.Sheets.Instructions.moveToNextCellThenControl, GC.Unfold.Instructions.Key.tab, false, false, false, false);
//SHIFT+TAB
instructions.register("moveToPreviousCellThenControl", GC.Unfold.Sheets.Instructions.moveToPreviousCellThenControl, GC.Unfold.Instructions.Key.tab, false, true, false, false);
//set default row peak 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.Unfold.Sheets.HorizontalAlign.heart;
defaultStyle.vAlign = GC.Unfold.Sheets.VerticalAlign.heart;
defaultStyle.rowHeight = 50;
defaultStyle.colWidth = 150;
sheet.setDefaultStyle(defaultStyle);
//bind information supply
sheet.setDataSource(dataSource);
// get one other sheet 1
var sheet = unfold.getSheet(1);
//put together information for chart
sheet.setValue(0, 1, "Q1");
sheet.setValue(0, 2, "Q2");
sheet.setValue(0, 3, "Q3");
sheet.setValue(1, 0, "Cellular Telephones");
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));
}
}
//add columnClustered chart
var c1 = chart_columnClustered = sheet.charts.add('chart_columnClustered', GC.Unfold.Sheets.Charts.ChartType.columnClustered, 50, 300, 300, 300, "A1:D4");
c1.alt("It is a column chart");
var chartArea = c1.chartArea();
chartArea.border.coloration = "rgba(20, 119, 167, 1)";
chartArea.border.width = 2;
c1.chartArea(chartArea);
// add mango image
var p1 = sheet.photos.add("p1", "mango.jpg", 500, 50, 200, 200);
p1.alt("It is a mango picture");
p1.borderColor("rgba(20, 119, 167, 1)");
p1.borderWidth(2);
p1.borderStyle("strong");
// add cloud form
var sp1 = sheet.shapes.add("sp1", GC.Unfold.Sheets.Shapes.AutoShapeType.cloud, 250, 50, 200, 200);
sp1.alt("It is a cloud form");
unfold.resumePaint();
//bind occasions to set various textual content
perform setAltText(assortment, altText) {
var success = false;
assortment.forEach(perform (obj) {
if (obj.isSelected()) {
obj.alt(altText);
success = true;
}
});
return success;
}
var alternativeText = doc.getElementById("alternativeText");
doc.getElementById("setAlternativeText").addEventListener("click on", perform () {
var altText = alternativeText.worth;
var success = setAltText(sheet.photos.all(), altText);
if (success) {
return;
}
success = setAltText(sheet.charts.all(), altText);
if (success) {
return;
}
setAltText(sheet.shapes.all(), altText);
});
unfold.bind(GC.Unfold.Sheets.Occasions.PictureChanged, perform (occasion, args) {
if (args.propertyName === "isSelected" && args.image.isSelected()) {
alternativeText.worth = args.image.alt();
}
});
unfold.bind(GC.Unfold.Sheets.Occasions.FloatingObjectChanged, perform (occasion, args) {
var floatingObject = args.floatingObject;
if (floatingObject && floatingObject instanceof GC.Unfold.Sheets.Charts.Chart) {
if (args.propertyName === "isSelected" && floatingObject.isSelected()) {
alternativeText.worth = floatingObject.alt();
}
}
});
unfold.bind(GC.Unfold.Sheets.Occasions.ShapeChanged, perform (occasion, args) {
if (args.propertyName === "isSelected" && args.form.isSelected()) {
alternativeText.worth = args.form.alt();
}
});
});These are just some of the accessibility choices which might be obtainable in SpreadJS. We’re constantly working with prospects and including extra accessibility options to make sure apps are compliant. When you’ve got any accessibility necessities you’d prefer to see applied, don’t hesitate to succeed in out to our help crew right here!
Able to Test it Out? Obtain a 30-day Free Trial of SpreadJS Immediately!
