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, 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.
This website (opens new window) has a more detailed explanation of
canvas accessibility as well as in depth examples.
These are some examples of accessible
By setting the
canvas now has an accessible name.
<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>
canvas element has a text alternative via fallback content.
<canvas id="okCanvas2" width="400" height="100"> <p>Hello Fallback World</p> </canvas>
These are some bad examples of inaccessible
canvas element does not have an accessible name or role.
<canvas id="badCanvas1" width="400" height="100"></canvas>
canvas element has inaccessible fallback content.
<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>