Research Guides: Accessibility Best Practices for LibGuide Content Creators: Alt Text

What to Include | Examples and Best Practices | Resources

Excerpt from ATD (Association for Talent Development): Accessibility for E-Learning: Section 508 and WCAG

Providing a text alternative that describes media such as images or audio narration is important for people with compromised vision. The primary way to make our media accessible is by creating ALT tags for images and text transcripts for audio. ^[1]

Alternative Text (or Alt Text) is text information that is added to non-text elements such as images, icons, and buttons. Alt text allows interpretation for people with comprised vision, but it also allows interpretation for individuals who turn off images in programs or web browsers (in instances such as low bandwidth or poor connections).

Tip:

When inserting an image in LibGuides, the program provides a text box for you to enter Alternative Text. So, you don't have to worry about the code!

LibGuide image properties with Alternative Text highlighted.

If you are using code to add alt text to an image, remember to add an alt tag followed by the alternative text in your HTML.

<img src="https://..." alt="Alternative Text here.">

Deciding what to include in your Alt Text (and how to include it) can be tricky. As WebAIM puts it, "at a technical level, adding alt text is dead simple, understanding the finer points of alternative text can be rather difficult. ^[2] Penn State's Image ALT Text site says, "A good rule of thumb to consider is to include what you might relay over the phone." ^[3]

Based on these ideas, let's define a few simple rules that you should typically follow when adding alt text (each of these items will be described in more detail in the Examples and Best Practices section of this page):

Be accurate and equivalent in presenting the content and function of the image rather than a description of the image.
Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
Context is important. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself.
Don't be redundant. If the text is provided in context with the image, you don't need to repeat the text in an alt tag.
Don't use the phrases "image of ..." or "graphic of ..." to describe the image.

Examples from WebAIM: Alternative Text ^[4]

There is also some debate over using proper grammar and punctuation in your alt text.

Excerpt from W3C: Images Tips and Tricks

As for any text, using punctuation in the text alternative makes the information easier to understand. In particular, remember to add space characters in the alt text when there’s no space character between the image and adjacent text, to avoid having words running together when they are read by a screen reader. ^[5]

Images should include equivalent alternative text, meaning that users who view the alt text will get an equal experience to users that view the image. This can be accomplished by following these best practices when building a LibGuide:

Keep alt text concise and prioritize information. Although it is not a requirement, the general rule of alt text is that it shouldn't be longer than 100 characters. If you need anything more than a short phrase or sentence, review the Long Description tab.

Example:

Concise Description

Correct Alt Text: Google Chrome logo.

Incorrect Alt Text: Image of the current Google Chrome logo, which has been used since 2014. Previous versions of the logo have been used since the web browser debuted in 2008.

*If the historical aspects of the logo are important, they should be included in the page's text, not within the alt tag.

Excerpt from WebAIM ©: Web Accessibility Gone Wild

Any time alternative text contains a description of an image, the alternative text is likely not optimal and is often just plain bad. Alternative text must convey the content and functionality of an image and should rarely be a description of the image. Rather than providing what the image looks like, alt text should convey what the content of the image is and what it does. ^[2]

Example:

Avoid describing the content

Correct Alt Text: Felix, one of the cats available for adoption.

Incorrect Alt Text: Cute striped cat staring at the camera while laying on a pink blanket.

*If the breed, color variation, or what the cat is doing are important, the information could be included within the alt tag or in the surrounding text.

Incorrect Alt Text: All of the cats on this site are available for adoption. Here at the Happy Cat Place, we hope all of our cats find good homes with families that love them. If you are interested in adopting this cat, or any of the others seen on this site, please call us at 555-555-5555 or visit us in person.

*If the adoption and contact information is important, it should be included in the surrounding text for everyone to access.

As a follow up to the Be Concise example - if you include an image that needs a long description, consider these two options:

Don't write context into the alt text that would benefit everyone. Instead, add the information to a paragraph around the image, not inside the alt text, and direct users to the content.
Sometimes complex images need a long description. In this case, include a short description in the alt text and then provide a link to the longer description. (This approach requires a bit of technical know-how. Don't hesitate to reach out for help by contacting a member of the LibGuide Working Group at ut_libguides@live.utk.edu.)

Example 1: Information in surrounding paragraph

Long Descriptions Included in Page Content

Correct Alt Text: Bar chart showing monthly visitors for the first quarter of 2014 for sites 1 to 3. Described in the paragraph titled Sites.

Incorrect Alt Text: Overview: The chart shows the website hits for the first quarter of 2014. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month on month. Values: Numerical values presented on the image: 2014 First Quarter visitors per site (in thousands). Presentation: The bar chart represents both the number of visitors per month for each website, and the total number of visitors per website for the entire quarter. Website visitors for each month are represented using columns lined up horizontally, with heights indicating the number of visitors. A fourth column is provided for each website with the accumulated site visitors for the quarter.

*The information listed as Incorrect Alt Text would instead be included in a paragraph near the chart titled Sites.

Example 2: Short Description in Alt, Longer Description Linked

Long Description Linked

Correct Alt Text: Bar chart showing monthly visitors for the first quarter of 2014 for sites 1 to 3.
Image Description

Incorrect Alt Text: Bar chart showing monthly visitors for the first quarter of 2014 for sites 1 to 3.

Examples taken from W3C page Complex Images. ^[6]

If an image is purely decorative, meaning that it conveys no information and is only used for aesthetic purposes, use a null or empty tag. This option will tell screen readers to skip the image. Otherwise, some screen readers will read the image name or just say "image", which could be distracting.

To insert a null tag, add two empty quotation marks, without space, into the Alternative Text field when adding your image or after the alt="" if using HTML.

Remember, if a user would miss out on any information without the image, it would not be considered decorative, and proper alternative text would need to be included.

Example:

Decorative Images (using the null tag)

Correct Alt Text: "" (alt="")

Incorrect Alt Text: Green vine decorating the site.

*This image is purely decorative and serves no function other than filling blank space for aesthetic purposes. Describing the image may cause confusion to users because it could be interpreted as an image that is important to the information on the page. However, failing to include the alt tag could also cause confusion because it could imply the user is missing important information on the page.

Tip:

When inserting an image in LibGuides, if you leave the Alternative Text field blank, the program will automatically add the Null Tag to your image in the coding. This may seem like a great backup, but remember - null tags should only be used if the image is purely decorative. Otherwise, you should always include Alt Text.

There will be some instances when it is important "to distinguish between paintings, photographs, or illustrations, etc., but it’s best to avoid the more generic use of the terms." ^[5]

Example:

Avoiding "Picture of" or "Image of"

Correct Alt Text: University of Tennessee, Knoxville logo.

Incorrect Alt Text: Image of University of Tennessee, Knoxville logo.

*If you include "image of" in your alt tag, a screen reader may read "Image, Image of University of Tennessee, Knoxville logo."

If the image is active, meaning it is being used as a link, button, or other interactive element, describe the item's function or action rather than what it looks like.

Example 1: Navigation

Image Used for Site Navigation

Correct Alt Text: Navigate to the previous slide.

Incorrect Alt Text: Blue circle with a white arrow pointing left.

*Describing the image will not help visually impaired users to navigate the page.

Example 2: Link

Logo Used as Link

Correct Alt Text: Google Chrome search page.

Incorrect Alt Text: Google Chrome logo.

*In this instance, the primary function of the logo is to serve as a link, therefore, the alt text should indicate where it will take the user rather than provide a description.

Context is important. An image of a painting will contain very different alt text depending on the LibGuide's function. If the painting is on a guide about art, it may be included in order to highlight brush strokes, color choices, or canvas type. That same painting on a history-focused guide may completely ignore the media used to create the piece and instead focus on historical elements in the painting (i.e., the subject(s), a style of clothing, etc.).

Example:

Variations Based on Page Content

LibGuide: Information about the University of Tennessee.

Alt Text: Smokey, a bluetick coonhound, that serves as the University of Tennessee's live mascot.

LibGuide: Photography course about the usage of color.

Alt Text: A bright orange background contrasts against the darker subject matter.

Excerpt from W3C: Non-text Content: Understanding SC 1.1.1

Sometimes there is non-text content that really is not meant to be seen or understood by the user. Transparent images used to move text over on a page; an invisible image that is used to track usage statistics; and a swirl in the corner that conveys no information but just fills up a blank space to create an aesthetic effect are all examples of this. Putting alternative text on such items just distracts people using screen readers from the content on the page. Not marking the content in any way, though, leaves users guessing what the non-text content is and what information they may have missed (even though they have not missed anything in reality). This type of non-text content, therefore, is marked or implemented in a way that assistive technologies (AT) will ignore it and not present anything to the user. [e.g., by using a null tag <img alt="">]

Sometimes content is primarily intended to create a specific sensory experience that words cannot fully capture. Examples include a symphony performance, works of visual art, etc. For such content, text alternatives at least identify the non-text content with a descriptive label and where possible, additional descriptive text. If the reason for including the content in the page is known and can be described it is helpful to include that information. ^[7]

Accessibility Best Practices for LibGuide Content Creators

Alt Text

What to Include

Examples and Best Practices

Be Concise

Avoid description of image

Long Descriptions for Complex Images

Decorative Images

Avoid Superfluous Information

Active Images

Variations Based on Content

Additional Best Practices

Resources