From bbd589d5ab1606b970d04cb28496e338a7a4c35f Mon Sep 17 00:00:00 2001
From: Wei-Wei Wu <wuxx1045@umn.edu>
Date: Tue, 11 Sep 2018 00:12:28 -0700
Subject: [PATCH] Add "Accessibility" documentation page (#5719)

---
 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..a59df93475a
--- /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 `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
+<canvas id="goodCanvas1" width="400" height="100" aria-label="Hello ARIA World" role="img"></canvas>
+```
+
+This `canvas` element has a text alternative via fallback content.
+
+```html
+<canvas id="okCanvas2" width="400" height="100">
+  <p>Hello Fallback World</p>
+</canvas>
+```
+
+These are some bad examples of **inaccessible** `canvas` elements.
+
+This `canvas` element does not have an accessible name or role.
+
+```html
+<canvas id="badCanvas1" width="400" height="100"></canvas>
+```
+
+This `canvas` element has inaccessible fallback content.
+
+```html
+<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>
+```