Guides: D4D Accessibility Guide: Alt-Text for Infographics

Milestone Overview: Alt-text for Infographics

Infographics have alt-text and long descriptions

Infographics are graphical/visual representations of information (data, workflows, processes, etc.) often intended to make that information clearer or easier to understand. They are often image files, or PDFs.

Screen reader users or other people who may have difficulty processing visual information won't be able to access the information presented in the infographic without alt-text or an alternative format.

Accessibility Best Practices

Infographics need to have alt-text just like images.
Users benefit from having long descriptions that are in the main content of your guide.
- This makes the information searchable
Add a long format description of the information in the graphic within the guide and make sure to give it a header name that will help users identify it quickly.
Non-screen reader users can skip over the description if they don’t need it.

Resources:

NYU Digital Accessibility: Websites Images and Alt-Text
NYU Digital Accessibility knowledge-base article on creating and adding alt-text to images in websites.
WebAIM: Infographics
Instructions for including accessible infographics on your website.
Accessible U: Alt Text
Summary: Alternative text, or “alt text” describes the content of images, graphs and charts. It should be added to every image that conveys meaning in instructional and communications materials including Moodle sites, word processing documents, and slide presentations.
Accessible U: Instructional Graphics
Summary: Instructional graphics like charts and graphs can be powerful learning tools, and you should use them wherever they illuminate your content, such as reducing complexity or showing patterns in data. Design organized, relevant graphics that utilize best practices in alt text, color and contrast, size, and resolution.

LibGuide Help Center Resources

How to add and edit images in a guide using a Rich Text / HTML content item
Springshare LibGuide FAQ about adding alt text to an image using the Rich Text Editor.
Add default alternate text to an image in the Image Manager
Also referred to as Alt Text, adding alternate text to your images is an accessibility best practice. By adding descriptive alternate text to each image, you are providing users of assistive technologies (such as screen readers) a description of the content of the image. With the Image Manager, you can actually add default alternate text to your images.

Each time you reuse an image in LibApps, its default alternate text will be used (though you can customize it if needed). Not only does this save you time in the long run, but it greatly increases the odds that the alt text won't be overlooked -- especially for images in your shared library.

Examples

University of Oregon Research Guide: Getting Started with Research
LibGuide example of accessible infographic.

Accessible Version of InfoGraphic: Web Accessibility for Designers
View an accessible version of the infographic above, courtesy of Chris Throup.

Project Management Suggestions

If there are people or teams who are creating infographics reach out to them to discuss developing an infographics best practice training or documentation. It's easier to make long descriptions at the same time as creating the graphic than it is to go back later and have to re-type all the information.

If there are organizational infographics that may be of value to multiple guides having that be managed in a centralized place that authors can just map to (rather than creating copies) will assist with version control and mean the long description only has to be created once.