Accessible Charts

Chart.jsのチャートはcanvas要素上にレンダリングされます。 したがって、canvas要素にアクセシビリティを持たせることが必要です。 canvas要素は全てのブラウザでサポートされていますが、 スクリーンリーダーはアクセスできません。

canvasでは、ARIA属性でアクセシビリティを追加するか、 canvasタグ内にフォールバックコンテンツを追加する必要があります。

このサイトには、canvasのアクセシビリティに関する詳細な説明と例が紹介されています。

例

以下はアクセシビリティを意識したcanvasの例です。

roleとaria-labelを設定することで、 このcanvas要素はアクセス可能になります。

<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>

以下のcanvasにはフォールバックコンテンツによる代替テキストを使用しています。

<canvas id="okCanvas2" width="400" height="100">
    <p>Hello Fallback World</p>
</canvas>

以下は非アクセシブルなcanvas要素の悪例です。

このcanvas要素はアクセス可能な名称やroleがありません。

<canvas id="badCanvas1" width="400" height="100"></canvas>

以下のcanvas要素にはアクセスできないフォールバックコンテンツがあります。

<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>