chartjs-accessibilitylisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Accessibility (v4.5.1)
Making charts accessible ensures all users, including those with disabilities, can understand your data visualizations. This guide covers WCAG compliance, screen reader support, color accessibility, keyboard navigation, and motion sensitivity.
## Canvas Accessibility Basics
Canvas elements are inherently inaccessible to screen readers. Add proper ARIA attributes and fallback content.
### ARIA Labels and Roles
```html
<canvas
id="myChart"
role="img"
aria-label="Bar chart showing quarterly sales: Q1 $12,000, Q2 $19,000, Q3 $15,000, Q4 $25,000"
></canvas>
```
### Fallback Content
Provide content inside the canvas tag for screen readers and browsers without canvas support:
```html
<canvas id="myChart" role="img" aria-label="Sales comparison chart">
<p>Quarterly sales data: Q1 had $12,000, Q2 had $19,000, Q3 had $15,000, Q4 had $25,000. Q4 showed the highest performance.</p>
</canvas>
```
### Using aria-describedby
Link to a detailed data summary:
```html
<canvas
id="myChart"
role="img"
aria-label="Monthly revenue chart"
aria-describedby="chart-description"
></canvas>
<div id="chart-description" class="visually-hidden">
Revenue grew steadily from January ($10K) to December ($45K),
with a notable spike in November during the holiday season.
</div>
```
```css
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: