* 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>