Guides: D4D Accessibility Guide: Alt-Text for Images

Milestone Overview: Alt-Text for Images

Images have alternative text (alt-text)

Alt text is a concise description of the image. Screen reader users won’t be able to engage with an image you put into your guide unless it has alt-text.

Accessibility Best Practices

Check each page for your guide to make sure all images have alternative text.

You can do that in the author edit mode of each page by clicking on each image (probably the most practical).
Do an automated scan with an accessibility checker.
- Check each page of the guide. Note down which images don’t have alt-text
- Use the editor in LibGuides to add alt-text.

Tip:

You can also do a scan of a page after you’ve done the work just to confirm you haven’t missed anything

Use the Rich Text Editor > Image tool or use the Image Manager found via Main Menu > Content > Image Manager
- Image Manager Note: There’s currently a vendor bug that limits the character count to 50, so be aware of that if you’re describing complex images. Use the rich text editor for longer descriptions.

Writing Alt-Text:

Describe what's in the image as best you can. Think about what information does that image convey to the viewer/
Try to keep it short (~140 characters) because a user has to listen to it. Too wordy and it can be overwhelming.
Use punctuation in your alt-text. Make sure to put a period at the end of your sentences. Punctuation helps screen readers pace.
Remove images that are purely decorative, serve no educational, or communications purpose. Or add “” into the Alt-Text field (no spaces between the quotation marks).

Screenshots

If you have marked-up screenshots in your guides to explain how to use an online service or system be aware that the text or arrows you add to that image won’t be available to a screen reader.
The best practice is to write out the information or directions in the body text of your guide, not just on an image, that way it's accessible to everyone.
Having directions in your body text makes writing the alt-text for that image and keeping to the 140 characters much easier.

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.

Additional Resources

WebAIM: Alt Text
Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.
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.

Project Management Suggestions

Run specific workshops for creating alt-text. We got a lot of questions about it and because it's more of an art than a science giving people the opportunity to practice and learn as a group proved helpful.
Reach out to authors of guides related to the visual arts early about alt-text. They may be a great asset for helping your organization think about describing images and developing resources and best practices.