輔助功能

Chart.js 圖表會呈現在使用者提供的 畫布 元素上。因此，由使用者建立 畫布 元素使其可讀取。畫布 元素支援所有的瀏覽器並會呈現在螢幕上，但螢幕閱讀程式無法讀取 畫布 內容。

使用 畫布，輔助功能必須透過 畫布 元素上的 ARIA 屬性加上，或使用放在開啟和結束的畫布標記中的內部折衷內容加上。

這個 網站 （在新視窗中開啟） 對 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>