with one click
data-visualization-accessibility
// Audit charts and graphs for accessibility: SVG ARIA, data table alternatives, keyboard interaction, color-safe palettes, and library APIs.
// Audit charts and graphs for accessibility: SVG ARIA, data table alternatives, keyboard interaction, color-safe palettes, and library APIs.
Compute web accessibility scores (0-100, A-F grades) with severity scoring, confidence levels, and remediation tracking across audits.
Audit and fix markdown for accessibility. Covers ambiguous links, anchors, emoji (remove/translate), Mermaid/ASCII templates, heading hierarchy, table descriptions, and severity scoring.
Canonical severity level definitions and cross-domain mapping for web, document, and markdown audits. Score impact ranges, WCAG conformance alignment, and cross-format normalization.
Cross-format accessibility rule reference with WCAG 2.2 mapping for Word, Excel, PowerPoint, and PDF documents.
CI/CD accessibility pipeline patterns with axe-core CLI, SARIF output, PR annotations, baseline management, and multi-platform CI templates.
Review UI for cognitive load, plain language clarity, and WCAG 2.2 cognitive SC (3.3.7, 3.3.8, 3.3.9). Includes COGA guidance, reading level, auth patterns, and timeout warnings.
| name | data-visualization-accessibility |
| description | Audit charts and graphs for accessibility: SVG ARIA, data table alternatives, keyboard interaction, color-safe palettes, and library APIs. |
Reference data for making charts, graphs, dashboards, and interactive data visualizations accessible. Used by data-visualization-accessibility agent.
<figure>
<svg role="img" aria-labelledby="chart-title chart-desc">
<title id="chart-title">Monthly Revenue 2025</title>
<desc id="chart-desc">Bar chart showing revenue from January through December.
Revenue grew from $50K in January to $120K in December with a dip in July.</desc>
<!-- chart elements -->
</svg>
<figcaption>Figure 1: Monthly Revenue 2025. <a href="#revenue-table">View data table</a></figcaption>
</figure>
<svg role="application" aria-roledescription="interactive chart" aria-label="Monthly Revenue">
<g role="list" aria-label="Revenue data points">
<rect role="listitem" tabindex="0" aria-label="January: $50,000" .../>
<rect role="listitem" tabindex="0" aria-label="February: $55,000" .../>
</g>
</svg>
<div aria-live="polite" class="sr-only" id="chart-announcements"></div>
<svg aria-hidden="true" focusable="false">
<!-- decorative background chart -->
</svg>
Highcharts.chart('container', {
accessibility: {
enabled: true,
description: 'Chart showing quarterly revenue growth',
point: {
valueDescriptionFormat: '{point.name}: {point.y} dollars'
},
keyboardNavigation: {
enabled: true,
order: ['series', 'zoom', 'rangeSelector', 'legend', 'chartMenu']
}
},
// Highcharts has built-in sonification for data
sonification: {
enabled: true
}
});
Highcharts built-in a11y features:
<table> fallback generationnew Chart(ctx, {
type: 'bar',
data: { /* ... */ },
options: {
plugins: {
// Chart.js has limited built-in accessibility
// Use chartjs-plugin-a11y-legend for legend accessibility
// Use chartjs-plugin-datalabels for visible data values
}
}
});
// Chart.js renders to <canvas> ā provide a fallback table or aria-label on canvas
Chart.js limitations:
<canvas aria-label="..." role="img"> or a fallback <table>D3 renders to SVG ā accessibility must be manually implemented:
// Add ARIA to each data element
bars.attr('role', 'listitem')
.attr('tabindex', '0')
.attr('aria-label', d => `${d.name}: ${d.value} units`);
// Add keyboard navigation
bars.on('keydown', (event, d) => {
if (event.key === 'ArrowRight') { /* focus next bar */ }
if (event.key === 'ArrowLeft') { /* focus previous bar */ }
});
<BarChart data={data} accessibilityLayer>
<Bar dataKey="value" />
</BarChart>
Recharts: accessibilityLayer prop adds basic ARIA attributes. Supplement with a data table.
<details>
<summary>View data table</summary>
<table id="revenue-table">
<caption>Monthly Revenue 2025</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Revenue ($)</th>
<th scope="col">Change (%)</th>
</tr>
</thead>
<tbody>
<tr><td>January</td><td>50,000</td><td>ā</td></tr>
<tr><td>February</td><td>55,000</td><td>+10%</td></tr>
</tbody>
</table>
</details>
Palettes that remain distinguishable under common forms of color vision deficiency:
| Color | Hex | Use |
|---|---|---|
| Black | #000000 | Text, borders |
| Orange | #E69F00 | Data series 1 |
| Sky Blue | #56B4E9 | Data series 2 |
| Bluish Green | #009E73 | Data series 3 |
| Yellow | #F0E442 | Data series 4 |
| Blue | #0072B2 | Data series 5 |
| Vermillion | #D55E00 | Data series 6 |
| Reddish Purple | #CC79A7 | Data series 7 |
| Key | Action |
|---|---|
| Tab | Enter/exit chart |
| Left/Right Arrow | Move between data points |
| Up/Down Arrow | Move between series (if multiple) |
| Enter/Space | Show detail or drill down |
| Escape | Exit drill-down or chart |
| Home/End | Jump to first/last data point |
| Key | Action |
|---|---|
| Tab | Move between chart widgets |
| Enter | Enter interactive chart |
| Escape | Exit back to dashboard level |
| Arrow keys | Navigate within active chart |