chart2music

Chart2Music

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

Key features

• Accessibility for screen reader users - Enables blind users to rapidly 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.

Getting started

Include the following script tag on your page:

<script src="https://cdn.jsdelivr.net/npm/chart2music"></script>

On your page, you will also need your chart. For the sake of simplicity, here's an example with an image:

<img src="mychart.png" id="MyChart" />

Now, in your javascript, you can start a new instance of Chart2Music. In this example, we will include a simple bar chart, and point it to the img element above.

c2mChart({
    type: "bar",
    element: document.getElementById("MyChart"),
    data: [1,2,3]
});

What will the user experience be? When the user navigates to the image, a description will be automatically generated, telling the user that there is interaction available. Then, the user can use arrow keys or keyboard shortcuts to interact with the data.

Advanced

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

Some of the examples you will find there include:

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

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

• with Chart.js
• with D3.js
• with Google Charts
• with AnyChart
• with Chartist.js
• with NVD3.js
• with Plotly.js
• with Morris.js
• with Frappe

Go to chart2music.com for the full tutorial.