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 highContrastTheme: true Automatically adapts the chart colors when users enable High Contrast Mode in their operating system. Screen Reader Improvements screenReaderSection: {
beforeChartFormat: ...
} 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 point: {
describeNull: true
} Instead of silently skipping empty values, screen readers describe null data points. Large Dataset Optimization pointDescriptionEnabledThreshold: 200 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 describeSingleSeries: true Provides more meaningful descriptions for charts containing only one series. Automatic Widget Titles if (options.title && !options.title.text && ev.widget && ev.widget.title) {
options.title.text = ev.widget.title;
} 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 options.exporting.accessibility = {
enabled: true
}; 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 Compose SDK Accessibility Scripting in Sisense Plugins in Sisense Highcharts Accessibility Module Plugin Repository 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.
