Research Guides: NYU LibGuide Accessibility: Alt-Text for Images

Overview

Images have 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.

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 then using 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.

Tips for Writing Alt-Text:

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.

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.
LibGuide A11y Bites presentation on Alt-Text (Google Slides)
UX Presentation in Google Slides on creating alt-text for images.

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
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
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.