How do you make an infographic accessible?

I put content from different teams across gov on digital.nsw

All the time I’m telling content producers that their images or infographics are inaccessible.

How do we make it easy for content producers who aren’t experts in accessibility to produce accessible infographics?

Even if you’ve got some resources to link to, I’d love to hear about them.

One way would be to ensure that semantic markup is being used and that this is then being transformed clientside with JS and CSS so that the presentation of the data is being improved. It can then be displayed as infographic. Common JS libraries for this kind of thing would be charts, progress indicators, fastfacts, etc, etc. Of course there are many more options out there depending on what you wish to display.

The key ingredient is having a nice UI for the editors so that the can add their data in a structured way (form fields or via a data upload/link). The UI sits on top of a component which is able to handle the data and combine it with the transformation.

A really simple example of this would be a fastfacts component which allows editors to add individual items each with a name, value, prefix and suffix.

The hard part is defining components which will be reusable and interesting enough for people to want to use.

Once you have this locked in, the CMS you are using needs to support the component so that editors have ready access to it without the need for a developer.

Now, of course, there will be limitations to this approach. The infographic may not be what the editor actually wants. If this is the case you could potentially look to other solutions. The editor makes the infographic as an impage or some widget and then either:

  • Adds metadata with RDFa or Microdata
  • Links across to the source dataset in an easily consumed format.

Hi Ben
A practical and easy approach for someone who is not an expert could be perhaps converting the infographic to pdf and then using tools like Acrobat Pro automatic tool to create an accessible version. It won’t be perfect, but I have found it reasonably good and quite quick. Its accessibility checker and report could also be a good resource for non-experts who like to learn a bit more and upskill.
Would be great to hear others’ thoughts too.
-Kind regards

Have you considered presenting the information using a data visualisation tool that actually creates accessible content that can be placed in a website? Both Microsoft PowerBI and Hightcharts are capable of creating visualisation’s that are accessible.


@BenThielemans I used to use this reference as a guide all the time: How to create an accessible infographic | Access iQ when I was working as a web content producer.

It can be pretty tough to get teams using (their ‘Method 2’) HTML and CSS by default, particularly if your skillset is geared towards designing in PowerPoint, or Adobe Suite set of tools. But adding the ability to design in code is worth doing! We were lucky to have closer working relationship with some of our teams, so could get in at the start before work went too far - we’d often end up using Highcharts for accessible data presentation, and SVG for … graphically layed out words.

There’s definitely a lot that goes into making a poster PDF accessible so (if it “has to be a PDF”) the earlier you can get people thinking about the impact of the design decisions the better.

Fixing before making something is better than fixing something already broken!

Thanks @iBuddha thanks for the contribution. :slight_smile: I haven’t thought of that.

As @JamesFehon points out, the challenge is getting teams to design with accessibility in mind from the beginning, not just when it comes to publishing. (and thanks for the resources) :slight_smile:

Hi @BenThielemans
Maybe this can help:

There are a few resources included in the above page that could perhaps help designers consider accessibility too, for example a simple checklist.
Kind regards