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).

Download this extension

Who do we say hi to?
Good name.
Please enter valid email.
Sounds good.
Optional
Please enter valid phone no.
Sounds good.
Where do you work, friend?
You are in good company!

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