ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
1.4 KiB
Accessibility
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 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.
<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.
<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.
<canvas id="badCanvas1" width="400" height="100"></canvas>
This canvas element has inaccessible fallback content.
<canvas id="badCanvas2" width="400" height="100">Your browser does not support the canvas element.</canvas>