How to make infographics more accessible
Adapted from:
Infographics Ally-101
Accessible Infographics and Flyers Checklist Universal Design Center
Accessible Infographics Universal Design Center
Text:
-
Text is TRUE text
-
True text means selectable text. Selectable text is needed so that text-to-speech software (e.g. screen readers) can read the text in the flyer/infographic.
-
-
UPPERCASE, bold and italic text are used sparingly
-
10pt font is the minimum
-
Text is clear and easy to understand
-
Clear and descriptive title
-
Headings and subheadings are used for organizing
List:
-
Bullet lists are present to organize related material into key points.
-
Numerical lists present to organize numerical processes.
Structure:
The reading order accurately matches the visual order.
The reading order defines how a flyer/infographic will be read by screen readers. The reading order should always match the visual order of the page. If incorrect, the flyer/infographic will not be read correctly.
Color:
Color is not the only method used to distinguish or emphasize important text or links.
Links:
-
Link phrases such as “click here” or “more” or “continue” are not used.
-
The link text is clear and accurately describes where the link will take a reader.
Add a proper alt tag
-
The alt text is brief and accurately describes intent of the image.
-
The alt text is within 8-80 characters long.
-
The alt text is not repetitive and does not use phrases such as “image of” or “graphic of”.
Add transcript underneath the graphic
A transcript is simply a full-text version of an infographic or flyer that is directly embedded onto the event page as normal text. Displaying the transcript under the flyer/infographic gives all users access to the information.​
​
Example:
1771 - Great flood
Due to heavy rainfalls the water of the river Elbe increase drastically. Dykes couldn't withstand the pressure and on 8 July 1771 the dykes breached near Neuengamme. Huge areas of Hamburg's surroundings were flooded. The water reached its peak on 21 July. It stopped straight in front of the gates of Hamburg.
​
1842 - Great fire of Hamburg
From the 5th to the 8th of May 1842 most of the inner city of Hamburg got destroyed by huge fire. 51 people got killed and 1,700 buildings were destroyed.
​
1943 - Operation Gomorrha
From 24 July to 3 August 1943 the Allies bombed Hamburg several times in a concentrated operation. The attack by the RAF (Royal Air Force) - and later with the help of the US Air Force - created one of the biggest firestorms in World War II. 42,600 people were killed, 37,000 wounded.
​
1962 - North Sea flood
Because of heavy storms in the night from 16th to 17th February 1962 with peak wind speeds of 200 km/h water got pushed into the German Bight. Dykes could not withstand the pressure. In Hamburg nearly 20,000 people lost their homes, 315 died.
Content remain appropriate when zoomed in/out
Different Infographic Types:
Image infographic:
Image infographics are the most popular infographic format, however; this format is also the least accessible. A screen reader cannot recognize the content (text) within an image infographic because it is an image.
​
Image infographics require an alternative text description in the form of a transcript.
​
A transcript is simply a full-text version of the infographic that screen readers recognize and is therefore accessible to all users. When an image is displayed on a website, a transcript can be presented in the following ways:
​
-
A transcript can be hidden behind an image. Advanced designers with web development skills can hide the text description of an image using a variety of HTML and CSS methods. However, precaution must be taken when using this approach to avoid inadvertently causing a new accessibility concern.
-
A transcript can be displayed below an image infographic. Displaying the description under the infographic gives all users access to the information. An example of this method is available in WebAim’s infographic accessibility tutorials.
-
​A transcript can be linked. Advanced designers with web development skills can create a new page with the transcript and provide a link to the transcript directly above or below the image infographic. This method also gives all users the opportunity to access the transcript information.
​
Example:
PDF Infographic:
Infographics as PDFs are becoming widely popular thanks to their ability to be easily shared across multiple platforms.
To make an accessible PDF infographic, users require Adobe Acrobat Professional (Pro). Adobe Acrobat Pro allows users to add accessibility markup (tags) and structure that can easily be read by screen readers.
As rule of thumb, a PDF infographic must never be an image and should always have selectable text. This will allow users to accurately markup the PDF with appropriate accessibility tags.
