Chart2Music turns charts into music so the blind can hear data.
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.
- 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.
Try Chart2Music for yourself using the below demos.
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.
For a more involved demo, here is a candlestick plot, made with ChartIQ. Tab to or click on the chart. Use the left and right arrow keys on your keyboard to explore the chart using sound. By default, all 4 candlestick prices (Open, High, Low, and Close) are played. If you want to drill into one of those prices, you can use the up and down arrow keys to navigate between each. Press the H key to get help, including a list of keyboard commands.
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:
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:
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
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.
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.