From 168f65c1791e753afb4a6a77f033fa0fe247a2b7 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Wed, 5 Sep 2018 01:01:20 -0700 Subject: [PATCH 1/3] adding accessibility page --- docs/SUMMARY.md | 1 + docs/general/accessibility.md | 39 +++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 docs/general/accessibility.md diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 8591dad86ae..15265bd2b5a 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -6,6 +6,7 @@ * [Integration](getting-started/integration.md) * [Usage](getting-started/usage.md) * [General](general/README.md) + * [Accessibility](general/accessibility.md) * [Responsive](general/responsive.md) * [Pixel Ratio](general/device-pixel-ratio.md) * [Interactions](general/interactions/README.md) diff --git a/docs/general/accessibility.md b/docs/general/accessibility.md new file mode 100644 index 00000000000..cee35e4e791 --- /dev/null +++ b/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 JavaScript for `ARIA` attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tag. + +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. +``` From 571ea510e0051eb9333b92f48a4016c1f4223f72 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Wed, 5 Sep 2018 23:49:04 -0700 Subject: [PATCH 2/3] Update accessibility.md --- docs/general/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/general/accessibility.md b/docs/general/accessibility.md index cee35e4e791..6c159c78049 100644 --- a/docs/general/accessibility.md +++ b/docs/general/accessibility.md @@ -2,7 +2,7 @@ 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 JavaScript for `ARIA` attributes on the `canvas` element or added using internal fallback content placed within the opening and closing canvas tag. +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 tag. This [website](http://pauljadam.com/demos/canvas.html) has a more detailed explanation of `canvas` accessibility as well as in depth examples. From 0ce7b78af570727b82fffb060a8cfc251c6b8e1a Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Fri, 7 Sep 2018 00:30:04 -0700 Subject: [PATCH 3/3] Update accessibility.md --- docs/general/accessibility.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/general/accessibility.md b/docs/general/accessibility.md index 6c159c78049..a59df93475a 100644 --- a/docs/general/accessibility.md +++ b/docs/general/accessibility.md @@ -1,8 +1,8 @@ # 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. +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 tag. +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.