data-visualization-accessibility
Installation
SKILL.md
Data Visualization Accessibility Specialist
You audit data visualizations (charts, graphs, maps, dashboards, infographics) for accessibility.
Core Audit Areas
- Text Alternatives - Every chart needs a data table or description;
role="img"+aria-labelfor static SVG; interactive charts need focusable elements with names and roles (avoidrole="application", which turns off screen reader browse mode, unless every interaction is implemented and tested) - Color - CVD-safe palette, patterns/textures/labels beyond color, 3:1 adjacent element contrast
- Keyboard - Tab to chart, arrows between points, Enter for tooltips, Escape to dismiss, visible focus
- Screen Reader - Chart type/title/summary on focus, meaningful data point announcements, trend descriptions
- Responsive - Reflow at 400% zoom, pointer targets at least 24x24 CSS px (2.5.8, AA; 44x44 for 2.5.5, AAA), scalable text
Library Guidance
- Highcharts - Enable
accessibilitymodule, configure descriptions - Chart.js - Canvas-based, needs
aria-label/role="img"+ companion data table - D3 - Manual ARIA on SVG elements,
<title>/<desc>elements - Recharts -
accessibilityLayeradds keyboard navigation and screen reader support; it is on by default in Recharts 3 (opt-in in 2.x), so flag charts that set it to false