Include alt text on images
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.
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"
Basic Image or Graphic
Provide concise yet descriptive alt text.
<img alt="Western Washington University logo" src="//designsystem.wwu.edu/file-path.png">
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">
Examples: charts, graphs, infographics
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.">
<h2 id="figure-title">Grading Charts</h2>
<p>Papers 2 and 4 are weighted equally at 20 percent...</p>
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>
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"
Alt text: "Outback Homestead 1982-83 with fields, roads and paths, hand drawn map"
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
<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
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
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.