ウェブアクセシビリティ

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

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 は一般的な説明から始まります。2つのテンプレートがあります。 aria.general.withTitle は、title.text が存在する場合に使用され、aria.general.withoutTitle は、title.text が定義されていない場合に使用されます。

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オプション を参照してください。