There are two ways to make an infographic accessible:
- Provide a text alternative on the page that conveys the same meaning and info as the image file
- Use HTML/CSS to create your infographic rather than use an image file
COLOR PALETTE: The infographic is essentially an image – so choose a color palette that meets color contrast requirements and don’t rely on color alone to convey the information.
LONG TEXT ALTERNATIVE: Create a long text alternative that presents the same info and group the text into a logical hierarchy and provide the appropriate heading markup to support that structure.
PROVIDE LINK BEFORE INFOGRAPHIC TO TEXT ALTERNATIVE: Most important, 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 your data infographic”. Although you can use the longdesc attribute to direct users to the location of text alternative, this method is not recommended because 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.
- Maintain a logical structure. (H1, H2, H3)
- Use heading hierarchy.
- Use a grid layout.
- Use a strong contrast.
- Don't convey meaning through color alone.
- Use large typography.
- Try not to use paragraphs of centered text. It creates "white rivers" for people with dyslexia.
- Make sure your text is legible.
- Simplify the image's appearance.
- Provide alt text when posting the image online. Include plain text version on page 2 of PDF or printed infographic.
Infographic example and approach:
- Provides a text alternative on the same webpage
- Provides an anchor link to the text alternative on the same webpage
Accessible Infographic Links