search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

Add an accessible name to pie chart arcs #1189

Open sandbergja opened 5 years ago

sandbergja commented 5 years ago

Is your feature request related to a problem? Please describe. Currently, browser accessibility APIs are unable to determine an accessible name for the arcs in pie charts. You can confirm this with the following steps:

  1. Use Chrome to go to https://swimlane.github.io/ngx-charts/#/ngx-charts/pie-chart
  2. Right click on an arc, and choose Inspect Element.
  3. The Styles tab will likely be open. Choose the Accessibility tab instead.
  4. Look at the Computed Properties area. Note that the Name is set to ""

(more info about checking the accessibility tree in Chrome here: https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)

Without an accessible name, screen readers will not be able to announce anything to their users. Accessible names are also used by other types of assistive technologies, see https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/.

Describe the solution you'd like

The bar charts do a really good job of this. The bar component has an @input called ariaLabel: https://github.com/swimlane/ngx-charts/blob/78367d3d7e8313f335c9841d850a7394e7241a43/src/bar-chart/bar.component.ts#L56

The various types of bar chart components are responsible for generating an appropriate aria-label for those bars. For example: https://github.com/swimlane/ngx-charts/blob/78367d3d7e8313f335c9841d850a7394e7241a43/src/bar-chart/series-vertical.component.ts#L196

Describe alternatives you've considered aria-label is not the only way to label these. See https://www.youtube.com/watch?v=ayl2ue9vIFc for some really great discussion. However, aria-label seems like a good idea for consistency's sake.

fredericojesus commented 3 years ago

Is this going to be fixed ?