Include alt text on images
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.
<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.
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
Images as Links
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):
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.".
Some considerations for alt texting people:
- Is the person actively doing something in the photo? Are there distinct gestures, postures, facial expressions, etc.?
- If clothing is worth describing, can it be accurately described?
- Use more "exciting" or descriptive words where it makes sense. Instead of smiling, is someone smirking, grinning, or beaming? If a person's coat is blue, is it more teal, a navy blue, or aquamarine?
- While some may self-describe with identity categories like race/ethnicity, gender, disability, etc., these shouldn't be assumed when describing other people.
Not descriptive example: "Carly Gerard"
Somewhat descriptive example: "Carly takes a selfie and wears a gray t-shirt."
More descriptive example: "Carly wears a gray shirt saying 'Perceivable & Operable & Understandable & Robust.' She has shoulder-length brown hair, light skin, and eyes wide open." (Note: the author self-described and approves this description.)
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
Alt text: "person with long hair showing their profile, black and white portrait"
Hand-drawn illustration
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.”