Akadálymentes diagramok

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

1. 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.
2. 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?