chartjs / awesome

A curated list of awesome Chart.js resources and libraries
MIT License
2.02k stars 128 forks source link

feat: add chartjs-plugin-a11y-legend #67

Closed julianna-langston closed 1 year ago

julianna-langston commented 1 year ago

Awesome Contribution Checklist:

Please Describe Your Addition

This plugin helps improve the accessibility of a chart.js chart. It adds the chart legend to the tab order, and supports keyboard-only users in interacting with individual legends.

The UX for keyboard-only users works as follows:

  1. The users can tab around the page, and land on the first item of the legend.
  2. Users can press left/right arrow keys to navigate within the legend.
  3. Users can press enter/spacebar to toggle datasets, the same as if they were using the mouse to click those legend items.

If you want to try out this UX for yourself, check out this codepen.

The plugin has only been written and tested with Chart.js 4, using the built-in chart types.