Chart2Music

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

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 demos.

tip

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

Here is a simple line plot, made with Chart.js. 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.

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:

• Simple, no frills code example.
• Multi-line plot.
• Bar-line plot.

Any charting library

You can also find examples of integrations with a variety of visualization libraries. Here are our examples with libraries that support visual syncing:

• with AM Charts
• with Chart.js
• with Google Charts
• with HighCharts
• with Plotly.js

These examples provide chart integration without the full visual integration.

• with AnyChart
• with Chartist.js
• with D3.js
• with Frappe
• with Morris.js
• with NVD3.js
• with Recharts
• with Vega-Lite

Library plugins

If you're using chart.js, Chart2Music has made it even easier for you to add accessibility to your charts! Check out chartjs-plugin-chart2music. Currently, the chart.js plugin doesn't support all features, but it's being regularly updated to include as much as possible. If you have a use case that the plugin doesn't support, don't hesitate to open an issue at the plugin's repo.

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.