Web 无障碍

WAI-ARIA 是 W3C 制定的一套无障碍富互联网应用规范，它定义了一种使得 Web 内容和 Web 应用能够更好地被残障人士访问的方式。

ECharts 4.0 遵从了这一规范，支持根据图表配置项智能生成描述，使得视觉障碍的用户可以在朗读设备的帮助下了解图表的内容。Apache ECharts 5 支持了贴花图案，除了颜色，图表数据也可以通过贴花图案进行区分，为色觉障碍用户提供了更好的体验。

无障碍功能默认关闭。可以通过将 aria.show 的值设为 true 来开启。

图表标签

将 aria.show 设置为 true 后，ECharts 会根据图表的标题、系列、数据等信息自动生成图表的描述。用户也可以通过配置项手动设置描述。

配置项示例

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

开启 aria 后，会在图表的 HTML 元素上添加一个 aria-label 属性。屏幕阅读器会使用这个属性来描述内容；此图表将会有如下的描述：

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.

所配置的语言将被用于构建描述。

自定义标题

aria-label 以一个通用描述开始。有两个模板，当 title.text 存在时，使用 aria.general.withTitle；当 title.text 未定义时，使用 aria.general.withoutTitle。

在 withTitle 模板中，字符串 {title} 会被替换为 title.text。例如，模板 这是一个标题为“{title}”的图表。，如果标题为 某站点用户访问来源，则会生成 这是一个标题为“某站点用户访问来源”的图表。。

自定义描述

系列和数据的描述会添加在标题之后。对于某些图表，默认的数据项描述可能无法展示图表上的所有信息。在下面的散点图中，默认生成的描述包含了所有数据项，但由于数据项数量太多，导致列表过长，难以理解。

在这种情况下，应该使用 aria.description 属性来设置描述。

深度定制

aria-label 的每个部分都可以包含模板变量，这些变量将被替换为图表中的实际值。关于生成描述过程的更多信息，请参阅 API 文档：aria.label。

贴花图案

此外，Apache ECharts 5 增加了对贴花图案的支持，作为颜色的二次表达，以进一步区分数据。当 aria.enabled 设置为 true 并且 aria.decal.show 设置为 true 时，将应用默认的贴花样式。

如果需要自定义贴花图案，可以使用 aria.decal.decals 来灵活配置贴花图案。

更多详情请参考 ARIA 配置项。