Include alt text on images

Applicable Role(s): Content Creator, Developer

Overview

Images need text alternatives so users know what the image's purpose is and how it relates to the content. An alternative description can also provide the image's context in case it fails to load.

Best Practices

Not sure whether an image needs alt text?

Use the image alt text decision tree to find out.

Keep alt text short

Alt text should be the length of a tweet (less than or equal to 150 characters ), while still capturing the purpose and content of the image.

Avoid making assumptions where possible

Good Practice: "a person smiling"

Not-as-good Practice: "a person is happy"

Don't include "graphic of..." or "image of..." in alt text

The fact it's an image should already be conveyed to the user by using an image tag, or on an element with an image role.

Good Practice: "students working at a table"

Not-as-good Practice: "image of students working at a table"

Alt text for complex images and images of text

If the image includes text, include the embedded text in the alt text. Ideally, regular text should be used instead of an image of text (see Avoid images of text when possible).

If it's impossible to describe the image entirely in alt text, provide a summary and point to a longer description on the page. See Provide long descriptions for complex images.

Western-specific alt text

If you're referring to any Western Washington University concept in an image (like a logo, a school flag, faculty, etc.), it's preferable to use "Western" over "WWU" when possible. "Western" is fewer syllables and less verbose for people listening to alt text using assistive technology.  

Good Practice: "Western faculty chat outside Old Main"

Not-as-good Practice: "WWU faculty chat outside Old Main"

Pattern Examples

Basic Image or Graphic

Provide concise yet descriptive alt text.

Image

<img alt="Western Washington University logo" src="//designsystem.wwu.edu/file-path.png">

Decorative Images

Examples: patterned background, image of horizontal rule—provides no additional meaning

Solution: Provide null alt text using empty quotes (alt=""). An alt attribute still needs to be provided, even if empty and decorative.

<img alt="" src="//designsystem.wwu.edu/file-path.png">

Note about "decorative"

Describing an image with a pleasing visual appearance as a "decorative image" is not the same as a true decorative image in the last example.

Instead of saying "a decorative image of Old Main..." to describe beauty, describe the visuals themselves instead: "a 3-story brick building on a hill, surrounded by gardens and stairs."   

Complex Images

Examples: charts, graphs, infographics

example of two pie charts in six pieces, one showing just percentages and one showing how grades are weighted

Provide a textual alternative of data, such as a table of data or a longer description.

<figure role="group" aria-labelledby="figure-title">
<img src="//designsystem.wwu.edu/chart.png" alt="two pie charts with six pieces showing how a grade is weighted.">
<figcaption>
<h2 id="figure-title">Grading Charts</h2>
<p>Papers 2 and 4 are weighted equally at 20 percent...</p>
</figcaption>
</figure>

If using an image as a link, the alt text of the image should describe where the user is going to go. Social media icons are one example of images used as links.

Example (link doesn't go anywhere):

Facebook icon

Usually the alt text would describe the image itself, like "Facebook icon." But, if the image is the only clickable piece of the link with no other link text, the image's alt text should instead announce the purpose of the link:

<a href="#"><img alt="Western on Facebook" src="//designsystem.wwu.edu/../../"></a>

 

Artistic Examples

 If it's important to convey the styling of the photo (a portrait, painting, illustration, etc.), the formatting info should be near the end of the alt text. This means info about what is happening in the image is heard first, and the formatting is secondary info.

Template: alt="[what is happening in the photo], [format of photo]"

Black and white portrait

Image

Alt text: "person with long hair showing their profile, black and white portrait"

Image by 729714 from Pixabay

Hand-drawn illustration

Outback Homestead 1982-83 with fields, roads and paths,  hand drawn map

Alt text: "Outback Homestead 1982-83 with fields, roads and paths,  hand drawn map"

Paintings

Paintings will typically need some kind of long description, so the alt text should tell the user where it will be described. See Provide long description for complex images.

Alt text: "A painting by John Gast in 1872 titled American Progress, showing the spirit of America heading westward. See Painting Details for further description.”

 

Alt Text That Passes check

<img alt="aerial view of buildings on a hillside next to a body of water.">

The alt text concisely describes what is in the image and its context.

Alt Text That Doesn't Work Here

<img alt="">

Unless there is text next to the image that describes the image itself, there should be alt text included. Otherwise, the image is not announced to assistive technology.

<img alt="Bellingham Bay.">

While better than nothing, this could be more descriptive of what is happening in the image.

Alt Text That Doesn't Work Here

<img alt="/file-path.png">

Don't use the file name as alt text.

<img alt="Bellingham Bay, Western Washington University, WWU, Bellingham.">

This is known as "keyword stuffing" for SEO purposes. This hinders understanding of what the image is actually about and offers little context.