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 替换。模板 This is a chart named {title}，标题为 Referrer of a User 将产生 This is a chart named Referrer of a User。