LibGuide Design: Best Practices and Guidelines

• 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"

Specification of race/ethnicity/disability in <alt> text

Color and other highly visual details aren't wholly necessary for successful alt text, but can be important, depending on context. Some images, for example, are used to illustrate diversity and in this instance it would be important to convey something about the subjects’ social identities. Including a description of subjects’ apparent race or gender might seem to add essential information, but misidentification can cause offense to those pictured if they are described incorrectly, based on who we believe them to be, rather than who they are. Using the image below as an example, it is better to use the alt text “Three masked students, representing a mix of genders and ethnicities, sit chatting", rather than itemizing them, e.g., “A Latino woman, African American man, a gender non-specific white person, all masked, sit chatting".

Another example, if describing a person with a service animal, would be to say "a student walks with a guide dog on campus", rather than "a blind student walks with her guide dog on campus", if we don't know whether they are blind, or identifies as such.  

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.