Infographics are image files that use visual layout, icons and text to display information. Well done infographics are helpful for understanding complex relationships and/or sequencing of information. When site visitors use screen readers (like JAWS) or other text-to-speech or refreshable Braille tools, they are unable to access the information displayed through the infographic.

Why it is important to have an accessible website?

You may be familiar with using alt-text for your site images, but traditional alt-text usually isn’t sufficient to convey all of an infographic’s content unless it can be summed up into 1-2 sentences.  You will probably need to create an alternative text description of the infographic either on the same page/post or create a new page with the text description of the infographic and create a meaningful link to the alternative text description page right before the infographic.

Steps for creating alternative text for an infographic that are compatible with UW-Madison Division of Extension WordPress sites:

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’. View an accessible infographic example . The information that is conveyed visually is presented as text and mirrors the hierarchy of information presented in the infographic.

Find many Accessibility resources and guides at the WebAIM site.