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

The exception to this practice is when the abbreviation is part of the official name, like "WWU Honors College." 

Okay Practice: "WWU faculty chat outside Old Main"

Better Practice: "Western faculty chat outside Old Main"

Pattern Examples

Informative Images

Most images within main content fall into this category, since they provide some kind of visual information or meaning.

Solution: Provide concise yet descriptive alt text.

Western logo

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

Decorative Images

Images are decorative when they add no meaning to the surrounding content, and are used for decorative purposes. Examples: patterned background, image of horizontal rule.

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 decorative image in accessibility terms.

Instead of saying "a decorative image of Old Main..." to describe beauty, describe the features that give an image a pleasing aesthetic: "a 3-story brick building on a hill, surrounded by gardens and stairs."   

Complex Images

Images are considered complex when their meaning can't be condensed to a short description, or attempting to do so could lose its meaning. Examples: charts, graphs, infographics.

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

The original image should have a summarized description, with an in-depth description immediately following, or referred somewhere else on the page.

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

Specific Pattern Examples

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>

Headshots or Profile Images

Headshots and profile images follow the same best practice of informative images, with no need to say "image of, headshot of, etc.".

Alt text example: "Carly wears a gray shirt saying 'Perceivable & Operable & Understandable & Robust.' She has shoulder-length brown hair, light skin, and eyes wide open."

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

person with long hair showing their profile, black and white portrait

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

 

Image Example

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, informative images (i.e. not decorative) need alt text included. Otherwise, the image is not announced to assistive technology and your visitors could miss out on key info.

<img alt="Bellingham Bay.">

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

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