アクセシブルなチャート

Chart.js グラフはユーザーが指定したものでレンダリングされますcanvas要素。したがって、作成するのはユーザーの責任です。canvas要素にアクセスできるようにします。のcanvas要素はすべてのブラウザでサポートされており、画面上にレンダリングされますが、canvasスクリーン リーダーはコンテンツにアクセスできなくなります。

とcanvas、アクセシビリティは ARIA 属性を使用して追加する必要があります。canvas要素を使用するか、キャンバスの開始タグと終了タグ内に配置された内部フォールバック コンテンツを使用して追加されます。

これWebサイトにはさらに詳しい説明があります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>