Orqestria Download
← Zurück zu ERP-Systembauer

Skill · Version 1.0.0

Barrierefreie Diagramme

Erschließt Diagrammwerte über Tastatur, Touch, verständliche Zusammenfassungen und eine passende tabellarische Ansicht.

accessible-data-visualization

Teammitglieder mit diesem Skill

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill, wenn Farben oder reine Maus-Tooltips entscheidende Informationen verbergen.

Wobei hilft er dir?

  • Ergänzt Farben durch Beschriftungen, Muster oder unterschiedliche Markierungen.
  • Ermöglicht Fokus- und Touchbedienung mit klarer Navigation und schließbaren Hinweisen.
  • Zeigt dieselben gefilterten Werte in Zusammenfassung und Datentabelle.

Das könntest du fragen

Mache unser Umsatzdiagramm ohne Maus bedienbar, einschließlich Reihenauswahl, Monatswerten und synchronisierter Tabelle. Die Regionsauswahl soll Zusammenfassung und Tabelle gemeinsam aktualisieren. Ein fokussierter Datenpunkt muss denselben Wert vermitteln wie sein Tooltip.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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?

Enthaltene Dateien 1

  • SKILL.md