How to create an accessible infographic

Quick facts

Access iQ™ has created a resource on How to create an accessible infographic, which considers access barriers including:

  • Colour contrast
  • Use of colour
  • Providing a text alternative or using HTML/CSS so a screen reader can access the content
  • How you can increase search engine optimisation (SEO)

As social media continues to grow as a powerful medium for sharing information and ideas, the need for accessible infographics has become more critical.

An infographic is a visual representation of data that turns complex information into bite-sized pieces that can be read at a glance. Because it can make a large amount of information easier to digest, perhaps the most valuable function of an infographic is the ease with which it can be shared across different social media platforms.

What many organisations fail to consider however, is that the accessibility of an infographic has a direct impact on its potential reach. This increasingly popular method of information sharing can be inaccessible to people with a disability. Creating an accessible infographic will not only make it easier for someone with a disability to view the information presented, it can also increase the ability for your content to be indexed by search engines.

Who misses out?

By its very nature, an infographic engages its audience through visual cues and designs that highlight specific information and show relationships between data. Colours are also often used to differentiate between blocks of content. All of these techniques are lost on people who are blind, colour blind or vision impaired. If an accessible alternative is not provided, then these people are excluded. Furthermore, people who have cognitive disabilities may find elements distracting and have difficulty following information presented by complex design.

If the information is crucial, how can you ensure your content doesn't leave these users out?

There are ways to make your infographic accessible. As a general image, providing a text alternative for your infographic will ensure the information conveyed can be read out by a screen reader or text to speech software.

Making an infographic accessible

There are two ways to make an infographic accessible:

  1. By providing a text alternative for the infographic that conveys the same meaning and information that is represented visually.
  2. By using HTML/CSS to create your infographic rather than using an image file.

No matter which method you choose, colours used in the infographic must meet colour contrast requirements.

Using colour in infographics

Part of the attraction of an infographic is the use of colour to convey information in a way that is visually appealing. Bright coloured text, information conveyed in graphs and pie charts, and images that support a message all work to make information more shareable and digestible.

However, people with colour blindness, vision impairments or age-related impairments can often struggle to read text or understand information when there is insufficient contrast between the foreground colour and background colour. This applies to the contrast between text and its background as well as when colour is used to convey information such as in graphs or pie charts.

This does not mean you cannot use colour. What it does mean is that before you start designing an infographic, you must think about how you are using colour and ensure that this does not create barriers for people.

Colour contrast requirements

When designing an infographic, chose a colour palette that meets minimum contrast requirements to ensure that your infographic is accessible to people with different vision impairments.

To meet minimum contrast requirements, the contrast ratio between the text (or image of text) must be at least 4.5:1 for normal text or 3:1 for large text. Normal text is text that is up to 14 point bold or 18 point normal, whereas large text is at least 14 point bold or 18 point normal. You must meet this requirement if you website is WCAG 2.0 Level AA compliant.

Ensuring that your infographic meets the colour contrast requirements means that people who are colour blind or vision impaired will have a much greater chance of being able to read the text.

Use of colour

In addition to colour contrast requirements, also identify when you use colour to convey information within an infographic, and make sure the same information is communicated either in text or via other visual cues such as text formatting or font size.

There is a difference between using colour for aesthetic reasons and using colour to convey information. For example, in the Web Accessibility Infographic produced by Access iQ™, the percentage sign in "89.8% of Australians are internet users" is blue. The meaning of this statement is still the same whether you could see the blue or not.

Screenshot of cropped infographic showing 89.8%

By comparison, using colour to differentiate each section within a pie chart is extremely important in order to understand the information being conveyed. You can add labels to each section of the pie chart to ensure that everyone can understand that information, so that a user who cannot differentiate between some or all of the colours used can still understand the same information as someone who can. A good test for this is to print your infographic in greyscale and see if you can still understand the information.

Method 1: Text alternative

An infographic is essentially an image. In the same way that you provide a text alternative that presents the same information and meaning that is conveyed in an image, a text alternative can make an infographic accessible to people who cannot see the image or have difficulty with complex information or distracting visuals.

Providing a text alternative for your infographic ensures that people with vision impairment that are using a screen reader or refreshable Braille device, or people with a cognitive impairment using text-to-speech can access to your content.

Because an infographic is a complex image that contains a lot of information we need to use a long text alternative to describe an infographic.

Using a long text alternative

A long text alternative is used when the text description exceeds one – two sentences, which is usually the case when describing complex infographics. If the text alternative does not exceed one – two sentences, you can use a short text alternative. You can read more about the different text alternatives in our resource on images for content authors.

Once you have created your text alternative, you can place it either on the same page as the infographic or provide a link to the text alternative located on a separate page.

There are benefits for your users in providing the text alternative directly following the infographic on the same page. Screen reader users in particular will benefit from remaining on the same page, which requires fewer clicks to navigate to a new page and perhaps back again to the original page.

Although you can use the longdesc attribute to direct users the location of text alternative, this method has several drawbacks. These include that the longdesc attribute is only visible to screen reader users, meaning that other users who may require the long text alternative will be unable to access that information. It is recommended that you do not use the longdesc attribute but rather use on of the two methods above.

Creating a text alternative for an infographic

  1. Create a text alternative that presents the same information that is in the infographic. Things to consider:
    • Purpose: Determine what parts of the infographic need to be explained in text form.
    • Hierarchy: Group the text into logical parts that follow the order presented visually by the infographic.
    • Meaningful images: Ensure that any context provided by visual cues in the infographic is included as alt text if it is pertinent to the information that is being communicated.
  2. Decide whether you are going to include the text alternative on the same page as the infographic or on a separate page. Provide a link before the infographic to the text alternative with meaningful link text such as "text alternative for web accessibility infographic". If the text alternative is on the same page, then the link will be a jump link otherwise it will link out to the page that the text alternative is on.
  3. Before the text alternative, include a heading for the text alternative, such as 'Text alternative'

We have created an accessible infographic by providing a text alternative directly following the infographic. The information that is conveyed visually is presented as text and mirrors the hierarchy of information presented in the infographic.

Method 2: HTML/CSS

The second method to create an accessible infographic involves creating an infographic using HTML and cascading style sheets (CSS) instead of creating it as an image file.

Learning and development specialist Chris Throup explains in his blog post on accessible infographics how he made a WebAIM infographic accessible by converting it into HTML and CSS. He says that by using CSS true text he was also able to turn some text within the infographic into links to related content.

Using this approach, the text in the infographic is 'real text' rather than an 'image of text'.

The difference between method one and two is that in method one, the text description of the infographic provides an accessible alternative to the flat image file. In method two, the text information is created in HTML and the styling is applied using CSS making the infographic itself accessible.

The benefit of using HTML and CSS to create an infographic is in its ability to work with a screen reader. This approach also allows the infographic to be magnified without compromising the quality of the text itself. Unlike an image that has been rendered as a jpeg or bitmap file, HTML and CSS-based images don't become pixelated when they are magnified.

There are very few infographics created using HTML/CSS compared with infographics that are graphics. This is likely because it is easier to create an infographic using a graphics package such as Photoshop, rather than using code to create the infographic. Using HTML/CSS, you also need to pay attention to other accessibility requirements such as reading order, headings and cross browser and assistive technology testing.

The SEO factor

Search engine optimisation (SEO) is an important consideration when producing any type of content for the web. Infographics in general are not usually very search-friendly because nearly all infographics are just an image file. Any text that is within the infographic is images of text and cannot be indexed by search engines.

By making your infographic accessible to people with a disability, you also make it accessible to search engines.

This means whether you provide a text alternative or use HTML/ CSS to create your infographic, you allow all of the content within the infographic to be indexed by a search engine.

This adds another layer of discoverability to your content and increases its searchability.

An example of an accessible infographic

To illustrate what we have been talking about in this article, we will use this example of an accessible infographic from the WebAIM Web Accessibility for Designers resource to outline the benefits of the approach that has been taken.

Approach

  • Provide a text alternative on the same webpage
  • Provide an anchor link to the text alternative on the same webpage

Benefits

  • Providing a text alternative on the same webpage means the user can navigate straight to the accessible text without opening a new webpage in the browser. The fewer steps there are in gaining access to content, the less complicated it is for all users.
  • A text alternative makes your content discoverable by search engines.

Sarah Pulis, Web Accessibility Evangelist at Access iQ™ contributed to this article.

Want to learn more about WCAG 2.0 and web accessibility?

The Professional Certificate in Web Accessibility, a university-accredited online qualification jointly conducted by W3C member Media Access Australia and the University of South Australia, is a fully assessed six-week program that covers both accessibility principles and techniques. The course provides students with all the essentials needed to achieve compliance with international best practice in accessibility. Accessible documents, among many other aspects of WCAG are covered in Access iQ’s complete guides to web accessibility for content authorsweb developers and web designers.