How to use Accessibility Extension with FusionCharts?
FusionCharts Accessibility extension allows you to add screen-reader friendly text and keyboard navigation support. Currently, 40 charts from FusionCharts Suite are enabled by this extension (list at the bottom of this page).
How to use this extension?
Once you've downloaded the extension, include these 2 files - fusioncharts.ext.accessibility.js
and fusioncharts.ext.accessibility-resources-strings-en.js
- in the page containing charts (ensure you're using the latest version of FusionCharts).
Voila! Your charts are accessible now.
You can now use the TAB
key to navigate to the chart. When the chart comes to focus, the content of the chart
attribute in the above file is read out.
Upon pressing the TAB
key again, the focus shifts to the plot elements. Now, the content of the plot
attribute in the above file is read out. As one navigates across the different data plots using the ARROW
keys, the detail of each plot is read out from the same plot
attribute.
If the chart has a legend then pressing the TAB
key again will bring the focus to the first legend item. One can use the ARROW
keys to navigate to the subsequent legend items. Content of the legendItem
will now be read out.
If you need to customize the contents of screen-reader text, please follow the instructions below.
Customizing strings for screen reader
The file, fusioncharts.ext.accessibility-resources-strings-en.js
, has resource strings for all the text, which is available for the screen reader to read. You can edit this file for localization and customization that applies to all the charts.
FusionCharts.addDep({
extension: {
'default': {
'base': {
'chart': 'This is a {chartType} chart created with FusionCharts Suite XT. Title of the chart is {caption}. {xAxisName} is plotted on x-axis and {yAxisName} is plotted on y-axis',
'legendItem': 'Toggle the visibility of {legendText}.'
},
'singleSeries': {
'plot': '{yAxisName} for {xAxisName} {label} is {formattedValue}. Plot {plotIndex} of {totalPlots}.'
},
'multiSeries': {
'plot': '{yAxisName} of {seriesName} for {xAxisName} {label} is {formattedValue}. Plot {plotIndex} of {totalPlots}. Series {seriesIndex} of {totalSeries}',
},
'nonCartesian': {
'chart': 'This is a {chartType} chart created with FusionCharts Suite XT. {caption} for {subcaption} is plotted.',
'plot': '{plotIndex}. {label} {formattedValue}.',
'legendItem': 'Toggle the slicing of {legendText}'
},
'scatter': {
'plot': 'X Value : {xValue}, Y Value : {yValue} for {seriesName}. Plot {plotIndex} of {totalPlots}. Series {seriesIndex} of {totalSeries}'
},
'bubble': {
'plot': 'X Value : {xValue}, Y Value : {yValue}, Z Value : {zValue}, Name of the bubble : {bubbleName}, Series : {seriesName}. Plot {plotIndex} of {totalPlots}. Series {seriesIndex} of {totalSeries}'
},
'funnel': {
'chart': 'This is a {chartType} chart created with FusionCharts Suite XT. Title of the chart is {caption}. {plot-0-label} is {plot-0-value}'
}
}
},
name: 'accessibility-resources-strings',
type: 'extension'
});
In addition, you can also use the API to customize the accessible text for individual charts. An example is given below:
FusionCharts.Accessibility.setAlternateTexts({
'chartid': {
'chart': 'Monthly sale of supermart for the period {subcaption}.',
'plot': 'For month {label}, total sales = {formattedValue}'
}
});
You can also use macros (pre-defined variables) in this file to customize or localize the content, as shown below. These macros are replaced with actual values when the chart is rendered. See the entire list of macros in table below.
FusionChart.Accessibility.setAlternateTexts({
'chartid-1': {
'chart': '{caption} is plotted for the period {subcaption}',
'legendItem': 'Press enter or spacebar to toggle the visibility of {legendText}'
},
'chartid-2': {
'plot': '{yAxisName} of {label} is {formattedValue}',
'legendItem': 'Slice out {legendText}'
}
});
The above snippet can either be added to a <script>
tag in the page or written in a separate js file, which can then be added to the code.
Multi-lingual support
The resource strings in the file, fusioncharts.ext.accessibility-resources-strings-en.js
, are meant to be read by the screen reader. These resource strings can be of any language and if the screen reader supports the provided language, it will be read out. Here, the file name is fusioncharts.ext.accessibility-resources-strings-en.js
, where en
stands for "English". If the resource strings are provided in "Spanish", then the file name should be fusioncharts.ext.accessibility-resources-strings-es.js
, where es
is the abbreviated form of "Spanish".
For example for Spanish language, one could modify the resources-string file as,
FusionCharts.addDep({
extension: {
"default": {
"base": {
"chart": "Este es un gráfico {chartType} creado con FusionCharts Suite XT. El título del cuadro es {título}. {xAxisName} se traza en el eje x y {yAxisName} se traza en el eje y",
"legendItem": "Alterna la visibilidad de {legendText}."
},
"singleSeries": {
"plot": "{yAxisName} para {xAxisName} {label} es {formattedValue}. Trazar {plotIndex} de {totalPlots}."
},
"multiSeries": {
"plot": "{yAxisName} de {seriesName} para {xAxisName} {label} es {formattedValue}. Trazar {plotIndex} de {totalPlots}. Series {seriesIndex} de {totalSeries}",
},
"nonCartesian": {
"chart": "Este es un gráfico {chartType} creado con FusionCharts Suite XT. {caption} para {subcaption} se traza.",
"plot": "{plotIndex}. {label} {formattedValue}.",
"legendItem": "Alternar el corte de {legendText}"
},
"scatter": {
"plot": "Valor X: {xValue}, Valor Y: {yValue} para {seriesName}. Trazar {plotIndex} de {totalPlots}. Series {seriesIndex} de {totalSeries}"
},
"bubble": {
"plot": "Valor X: {xValue}, Valor Y: {yValue}, Valor Z: {zValue}, Nombre de la burbuja: {bubbleName}, Serie: {seriesName}. Trazar {plotIndex} de {totalPlots}. Series {seriesIndex} de {totalSeries}"
},
"funnel": {
"chart": "Este es un gráfico {chartType} creado con FusionCharts Suite XT. El título del cuadro es {título}. {plot-0-label} es {plot-0-value}"
},
"pie2d": {
"plot": "{plotIndex}. {label}, {formattedValue}. Porcentaje de cuota de mercado - {percentValue}."
},
"mscolumn2d": {
"chart": "Este es un gráfico {chartType} que muestra {caption} para el período {subcaption}. {xAxisName} se traza en el eje x y {yAxisName} se traza en el eje y.",
"plot": "{yAxisName} en {seriesName} para el año {label} es {formattedValue}. Trazar {plotIndex} de {totalPlots}. Series {seriesIndex} de {totalSeries}."
}
}
},
name: 'accessibility-resources-strings',
type: 'extension'
});
Alternatively, one could also use the setAlternateTexts
API to modify the resources-string file.
Note: To support all languages declare - <meta charset="utf-8">
inside the <head>
tag.
List of predefined macros
Predefined Macro | Description | Valid For |
---|---|---|
{caption} |
Caption of the chart | All Charts |
{subcaption} |
Sub caption of the chart | All Charts |
{label} |
Label of the plot | All charts except scatter and bubble |
{value} |
Value of the plot | All charts except scatter and bubble |
{formattedValue} |
Formatted value of the plot | All charts except scatter and bubble |
{percentValue} |
Percentage value of the plot | All non cartesian charts |
{xValue} |
X value of plot | Only scatter and bubble charts |
{yValue} |
Y value of plot | Only scatter and bubble charts |
{zValue} |
Z value of plot | Only bubble chart |
{bubbleName} |
Name of bubble | Only bubble chart |
{plotIndex} |
Index of in focus plot | All charts |
{totalPlots} |
Total number of plots | All charts |
{legendText} |
In focus legend item | All charts having legend |
{xAxisName} |
Name of x-axis | All cartesian charts |
{yAxisName} |
Name of y-axis | All cartesian charts |
{seriesName} |
Series of in focus plot | All multi series charts |
{seriesIndex} |
Index of in focus plot's series | All multi series charts |
{totalSeries} |
Total number of series | All multi series charts |
{plot-0-label} |
Label of first data | Only funnel chart |
{plot-0-value} |
Value of first data | Only funnel chart |
List of chart types enabled by Accessibility Extension
Single Series Charts
Chart Name | JavaScript Alias |
---|---|
Column 2D | column2d |
Column 3D | column3d |
Bar 2D | bar2d |
Bar 3D | bar3d |
Line 2D | line |
Single-Series Spline 2D | spline |
Area 2D | area2d |
Kagi Chart | kagi |
Waterfall / Cascade Chart | waterfall2d |
Non Cartesian Charts | |
Pie 2D | pie2d |
Pie 3D | pie3d |
Doughnut 2D | doughnut2d |
Doughnut 3D | doughnut3d |
Funnel Chart | funnel |
Pyramid Chart | pyramid |
Real-time Angular | angulargauge |
Multi Series Charts
Chart Name | JavaScript Alias |
---|---|
Multi-series Column 2D | mscolumn2d |
Multi-series Column 3D | mscolumn3d |
Multi-series Bar 2D | msbar2d |
Multi-series Bar 3D | msbar3d |
Multi-series Line 2D | msline |
Multi-Series Spline 2D | msspline |
Multi-series Area 2D | msarea |
Multi-series 2D Single Y Combination Chart | mscombi2d |
Multi-series 2D Dual Y Combination Chart | mscombidy2d |
Scatter Chart | scatter |
Bubble Chart | bubble |
Step Line Chart | msstepline |
Radar/Spider Chart | radar |
Stacked Area 2D | stackedarea2d |
Stacked Column 2D | stackedcolumn2d |
Stacked Column 3D | stackedcolumn3d |
Stacked Bar 2D | stackedbar2d |
Stacked Bar 3D | stackedbar3d |
Logarithmic Column 2D Chart | logmscolumn2d |
Logarithmic Line 2D Chart | logmsline |
Logarithmic Stacked Column 2D | logstackedcolumn2d |
Inverse y-Axis Column 2D Chart | inversemscolumn2d |
Inverse y-Axis Line 2D Chart | inversemsline |
Inverse y-Axis Area 2D Chart | inversemsarea |