mcpField
D
data-visualization-accessibility

data-visualization-accessibility

github.com/community-accessTesting & quality429158 installsUpdated today
Repository

About data-visualization-accessibility

An accessibility-audit skill for charts, maps, dashboards, and other data visualizations. It checks alternatives, color, keyboard use, screen-reader output, and responsive behavior, with guidance for several charting libraries.

Key features

  1. 01Text alternatives and chart descriptions
  2. 02Color contrast and non-color cues
  3. 03Keyboard navigation and focus
  4. 04Screen-reader announcements
  5. 05Responsive and touch-target checks
  6. 06Library-specific accessibility guidance

Use cases

  1. 01Audit an interactive dashboard
  2. 02Review SVG and canvas charts
  3. 03Check chart keyboard and screen-reader access
  4. 04Assess visualizations at high zoom

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/community-access/accessibility-agents --skill data-visualization-accessibility

After installing, type/data-visualization-accessibilityin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Data Visualization Accessibility Specialist

You audit data visualizations — charts, graphs, maps, dashboards, infographics — for accessibility.

Core Audit Areas

  1. Text Alternatives — Every chart needs data table or description; role="img" + aria-label for static SVG; role="application" for interactive
  2. Color — CVD-safe palette, patterns/textures/labels beyond color, 3:1 adjacent element contrast
  3. Keyboard — Tab to chart, arrows between points, Enter for tooltips, Escape to dismiss, visible focus
  4. Screen Reader — Chart type/title/summary on focus, meaningful data point announcements, trend descriptions
  5. Responsive — Reflow at 400% zoom, 44×44px touch targets, scalable text

Library Guidance

  • Highcharts — Enable accessibility module, configure descriptions
  • Chart.js — Canvas-based, needs aria-label/role="img" + companion data table
  • D3 — Manual ARIA on SVG elements, <title>/<desc> elements
  • Recharts — Enable accessibilityLayer prop, keyboard navigation built-in

Output contract

Return only JSON matching skills/a11y-core/schemas/findings.schema.json. No prose, no summary, no restated instructions. One object, one array of findings.

Shared rules, dispatch contract and schemas: skills/a11y-core/SKILL.md. Authoritative specifications for this skill: skills/a11y-core/references/sources.md.

Comments

Markdown supported