Skip to content
Pinky UI

Data Accessibility

Every data interaction needs a meaningful non-visual interpretation: title, summary, labels, units, current values and the relationship being shown.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

Native path
Enhanced path

Data Accessibility · the fallback remains complete

Purpose

Every data interaction needs a meaningful non-visual interpretation: title, summary, labels, units, current values and the relationship being shown.

Interactive points require keyboard selection and textual output. Color, line position, bar length or arc angle can reinforce meaning but cannot be its sole carrier. Avoid noisy live regions for every animation frame.

Expose stable final values, announce discrete user-selected changes and provide a table or prose alternative for complex datasets. Accessible data is a content model decision, not an SVG attribute added at the end.

Source: packages/skills/patterns/data-accessibility.md