Accessibility Audio Boxplot

A Highcharts Accessibility Audio Boxplot

In this tutorial, I will show you how to create an interactive audio boxplot chart using Highcharts and demonstrate how sonification can be used to enhance accessibility.

Click on the play button on the demo to experience the audio boxplot chart.

Boxplots, also known as box-and-whisker plots, offer several benefits when it comes to analyzing and visualizing data, such as summarizing data distribution, identifying outliers, and visualizing spread and variability. However, not everyone can fully benefit from visual information, especially those with visual impairments. This is where accessibility features come into play. In this demo, I will fetch CSV data to create a boxplot and add some sonification magic to make it audible. So, let’s go through the chart’s code step by step to understand how to create an interactive audio boxplot using Highcharts.

Libraries

Be sure to import Highcharts and its necessary modules, such as highcharts-more for additional chart types, data for handling CSV data, sonification for audio representation, and accessibility for making the chart accessible.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

HTML structure

The code structure is pretty simple. It includes a button with the ID sonify to trigger sonification

<button id="sonify">Play chart</button>

A div element with the ID container where the chart will be rendered

<div id="container"></div>

A pre element with the ID csv containing the data in CSV format

<pre id="csv">...</pre>

The figure element provides a container for the chart and related content.

<figure class="highcharts-figure">

Data

In this demo, the data is fetched from the <pre> element with the ID csv in the HTML document.

data: { csv: document.getElementById('csv').textContent }

The CSV is organized in a classic boxplot data configuration: Name,Minimum,First quartile,Median,Third quartile,Maximum.

Sonification settings

It is important to mention that the sonification property configures the audio representation of the chart. The mapping object inside tracks object is a critical part of the sonification configuration, as it defines how the different elements such as the point names and the data points in the box plot are translated into sound.
Here is the point name code sonification:

{
  type: 'speech',
  mapping: {
    text: '{point.name}',
    rate: 2,
    volume: 0.3
  }
  And here is the code
  for a data point inside the boxplot: {
    mapping: {
      pitch: {
        mapTo: 'low'
      },
      playDelay: 1300
    }

The critical element is the playDelay option, which enables the tones to be played sequentially. When displaying a boxplot, the process begins with the name, followed by the minimum after a delay of 1300 milliseconds, then q1 after 1420ms, followed by the median, q3, and finally the maximum

{
  type: 'speech',
  mapping: {
    text: '{point.name}',
    rate: 2,
    volume: 0.3
  }
}, {
  mapping: {
    pitch: {
      mapTo: 'low'
    },
    playDelay: 1300
  }
}, {
  mapping: {
    pitch: {
      mapTo: 'q1'
    },
    playDelay: 1420
  }
}, {
  mapping: {
    pitch: {
      mapTo: 'median'
    },
    playDelay: 1540
  }
}, {
  mapping: {
    pitch: {
      mapTo: 'q3'
    },
    playDelay: 1660
  }
}, {
  mapping: {
    pitch: {
      mapTo: 'high'
    },
    playDelay: 1780
  }
}

Now, you know how to create an accessible audio boxplot, that enables the conversion of data points into meaningful auditory experiences, allowing users to perceive the chart not just visually, but also through sound, enhancing accessibility and providing a more comprehensive understanding of the data.

 

Related posts