无障碍性

Chart.js 图表在用户提供的 canvas 元素上渲染。因此，用户需要以一种无障碍的方式创建 canvas 元素。canvas 元素在所有浏览器中都得到支持，并且将在屏幕上渲染，但 canvas 内容将无法被屏幕阅读器访问。

对于 canvas，需要使用 ARIA 属性在 canvas 元素上添加无障碍性，或者使用放置在 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>