Chart.js 可访问性

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

对于 canvas ,必须在 canvas 元素上使用 ARIA 属性添加可访问性,或者使用放置在开始和结束 canvas 标签内的内部后备内容添加。

示例

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

通过设置角色和 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>

查看笔记

扫码一下
查看教程更方便