Web 无障碍

WAI-ARIA，由 W3C 开发的无障碍富互联网应用程序套件，定义了一种方法，使残障人士可以更轻松地访问网络内容和网络应用程序。

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

在图表 HTML 上添加 aria-label 属性，以启用 aria。屏幕阅读器使用此属性来描述内容；此图表将具有以下描述

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 以一般描述开头。有两个模板，aria.general.withTitle 在存在 title.text 时使用，aria.general.withoutTitle 在未定义 title.text 时使用。

在 withTitle 模板中，字符串 {title} 用 title.text 替换。模板 This is a chart named {title}，标题为 Referrer of a User，将生成 This is a chart named Referrer of a User。