Web Accessibility

WAI-ARIA, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities.

ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows people with visual disabilities to understand the content of the chart with the help of reading devices, to make the chart accessible to more people. Apache ECharts 5 supports decal patterns that allow chart data to be distinguished by applique patterns in addition to color, providing a better accessibility experience.

The Accessibility function was turn off by default, turn it on by define the value of aria.show as true.

Chart Labels

After setting aria.show to be true, ECharts will automatically generate a description of the chart according to the title, chart, data, etc. Users can also change the description through the configuration item.

About the configuration item:

option = {
  aria: {
    show: true
  },
  title: {
    text: 'Referrer of a User',
    x: 'center'
  },
  series: [
    {
      name: 'Referrer',
      type: 'pie',
      data: [
        { value: 335, name: 'Direct Visit' },
        { value: 310, name: 'Email Marketing' },
        { value: 234, name: 'Union Ad' },
        { value: 135, name: 'Video Ad' },
        { value: 1548, name: 'Search Engine' }
      ]
    }
  ]
};

There will be an area-label attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:

This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.

The default language will be used based on the language pack (default Chinese), or you can customize the template using the configuration item.

Overall Description Modification

For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.

Under this circumstance, user can define the overall description by aria.description configuration item.

Customize Template Description

Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.

The basic process to generate a description: If aria.show is true, then generate the ARIA description (otherwise, no.). If aria.description was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use aria.description to cover the default if needed.

While using the template to generate, firstly make sure whether the title title.text exist to decide to use aria.general.withTitle or aria.general.withoutTitle as the overall description. Configuration item aria.general.withTitle and '{title}' will be replaced by the chart title. In another word, if aria.general.withTitle was defined as This is a chart about "{title}", and the title is 'Prize Distribution Chart', the description of this part will be 'This is a chart about "Prize Distribution Chart"'.

After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.

The complete process of generating description, please check: ARIA Document.

Decal Patterns

In addition, Apache ECharts 5 adds support for decal patterns as a secondary representation of color to further differentiate data. With aria.enabled set to true and aria.decal.show set to true, the default decal style will be applied.

If you need to customize the decal pattern, you can use aria.decal.decals to configure a flexible decal pattern.

Please refer to ARIA option for more detail.