[Linux] Accessibility in Sisense Fusion with Scripts
Summary: Micael Santana discusses enhancing accessibility in Sisense Fusion Highcharts widgets. The article provides guidance on using Widget Scripts, Dashboard Scripts, or Plugins to enable Highcharts' accessibility features, which are not enabled by default. These features include keyboard navigation, screen reader support, and high contrast compatibility. The post explains how to apply configurations through scripts for single widgets, entire dashboards, or globally via plugins. It emphasizes that testing and continuous improvement are important for ensuring accessibility.
Accessibility (often abbreviated as a11y) is about building applications that everyone can use, including people who rely on assistive technologies such as screen readers, keyboard navigation, voice control, or high contrast themes.
If you're new to accessibility or would like to learn more about how it applies to Sisense and Compose SDK applications, check out our previous article: Accessibility in Compose SDK
This article focuses specifically on Fusion Highcharts widgets and shows how to enhance the accessibility features already available in Sisense using Widget Scripts, Dashboard Scripts, or Plugins.
Accessibility in Fusion Widgets
Some Fusion widgets uses Highcharts to render. Highcharts includes an extensive Accessibility Module that helps charts become usable for users with disabilities by providing:
Keyboard navigation
Screen reader support
Automatic chart descriptions
High contrast compatibility
Sisense do not enable the Highcharts accessibility module by default, so you will need an additional configuration options.
Which approach should I use?
There are three different ways to apply this configuration depending on your needs.
Widget Script, rely on one widget.
Dashboard Script, rely on all widgets in a dashboard.
Plugins Entire Fusion, or in selected dashboards ids.
All three approaches can use exactly the same Highcharts configuration. The only difference is where the code is executed.
Option 1: Widget Script
If you only need to improve accessibility for a single visualization, open the widget editor and navigate to:
Edit Widget → Script
Then paste the following script.
(function () {
widget.on("beforeviewloaded", function (se, ev) {
var options = ev.options;
// This configuration can be reused for the others scripts
options.accessibility = {
enabled: true,
landmarkVerbosity: "all",
highContrastTheme: true,
keyboardNavigation: {
enabled: true,
seriesNavigation: {
mode: "normal",
},
},
point: {
describeNull: true,
},
series: {
describeSingleSeries: true,
pointDescriptionEnabledThreshold: 200,
},
screenReaderSection: {
beforeChartFormat:
"<{headingTagName}>{chartTitle}</{headingTagName}>" +
"<div>{typeDescription}</div>" +
"<div>{chartSubtitle}</div>" +
"<div>{chartLongdesc}</div>" +
"<div>{viewTableButton}</div>",
},
};
if (options.title && !options.title.text && ev.widget && ev.widget.title) {
options.title.text = ev.widget.title;
}
if (options.exporting) {
options.exporting.accessibility = {
enabled: true,
};
}
});
})();
Option 2: Dashboard Script
To apply the same accessibility improvements to every widget in a dashboard, move the same logic into a Dashboard Script.
/**
* Chart Accessibility (Highcharts) for All Widgets
* This script turns on the Highcharts accessibility module with a fuller set of
* options (keyboard navigation, screen-reader descriptions, live-data
* announcements) for every chart widget on the dashboard, instead of requiring
* the script to be added widget-by-widget.
*
* Features:
* - Applies to all chart-type widgets currently on the dashboard
* - Automatically wires up widgets added to the dashboard afterwards
* - Ensures a screen-reader-visible chart title even if the widget title is hidden
* - Enables accessible exporting menu
*
* Before Implementation:
* - Only widgets whose type starts with "chart/" are targeted (Highcharts-based
* widgets). Pivot, indicator, and map widgets are skipped since the Highcharts
* accessibility module does not apply to them.
*/
(function () {
// Applies the accessibility options to a single widget's Highcharts config
function applyAccessibility(widget) {
// Only Highcharts-based widgets support the accessibility module
if (!widget.type || !widget.type.startsWith("chart/")) return;
widget.on("beforeviewloaded", function (se, ev) {
var options = ev.options;
options.accessibility = {
enabled: true,
// How many ARIA landmarks are exposed to screen readers ("all" | "one" | "disabled").
landmarkVerbosity: "all",
// Respect the OS/browser high-contrast setting instead of the widget's own colors.
highContrastTheme: true,
keyboardNavigation: {
enabled: true,
seriesNavigation: {
// Lets arrow keys move between individual points, not just series.
mode: "normal",
},
},
point: {
// Fallback wording for null/empty data points instead of skipping them silently.
describeNull: true,
},
series: {
describeSingleSeries: true,
// Avoid announcing every single point on very large series (perf + noise).
pointDescriptionEnabledThreshold: 200,
},
screenReaderSection: {
// Surface a "View as data table" link for screen-reader users.
beforeChartFormat:
"<{headingTagName}>{chartTitle}</{headingTagName}>" +
"<div>{typeDescription}</div>" +
"<div>{chartSubtitle}</div>" +
"<div>{chartLongdesc}</div>" +
"<div>{viewTableButton}</div>",
},
};
// Screen readers read the chart title first — make sure one exists even if
// the widget's own title is visually hidden.
if (options.title && !options.title.text && ev.widget && ev.widget.title) {
options.title.text = ev.widget.title;
}
if (options.exporting) {
options.exporting.accessibility = { enabled: true };
}
});
}
// Event Listeners
// Wire up every widget already on the dashboard when it first loads
dashboard.on("initialized", function () {
for (const widget of dashboard.widgets.$$widgets) {
applyAccessibility(widget);
}
});
// Wire up widgets added to the dashboard afterwards (e.g. via "Add Widget")
dashboard.widgets.on("widgetadded", function (se, ev) {
applyAccessibility(ev.widget);
});
})();
This approach avoids duplicating Widget Scripts while keeping the changes limited to a single dashboard.
Option 3: Plugin
If accessibility improvements should be available throughout your Sisense environment, the same configuration can be added to a plugin.
Once installed, you can configurate with specific dashboards that you want to apply and every compatible Highcharts widget automatically receives the enhanced accessibility configuration.
You can download found the plugin here.
Understanding the configuration
Although the script is relatively small, it enables several useful Highcharts accessibility features.
Keyboard Navigation
keyboardNavigation: {
enabled: true,
seriesNavigation: {
mode: "normal"
}
}Allows users to navigate through individual chart points using only the keyboard, improving accessibility for users who cannot use a mouse.
High Contrast Support
Automatically adapts the chart colors when users enable High Contrast Mode in their operating system.
Screen Reader Improvements
Creates a richer description for screen readers by including:
Chart Title
Chart Description
Subtitle
Long Description
View as Data Table button
This gives users additional context before interacting with the visualization.
Better Handling of Missing Data
Instead of silently skipping empty values, screen readers describe null data points.
Large Dataset Optimization
Reading every point in a chart containing hundreds or thousands of values quickly becomes overwhelming.
This threshold limits detailed point descriptions for large datasets while maintaining overall chart accessibility.
Single-Series Improvements
Provides more meaningful descriptions for charts containing only one series.
Automatic Widget Titles
Screen readers announce the chart title before reading its contents.
If the Highcharts title is empty but the Sisense widget has a title, this code copies the widget title into the Highcharts configuration, ensuring users always hear a meaningful title.
Export Accessibility
When exporting is enabled, exported charts retain accessibility metadata whenever supported.
Testing Your Changes
After applying the script, it's a good idea to verify the accessibility improvements.
Some useful testing methods include:
Navigating the chart using only the keyboard
Running Lighthouse accessibility audits
Testing with screen readers such as:
NVDA
VoiceOver
Windows/Mac Narrator
Accessibility testing should always include real keyboard navigation and screen reader testing whenever possible.
Limitations
This solution applies only to Highcharts-based widgets available in Sisense Linux. It does not affect:
Pivot tables
BloX widgets
Custom React visualizations
Compose SDK custom widgets
Those components require their own accessibility implementation.
Conclusion
Accessibility is an ongoing process rather than a one-time configuration. While Sisense provides a option through Highcharts, taking advantage of the additional accessibility options available can help create dashboards that are more inclusive and easier to use.
We encourage you to experiment with these settings, adapt them to your organization's needs, and share any additional accessibility improvements.
References/Related Content
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
