Skip to main content

Chart2Music

Logo showing an alto clef starting a musical staff with whole notes. The staff's lines turn into a line chart.

Chart2Music turns charts into music so the blind can hear data.

npm badge Build verification badge Vulnerabilities badge Code coverage badge

Introduction

Charts can convey a lot of information but are difficult to make accessible for visually impaired and blind users. The most common solutions are to include a data table or attempt to describe the chart in alt text, often resulting in a subpar user experience.

Chart2Music is a TypeScript/JavaScript package which allows authors to add accessibility to their charts. With a couple lines of code, Chart2Music will provide sonification (turning data into sound), screen reader support, and keyboard handling. It works alongside other charting libraries, so you can continue to use the tools that you know best.

Key features

  • Inclusively designed - The dev team behind C2M includes blind people in the design, development, and testing stages.
  • Accessibility for screen reader users - Enables blind users to quickly absorb information about charts and graphs using sound and exploration.
  • Easier maintenance for accessibility requirements - Traditionally, charts and graphs would be made accessible using alt text, which can be difficult to generate or maintain, or data tables, which provide a poor end user experience. C2M provides an automated solution while enhancing the user experience.
  • Visual agnostic - Use C2M alongside your charts, regardless of how your visuals were created. ChartJS? D3.js? An image? C2M works in parallel with your visuals.
  • Use anywhere, for free - C2M is MIT licensed, so you can integrate into anything - personal, commercial, government, etc.

Demo

Try Chart2Music for yourself using the below demo. Tab to or click on the chart. Use the left and right arrow keys on your keyboard to explore the chart using sound. Press the H key to get help, including a list of keyboard commands.

tip

Due to Autoplay restrictions in Firefox, you may have to press spacebar before you hear any sound.

Examples

For code examples in action, see the Chart2Music Examples collection on Codepen.

Some of the examples you will find there include a variety of chart types, like:

You can also find examples of integrations with other visualization libraries, like:

Getting started

If you want to start making accessible charts, check out our installation instructions and walkthrough.

If you have any problems or suggestions, open an issue in our Github repository.