LibGuide Design: Best Practices and Guidelines

Image Accessibility Creator

Enhance the accessibility of your course images with Arizona State University's intuitive tool. Designed to effortlessly generate alt text and detailed descriptions, as well as extract text from slides and images that are not accessible, their tool simplifies the creation of inclusive content. Just upload your image and hit 'Create Image Details.' Within seconds, you'll see the generated content appear on the right side of the screen. Need to tailor the descriptions further? Easily add more specifics with the 'Add Details' option and generate updated descriptions to perfectly meet your needs.

This tool currently utilizes the GPT-4o model provided by OpenAI's API platform. This ensures the data sent is not retained or stored to improve their training or models.

• Add alt text all non-decorative images. How would you describe it to someone on the phone?
• Keep it short and descriptive, like a tweet. There is no character limit for screen readers, but if you can describe it well in 80 characters, then the screen reader user can get to other information on the page faster.
• Don’t include “image of” or “photo of” - screen readers already provide this information. 
• Do not be redundant or provide the same information as the text accompanying the image.
• Image files are optimized for efficient loading.
• Use of animated images is limited to only those that contribute to the learning experience supporting the course content.
• Avoid blinking images, text or cursors. These can cause seizures for some people or may be distracting.
• Leave alt text blank if the image is purely decorative.
• A text equivalent for every non-text element shall be provided.
• Images that have a function (images within links, image buttons, and image map areas) have alternative text which describes the associated function.
• Unless specifically relevant to the image, it is not necessary to describe race/ethnicity/disability in <alt> text.

What does good alt text look like?

Let's take a look at a couple examples of <alt> text in action:

Okay alt text: "Rooster"

Better alt text: "Rooster crowing"

Best alt text: "Red-crested rooster crowing"

Okay alt text: "person on escalator"

Better alt text: "person walking on escalator"

Best alt text: "person wearing backpack walking down escalator"

WebAIM - Accessible Images

Most people know that you need to provide alternative text for images. There is much more to the accessibility of an image than just its alt text. There are many additional accessibility principles and techniques regarding images.

Image Manager: Upload & organize images in LibGuides

Springshare's guide to managing images in LibGuides, including where to add <alt> text.

Rich Text / HTML content: Add images to a guide

Springshare's guide to adding images using the Rich Text/HTML content item.

Image description guidelines - Diagram Center (Benetech)

The first part covers description guidelines that apply to any type of image. The second part covers guidelines for describing images within specific types of categories, including photos, diagrams, graphs, maps and tables.

An alt Decision Tree

This decision tree describes how to use the alt attribute of the <img> element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text.