可访问性

¥Accessibility

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

¥Chart.js charts are rendered on user provided canvas elements. Thus, it is up to the user to create the canvas element in a way that is accessible. The canvas element has support in all browsers and will render on screen but the canvas content will not be accessible to screen readers.

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

¥With canvas, the accessibility has to be added with ARIA attributes on the canvas element or added using internal fallback content placed within the opening and closing canvas tags.

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

¥This website (opens new window) has a more detailed explanation of canvas accessibility as well as in depth examples.

示例

¥Examples

这些是可访问的 canvas 元素的一些示例。

¥These are some examples of accessible canvas elements.

通过设置 role 和 aria-label，这个 canvas 现在有了一个可访问的名称。

¥By setting the role and aria-label, this canvas now has an accessible name.

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

这个 canvas 元素有一个通过回退内容的文本替代。

¥This canvas element has a text alternative via fallback content.

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

这些是不可访问的 canvas 元素的一些不好的例子。

¥These are some bad examples of inaccessible canvas elements.

此 canvas 元素没有可访问的名称或角色。

¥This canvas element does not have an accessible name or role.

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

此 canvas 元素具有不可访问的后备内容。

¥This canvas element has inaccessible fallback content.

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