neo-oli / chart2music

Turns charts into music so the blind can hear data

Chart2Music

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

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.

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 and an element for screen reader text:

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

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.

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

// If there was an error in generating the chart, print the error message
if(err){
    console.error(err);
}

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.
• Candlestick.

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

• with Chart.js
• with D3.js
• with ChartIQ
• with HighCharts
• with Recharts
• with Google Charts
• with AnyChart
• with Chartist.js
• with NVD3.js
• with Plotly.js
• with AM Charts
• with Vega-Lite
• with Morris.js
• with Frappe

Go to chart2music.com for the full tutorial.