| commit | author | age | ||
| 83c3f6 | 1 | # Accessible Charts |
| SP | 2 | |
| 3 | 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. | |
| 4 | ||
| 5 | 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. | |
| 6 | ||
| 7 | This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples. | |
| 8 | ||
| 9 | ## Examples | |
| 10 | ||
| 11 | These are some examples of **accessible** `canvas` elements. | |
| 12 | ||
| 13 | By setting the `role` and `aria-label`, this `canvas` now has an accessible name. | |
| 14 | ||
| 15 | ```html | |
| 16 | <canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas> | |
| 17 | ``` | |
| 18 | ||
| 19 | This `canvas` element has a text alternative via fallback content. | |
| 20 | ||
| 21 | ```html | |
| 22 | <canvas id="okCanvas2" width="400" height="100"> | |
| 23 | <p>Hello Fallback World</p> | |
| 24 | </canvas> | |
| 25 | ``` | |
| 26 | ||
| 27 | These are some bad examples of **inaccessible** `canvas` elements. | |
| 28 | ||
| 29 | This `canvas` element does not have an accessible name or role. | |
| 30 | ||
| 31 | ```html | |
| 32 | <canvas id="badCanvas1" width="400" height="100"></canvas> | |
| 33 | ``` | |
| 34 | ||
| 35 | This `canvas` element has inaccessible fallback content. | |
| 36 | ||
| 37 | ```html | |
| 38 | <canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas> | |
| 39 | ``` | |
