Accessibility

Tim Berners-Lee, W3C Director and inventor of the World Wide Web, once said: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Any web site or web application should strive to be accessible. Most of government agencies and companies in private enforce website accessibility requirements. International accessibility standards are invented to make technology and Internet available for all users, regardless of disability status. Using these standardsis a way to provide more people with opportunities.

The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web, and it is one of the leading actors in the global accessibility movement. Please refer to the following documents if you want to learn more about this:

• W3C: Web Accessibility Overview
• W3C: WAI-ARIA, the Accessible Rich Internet Applications Suite

Here at AnyChart we do our best to supports these standards. Please see:

• AnyChart Section 508 Compliance Report
• AnyChart Documentation: Accessibility

WAI-ARIA

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.

In context of AnyChart Charts and maps the technology is the following: special aria-labels which are understood by screen readers and allow users to navigate through page.

Making AnyChart Charts and Maps Accessible

All AnyChart chart and maps are accessible by default. See Demo page - nothing special in the charts code but all texts are available to screen readers.

Tuning AnyChart Accessibilty

If you want to customize texts available to screen readers you do that by overriding accessible text formatters as shown in the code below. Or look at the AnyChart custom accessible texts sample code.

anychart.onDocumentReady(function() {

  // data
  var data = anychart.data.set([
    ["John", 10000, 12000],
    ["Jake", 12000, 15000],
    ["Peter", 18000, 16000],
    ["James", 11000, 13000],
    ["Mary", 9000, 19000]
  ]);

  // map data for the each series
  var Sales2013 = data.mapAs({x: 0, value: 1});
  var Sales2014 = data.mapAs({x: 0, value: 2});

  // chart type
  chart = anychart.column();

  // set data
  var series2013 = chart.column(Sales2013);
  // set series name
  series2013.name("Sales in 2013");

  // set series data
  var series2014 = chart.column(Sales2014);
  // set series name
  series2014.name("Sales in 2014");

  // chart title
  chart.title("Making chart and series titles accessible");

  // set axes titles
  chart.xAxis().title("Retail Channel");
  chart.yAxis().title("Sales");

  // enable legend
  chart.legend(true);

  // enable the accessibility support for series
  series2013.a11y(true);
  series2014.a11y(true);

  // set the titleFormat for the chart
  chart.a11y().titleFormat(function(e){
    chart = this.chart;
    return "Data Plot Y Sum is " + chart.getStat("dataPlotYSum") + "\n" +
        "First Series Y minimum is " + chart.getSeries(0).getStat("seriesYMin") + "\n" +
        "First Series Y maximum is " + chart.getSeries(0).getStat("seriesYMax");
  });

  // set the titleFormat for the series
  series2014.a11y().titleFormat(function(e){
    var series = this.series;
    return "This series named " + series.name() +
                        "has its maximum value in $" + series.getStat("seriesYMax") +
                        ", the average in $" + series.getStat("average") +
                        " and minimum value in $" + series.getStat("seriesYMin");
  });

  // draw
  chart.container("container");
  chart.draw();
});
                    

Another option: you can instruct AnyChart to add an invisible table with data from the chart as shown in the code below or in a sample of AnyChart table mode accessibility.

anychart.onDocumentReady(function() {

  // chart type
  chart = anychart.column();

  // set the accessibility mode as table data
  chart.a11y().mode("data-table");

  // data
  var data = anychart.data.set([
    ["John",  10000, 12000],
    ["Jake",  12000, 15000],
    ["Peter", 18000, 16000],
    ["James", 11000, 13000],
    ["Mary",  9000,  19000]
  ]);

  // map data for the each series
  var Sales2013 = data.mapAs({x: 0, value: 1});
  var Sales2014 = data.mapAs({x: 0, value: 2});

  // set data
  var series2013 = chart.column(Sales2013);
  // set series name
  series2013.name("Sales in 2013");

  // set series data
  var series2014 = chart.column(Sales2014);
  // set series name
  series2014.name("Sales in 2014");

  // chart title
  chart.title("Making chart and series titles accessible");

  // set axes titles
  chart.xAxis().title("Retail Channel");
  chart.yAxis().title("Sales");

  // enable legend
  chart.legend(true);

  // draw
  chart.container("container");
  chart.draw();
});
                    

Full information about the ways you can tune AnyChart Charts and Maps Accessibility is available in AnyChart Documentation Accessibility article.