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 配置項。