可访问性

Chart.js 图表在用户提供的 canvas 元素上渲染。 因此，由用户以可访问的方式创建 canvas 元素。 canvas 元素在所有浏览器中都有支持，并且会渲染在屏幕上，但屏幕阅读器无法访问 canvas 内容。

对于 canvas，必须使用 canvas 元素上的 ARIA 属性添加可访问性，或者使用放置在开始和结束画布标签中的内部回退内容来添加。

这个 website (opens new window) 对 canvas 的可访问性有更详细的解释以及深入的例子。

例子

这些是 accessible 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>

这些是 inaccessible 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>