search

visa / visa-chart-components

Visa Chart Components (VCC) is an accessibility focused, framework agnostic set of data experience design systems components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.
https://visa.github.io/visa-chart-components/
MIT License
151 stars 28 forks source link

Pie Chart: Value (%) label not being read by screenreaders #67

Closed dreadnl closed 1 year ago

dreadnl commented 1 year ago

Pie Chart: Value (%) label not being read by screenreaders

To replicate: -Turn on screenreader (voiceover/chrome/mac or NVDA/Chrome/Win11)

Thanks for sharing this great work!

frankelavsky commented 1 year ago

I can confirm this is happening on my end too. Seems like a bug, since the expected experience should include that percentage!

@dreadnl, There are some easy ways to resolve this in the meantime though, if you wanted! You can pre-calculate the percentages and pass them in as an additional property of each data point. like: { category: "United States", value: 147, percentage: "33%"} and then use the property accessibility = {…, elementDescriptionAccessor: "percentage" } to get the percentage to read out after the first two values. The property elementDescriptionAccessor of the accessibility prop is used to add any additional information to screen readers that is otherwise missing or unclear based on the input data alone.

chris-demartini commented 1 year ago

This is fixed in the most recent release, closing the issue.