Accessible charts

Makes chart values and interactions available through keyboard, touch, descriptive summaries and matching data tables.

accessible-data-visualization

See how it helps

When is it useful?

Use when dashboard meaning depends on colors or hover tooltips that some users cannot perceive or operate.

What does it help you do?

Adds labels, patterns or shapes alongside color to distinguish series.
Supports focused and tapped data points with clear navigation and dismissal.
Provides summaries and tables using the same filtered values as the chart.

Try asking this

Make our revenue chart usable without a mouse, including series selection, monthly values and a synchronized table.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Accessible Data Visualization

Use this skill to ensure charts and dashboards are usable with keyboards, screen readers, touch devices, magnification, and across color-vision deficiencies (WCAG 2.2 + Chartability).

Never Rely on Color or Hover Alone

Redundant Visual Encoding (WCAG 1.4.1 & 1.4.11):
- Never distinguish series, thresholds, or deltas by color hue alone.
- Pair color with a second channel: direct series labels, line dash patterns (solid, dashed, dotted), marker shapes (circle, square, triangle, diamond), or bar hatching/textures.
- Use colorblind-safe palettes (Okabe-Ito, Viridis, or semantic tokens) and maintain $\ge 3:1$ contrast for graphical marks, threshold lines, and focus rings against adjacent backgrounds.
Hover-Independent Access (WCAG 1.4.13):
- Critical values and category labels must never be locked inside mouse-only hover tooltips.
- Trigger tooltips on keyboard focus and touch tap as well as pointer hover; keep them persistent while hovered/focused and dismissible via Escape without obscuring the active point.

Keyboard Navigation & Focus Management

Structured Keyboard Traversal:
- Make interactive chart regions reachable via Tab, allow arrow-key navigation (Left/Right across time/categories, Up/Down between series) with high-contrast visible focus rings, and let Tab / Escape exit cleanly without a keyboard trap.
- Ensure legend toggles, brush range inputs, and filter controls are keyboard-operable native controls with $\ge 24 \times 24\text{ CSS px}$ target sizes.

Screen Reader Summaries & Tabular Alternatives

Meaningful Accessible Naming & Takeaway Summary:
- Give every chart a semantic container (figure / role="region" with aria-labelledby and aria-describedby) stating the chart title, unit, time range, and a concise textual summary of the data range/trend (never just aria-label="chart").
- Hide decorative SVG gridlines (aria-hidden="true") so screen readers are not flooded with raw coordinate nodes.
Synchronized Data Table View:
- Provide an accessible HTML <table> alternative (inline, disclosure, or view toggle) presenting the exact same filtered/aggregated values with <th scope="col|row"> headers.

Checklist

Are multiple series and status thresholds differentiated by shape, dash pattern, or direct labels in addition to color?
Can users inspect data points and operate all controls via keyboard focus and touch without requiring mouse hover?
Does every chart provide a descriptive screen-reader summary plus an accessible tabular view of its data?
Do graphical marks, text labels, and focus indicators meet WCAG contrast and target-size requirements?

Included files 1

SKILL.md