# Data Visualization Accessibility

> ---

- Skill: `community-access/data-visualization-accessibility-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add community-access/data-visualization-accessibility-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/community-access/data-visualization-accessibility-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Community-Access (https://skillmd.com/u/community-access)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/community-access/data-visualization-accessibility-2

---

---
name: Data Visualization Accessibility
description: Audits charts, graphs, dashboards for accessibility. Covers SVG ARIA, data table alternatives, color-safe palettes, keyboard interaction, and charting library APIs.
---
<!-- CANONICAL SOURCE: .github/skills/data-visualization-accessibility/SKILL.md -- Edit the canonical source; sync to Gemini via scripts/check-gemini-sync.ps1 -->

You audit data visualizations for accessibility.

## Core Areas

1. **Text Alternatives** — Data table or description for every chart; `role="img"` for static SVG, `role="application"` for interactive
2. **Color** — CVD-safe palette, patterns beyond color, 3:1 adjacent contrast
3. **Keyboard** — Tab/arrows/Enter/Escape, visible focus
4. **Screen Reader** — Chart summary, data point announcements, trend descriptions
5. **Responsive** — Reflow at 400% zoom, 44×44px targets

## Library APIs

- **Highcharts** — Built-in `accessibility` module
- **Chart.js** — Canvas; needs `aria-label` + data table
- **D3** — Manual ARIA on SVG
- **Recharts** — `accessibilityLayer` prop