diff --git a/js/ui/chart/docs/general/accessibility.md b/js/ui/chart/docs/general/accessibility.md new file mode 100644 index 0000000..fddff7c --- /dev/null +++ b/js/ui/chart/docs/general/accessibility.md @@ -0,0 +1,39 @@ +# Accessible Charts + +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. + +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. + +This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples. + +## Examples + +These are some examples of **accessible** `canvas` elements. + +By setting the `role` and `aria-label`, this `canvas` now has an accessible name. + +```html + +``` + +This `canvas` element has a text alternative via fallback content. + +```html + +

Hello Fallback World

+
+``` + +These are some bad examples of **inaccessible** `canvas` elements. + +This `canvas` element does not have an accessible name or role. + +```html + +``` + +This `canvas` element has inaccessible fallback content. + +```html +Your browser does not support the canvas element. +```