Because infographics are visual, they inherently present accessibility barriers to users with visual and cognitive disabilities. Infographics can also be challenging for those who use keyboard-only navigation. People with color blindness may miss out on information designed in specific colors and small text may not be readable by many users.
It's always best to avoid relying on visuals alone, especially when presenting critical data and information. That is not to imply that you shouldn’t use infographics. Infographics are a very engaging way to present information to your audience. But when you use infographics, accessibility best practices become extremely important.
Let's take a look at three different types of infographics; 1) image, 2) HTML / CSS, and 3) PDF.
Image Infographics
Although this is the most popular type of infographic, it is the most inaccessible as well. Using this format requires substantial effort in making it accessible. Image infographics require an alternative text description in the form of a transcript.
"Transcripts are the text version of infographics. Transcripts for infographics provide visual information for the visually impaired who wouldn’t be able to access it otherwise." ~ Make your Digital Media Projects Accessible, University of Guelph
Transcripts can be applied in two different ways: (Flyers & Infographics Accessibility, CSUN Universal Design Center)
- "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."
HTML and CSS Infographics
Advanced designers can create spectacular visuals through the use of HTML and CSS. Incorporating code and proper semantic HTML to include accessibility creates an infographic that is not only accessible to screen readers but also to keyboard-only users.
Bonus! Using semantic HTML to clearly define your page and infographic structure increases your search engine optimization! Check out this HTML infographic from WebAIM.
PDF Infographic
Creating an accessible PDF infographic is as simple as following best practices for accessible PDFs. And remember! A PDF infographic - or any PDF, for that matter - should never be just an image embedded into the document. In addition, an accessible PDF infographic should always include selectable text.
The following video walks you through the steps of preparing the source document, converting it to PDF, and using the Adobe Accessibility Checker to discover and remediate any barriers to accessibility found in the document.
Note: This video is 57:06 in length and you may want to download the exercise files to get hands-on experience.
Colors, Fonts, and ALT text
Just like you consider colors and fonts for a webpage, do the same for your infographics. Choose accessible fonts and ensure the voice and tone of your written text are appropriate for your audience. When choosing colors, make sure there is enough color contrast between the foreground and background. Test your color choices with WebAIM’s Contrast Checker before building them into your infographic.
Infographics are an excellent way to present large amounts of information in an easy-to-read and understandable format. Building infographics with accessibility in mind helps to ensure an equivalent experience for everyone.
