アクセシビリティ

Chart.js のチャートは、ユーザーが提供した `canvas` 要素上にレンダリングされます。そのため、アクセシビリティを確保するためには、ユーザーが `canvas` 要素を適切に作成する必要があります。`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` 要素には、アクセシブルな名前またはロールがありません。

<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>