Orqestria Letöltés
← ERP rendszer építők adatlapja

Skill · 1.0.0 verzió

Akadálymentes diagramok

Billentyűzettel, érintéssel, szöveges összefoglalóval és táblázatos nézettel teszi hozzáférhetővé a diagramok adatait.

accessible-data-visualization

Ezt a skillt használó csapattagok

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha a kimutatást csak színekből vagy egérrel megjelenő súgókból lehet megérteni.

Miben segít neked?

  • Feliratokkal, mintákkal vagy alakzatokkal egészíti ki a színjelöléseket.
  • Kezeli az adatpontok fókuszát, érintését és a súgók bezárását.
  • A szűrt diagrammal egyező adatokat kínál szövegben és táblázatban.

Például ezt kérheted

Tedd egér nélkül használhatóvá a bevételi diagramot, az adatsorválasztással és a havi értékeket mutató táblázattal együtt. Egy régió kiválasztása egyszerre frissítse az összefoglalót és a táblázatot. A fókuszált adatpont ugyanazt az értéket adja át, mint a buboréksúgó.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

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?

Csomagban lévő fájlok 1

  • SKILL.md