بنقرة واحدة
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.
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 |