Easy screen reader accessibility with Highcharts

 
For those of us who develop and design web content in the public sector, 1 February brought some changes. From this day on, the EU’s directive on universal design for websites and mobile applications (WAD) is encoded into Norwegian law. This means that accessibility in our content, including our visualizations, is no longer optional – it’s required.

Luckily for us, Highcharts has great accessibility support with its accessibility module . In today’s post, we will take a look at Highcharts’ accessibility tags to ensure that your visualization can be properly accessed by a screen reader.

Let’s have a look with this fairly basic example of a column chart, created in CodePen, showing the count of penguins according to species from the Palmer Penguins dataset.

Beginning with your HTML file, there are a few things that you’ll need to add. First, you’ll want to include the Highcharts accessibility module by inserting the following into the head of your html file:

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

Then, in the body of our HTML, we set up our figure with nested div tags for our visualization. Before closing out the figure tags, it’s a good practice to write a brief summary of what the chart is showing, which can be easily accessed by screen readers. This code segment looks like the following:

<figure class="penguins-figure">
  <div id="vis-container"></div>
  <p class="highcharts-description">
    Bar chart summarizing the number of individauls of each penguin species
    from the Palmer Penguins dataset. Adelie penguins are the most abundant
    species with 152 individuals, followed by Gentoo with 124 individuals,
    and finally Chinstrap with 68 individuals.</p>
</figure>

Note how we’re using the p class “highcharts-description” — this is part of the accessibility module that allows HTML elements with descriptions to be linked to a visualization. For more info about this, see /highcharts/accessibility.linkedDescription of the documentation.

Moving on to our JS file, this is where we build out the bones of our chart that screen readers can access, beginning already with our data. For this simple case, we embed our data directly in the JS file. Note the inclusion of an accessibility parameter with a further description parameter. Here, it is a good practice to summarize the key insight or takeaway that your visualization is showing:

series: [
  {
    name: "Penguins",
    data: [68, 124, 152],
    accessibility: {
      description:
        "Adelie penguins are the most abundant species in this dataset"
    }
  }
];

General best practices in visualization dictate a descriptive title and subtitle for our charts. There are no additional accessibility parameters here, but this information is shown on-screen and is critical for both sighted and unsighted users who might explore this visualization. In our case, we choose the following title and subtitle:

title: {
    text: "Palmer Penguin Species"
  },
  subtitle: {
    text: "Total counts of Palmer Penguin species, from the Palmer Penguins dataset"
  },

Let’s next look at our axes. For this chart, we have chosen to plot penguin species along the x-axis, and the count of each species along the y-axis. Within each axis parameter, we add an accessibility parameter with a description parameter providing details of what is being shown on that axis. In our case, it looks like the following:

xAxis: {
    title: {
      text: "Penguin Species"
    },
    categories: ["Chinstrap", "Gentoo", "Adelie"],
    accessibility: {
      description: "Penguin species: Chinstrap, Gentoo, and Adelie."
    }
  },

  yAxis: {
    title: {
      text: "Count of Penguins"
    },
    accessibility: {
      description: "Total number of penguins for each species."
    }
  },

And that’s it! By including these accessibility tags and taking just a few extra minutes to describe your visualization, you have opened your visualization to screen readers and made your work more accessible! If you’re interested in a deeper dive to accessibility best practices, I suggest checking out this post next: best chart accessibility practices.