Accessible Infographics: information for everyone?

  • -

Accessible Infographics: information for everyone?

Tags : 


 Caroline Beavon is a freelance information and infographics designer – get in touch for more details

linkedin

 


PLEASE NOTE: This is a work-in-progress blog post. It would be great to get any feedback or thoughts via the social networks (links right) as I write the remaining sections. I am also posting some questions throughout the article, if you know the answer, do let me know! 

By definition, infographics contain information. Organisations are using them to explain systems, demonstrate data and make arguments. They have become so popular that many organisations are relying on them, and forgoing written text.

Why Infographics?

Infographics are generally a great way to get information out there. The visual form can help people understand complex information and retain the facts. With attention spans ravaged by social media, you’re also more likely to get an audience to engage with an image than a block of text.

Whilst diagrams have long been the default method for explaining data or complex systems, the rise of the internet and social media has meant that infographic images can be shared and viewed at a fast rate. As organisations struggle to be heard over the noise, they are adopting new ways to make their information stand out.

 

Why Accessibility?

Infographic image showing that 1 in 30 people in the UK are living with sight loss

According to the RNIB, almost two million people in the UK are living with sight loss. That’s approximately one person in 30. 

That’s a lot of people not getting your information if you ONLY use infographics to communicate.

Any organisation, but especially those delivering public services, really do need to think carefully about these issues.

Further more, if your organisation has an older audience, the statistics are even more sobering, with a fifth of 75+ yr olds and half of 90+ yr olds living with sight loss. That’s a huge percentage of your audience who simply aren’t getting the information.

1 in 5 75yr olds and over are living with sight loss. Half of all 90+ are.

 

Visually Impaired Online?

It’s worth remembering a couple of things:

  • not all visually impaired people are completely sightless
  • visually impaired people (even those with no sight) ARE accessing the internet

So we ned to not only think about HOW we design the infographics so more people can access them, but also come up with alternative ways to present the information so it’s not all hidden in an image.

Also, remember, the internet is now not only the domain of the young. More and more elderly people are getting online to shop, maintain friendships, pay bills etc. Therefore any infographics you do use need to carefully considered.

 

Accessible Infographics – a few ideas

I’ll admit, this is a new area for me, but I wanted to look into it as it has been raised several times over the past few weeks, most recently by a Twitter user in response to a blog post I had written:

 

This was the first time I had directly come in contact with someone raising the issue of accessibility of infographics, hence this blog post and it really made me think.

This podcast is well worth a listen: UX Podcast on accessible infographics 

 

Design


This section will cover both a way to design an infographic that is open to reader software, but also further down, how to think about the design you do use, to assist people with poor vision or colour blindness.  

Text Version

An interesting example here from the Washington Post (discovered in a blog post by Derek Featherstone) – a text infographic. Click the screengrab below and see that the text is actually text, not flattened into an image.

Screen grab of a Washington Post article which uses readable text

 

How was this created? is it HTML?

Do we lose some share-ability here? Yes the link is shareable but is the power of the infographic in the visual impact?

 


 

Not all people with a visual impairment are completely blind. Therefore, with some considerate designing, images could still be helpful.

People will poor eyesight may still be able to see your images, with the help of zooming tools, for example. However, infographics are often designed to be viewed as a whole image. Navigation is based on layout and style, so you can easily see where the next set of information is. If you’re zoomed right in, this navigation becomes harder if you can’t see the next header on your screen.

Colours

colour blindness –

Tableau blogpost

contrasting colours

content coming soon

Layout

hierarchy

navigation

content coming soon

Fonts

content coming soon

 

Alternative Information


Description

Nowadays there are plenty of tools that can help people with visual impairments use the internet. Screen readers will turn text into audio so everyone can get access to the information. However, most infographics are images which cannot be read by screen readers.

However, the rise of visual graphics has meant that some organisations are using these static “flat” images (where the text is not readable) as the ONLY means of conveying their message.

I’ve seen campaigners as for image descriptions on social media (Blog post) – so if a photo is shared, accompanying text gives a very brief insight into the image to allow visually-impaired people the chance to share in the emotions. I think that’s a great idea and has certainly made me reconsider how I share images online.

When it comes to sharing infographics, it would be impossible to convey all the information in 140 characters (in the case of Twitter) or without resorting to the swathes of text the infographic has replaced.

I’d suggest we post at last SOME text with an infographic, but they so often get separated from their original location, this may be redundant.

I know that my infographics have normally stemmed from a succinct list of statistics and information from the client. Could THIS be cleaned up and posted online for people who use screen readers? I would certainly be happy to offer this as part of my wider infographics design service.

Spreadsheets

Data visualisations bring about their own set of accessibility problems.

I recently worked on a very complex diagram for an arts project, which featured lots of lines and small (and often curved:) text. It was designed to be purposely complex, but would be very difficult for some people to access.

However, the data visualisation itself was based on a simple 10 column / 50 row spreadsheet.

It seemed logical to be to have this spreadsheet posted as a link near the infographic, so anyone would be able to access it – see example below from the Agency for Healthcare. Research and Equality).

screenshot

However, what kind of tables can be read by “reading” software, what formatting is needed etc?

I contacted the RNIB for their thoughts. Their usually useful website is being refurbished so they kindly sent me a document of the pages currently offline, and information used to advise their staff. The document can be RNIB advice on Excel spreadsheets, and includes these pointers:

Top ten accessibility pointers

  • Break down complex data sets into logical tables ideally with their own worksheets. New tables should be created on separate worksheets to aid navigation and understanding.
  • Reserve the first worksheet for a contents or index page.
  • Use Clear Print guidelines for text and data.
  • Insert all text and data within a logical path that a keyboard only user would take. As a general rule keyboard users will navigate down from cell A1 until the table is reached.
  • Empty cells within a table should be marked as such with a minus sign, a zero or N/A for not applicable as appropriate.
  • Adjust cell height and width to ensure all text that you want to appear is visible in your spreadsheet.
  • Add text descriptions and Alt text to charts and graphics.
  • Avoid using visual devices such as colour, shading, patterns and borders to divide up data regions.
  • Avoid merging data or header cells. Merged cells cause navigation problems and will not be read correctly if they contain row or column headers.
  • Always save your spreadsheet with the focus on cell A1 unless you want to draw attention to a specific cell.

Interactivity

During the UX Podcast UX Podcast on accessible infographics,  Derek Featherstone suggested (if time allow) making infographics interactive. However I am still not clear if tools like Tableau are accessible.

 

 

Metadata

Blogging tools do make it easier to add metadata to your images – for example alternative text, that a screen-reader can relay to the user.

This article by Web Aim suggests alt tags should:

  • be accurate and equivalent
  • be succinct
  • NOT be redundant
  • NOT use the phrase “image of … ” or “graphic of … ” to describe the image

Click through to the link for more details.

For infographics these are not so useful. Infographics can contain a lot of information and it would be difficult to put this information into the meta data without losing context.

Furthermore, many infographics are shared via social media – where there appears to be no metadata option.

QUESTION: How do screen readers cope with social networks like Facebook/Twitter? Are images titles “read”?

Other Information

content coming soon

Equality Act 2010

 

 

 

 


About Author

Caroline Beavon

A communication professional with 12 years journalism experience and a genuine passion for new technologies. An experienced blogger and social media user

"It was a pleasure working with Caroline. Her passion and skills were evident in all her work, with the final design being a creative and unique solution that met all our needs. Throughout our time working together she exceeded any challenge we threw at her, maintaining a professional and fun approach, and making the whole process enjoyable" - Katy Wade, Project Manager, My Route