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, supports generating a description based on the chart configuration intelligently to allow people with visual disabilities to understand the content of the chart with the help of reading devices. Apache ECharts 5 supports decal patterns that allow chart data to be distinguished by decal patterns in addition to color providing a better experience to those with color-blindness.

This accessibility function is turned off by default. It can be turned on by setting the value of aria.show to true.

Chart Labels

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

Example configuration object:

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' }
      ]
    }
  ]
};

Enabling aria with add an aria-label attribute on the Chart HTML. Screen readers use this attribute to describe the contect; this chart would have the following description:

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 configurated language will be used to build the description.

Customizing Title

The aria-label begins with the a general description. There are two templates, aria.general.withTitle to be used when title.text exists and aria.general.withoutTitle for when title.text is not defined.

In the withTitle template, the string {title} is replace with title.text. The template This is a chart named {title} with a title of Referrer of a User would yield This is a chart named Referrer of a User.

Customizing Description

The description of the series and data are added after the title. For some charts, the default item description cannot show all the information on the chart. In the following scatter chart the description generated by default includes all the items but it is not accessible due to the quantity of items making the list too long to understand.

Under this circumstance, the description should be set with the aria.description property.

In-Depth Customization

Every part of the aria-label can include template variables to be replaced by the actual value in the chart. More information on the process of generating a description is available in the API documentation: aria.label.

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.