{{ target: aria }}
The W3C has developed the WAI-ARIA, the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible. Apache EChartsTM 4 complies with this specification by supporting the automatic generation of intelligent descriptions based on chart configuration items, allowing blind people to understand the chart content with the help of a reading device, making the chart accessible to a wider audience.
By default, ARIA is disabled. To enable it, you should set aria.enabled to be true
. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.
For example:
For config:
option = { aria: { show: true }, title: { text: 'Source of user access to a site', x: 'center' }, series: [ { Name: 'access source', type: 'pie', data: [ { value: 335, name: 'direct access' }, { value: 310, name: 'mail marketing' }, { value: 234, name: 'union ad' }, { value: 135, name: 'video ad' }, { value: 1548, name: 'search engine' } ] } ] };
There should be an aria-label
attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:
This is a chart of "Source of user access to a site." The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.
The default language is in defined by the language package (Chinese by default), but you can configure it with templates.
In addition, Apache ECharts 5 now supports applique textures as a secondary expression of color to further differentiate data. If aria.enabled
is set to true
, aria.decal.show
is set to true
to adopt the default applique style.
Next, let's describe more specifically how these two accessible designs can be configured.
For some charts, the default generated descriptions of the data points are not sufficient to represent the overall information. For example, in the scatter plot below, the default description can include the coordinates of the data points, but knowing the coordinates of hundreds or thousands of points does not help us to effectively understand the information presented in the chart.
At this point, the user can specify the overall description of the chart via the aria.label.description configuration item.
In addition to modifying descriptions holistically, we also provide templates for generating descriptions that can be easily modified at a fine-grained level.
The basic flow for generating descriptions is that if aria.label.description is set to true
, then the accessibility description is generated, otherwise it is not. If aria.label.description is defined, it is used as the full description of the chart, otherwise the description is generated according to the template stitching. We provide a default algorithm for generating descriptions, and only if the generated descriptions are not quite right, we need to modify these templates, or even override them completely with aria.description
.
When using the template, whether title.text is used along with aria.label.general.withTitle while aria.label.general.withoutTitle is used if there is no title text. aria.general.withTitle
supports a template '{title}'
, which will be replaced with chart title. This means, if aria.general.withTitle
is set to be 'The chart title is {title}.'
and the chart title is Price Distribution
, it will be interpreted into 'The chart title is Price Distribution.'
After generating the title, the description of the series (aria.label.series) and the description of the data for each series (aria.label.data) are generated in turn. The following is an example of a template. Likewise, each template may include template variables to replace actual values.
The way to use the default applique pattern was described above. 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.