无障碍访问 (Web Accessibility)

WAI-ARIA，即由 W3C 制定的一套无障碍富互联网应用规范（Accessible Rich Internet Applications Suite），定义了让 Web 内容和 Web 应用对残障人士更具可访问性的方法。

ECharts 4.0 符合该规范，支持根据图表配置智能生成描述，让视障人士在阅读设备的帮助下理解图表内容。Apache ECharts 5 支持贴花图案（decal patterns），除了颜色之外，还可以通过贴花图案来区分图表数据，为色盲人士提供更好的体验。

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

引入 AriaComponent

从 ECharts 5 开始，aria 组件不再默认引入。在使用无障碍功能之前，必须手动引入 AriaComponent。

import { AriaComponent } from 'echarts/components';
echarts.use(AriaComponent);

或者使用 CommonJS

require('echarts/lib/component/aria');

如果不进行此引入，设置 aria.show: true 将无法正常工作。

图表标签

引入 AriaComponent 并将 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.

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