Alternative Text – Best Practices and Tips Health Sciences Communications
The following information has been provided by the UArizona Disability Resource Center with web resources as noted. This document is intended to offer a brief understanding of, and best practices for, writing alt text that accompanies photos used on websites.
The primary purpose of alternative text is to convey why an image is used with a webpage, news release or story. The alt text is read aloud by screen reader software and is indexed by search engines.
While accessibility is the primary reason for including alt text, providing search engines with context clues is a close second, according to HubSpot. Moz also says alt text is an important part of on-page SEO, which is the process of optimizing webpages and their content for both search engines and users. It can help pages rank higher on Google and drive more organic traffic.
According to Google’s John Mueller, alt text is an image search ranking factor. Creating alt text with SEO in mind is a powerful way to increase web traffic and organic pageviews as part of a comprehensive digital communications strategy.
Accessibility considerations
Why is alt text important?
A good resource is WebAIM (Web Accessibility in Mind). According to WebAIM:
“Alternative text serves several functions:
- Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.
- If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.
- Search engines use alternative text and factor it into their assessment of the page purpose and content.
Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada or it might just illustrate the leaf of a tree. Web page authors must provide alternative text that represents the content and function of their images.”
It is not necessary to describe a person’s age, skin color, ethnicity, etc., unless it is relevant to the story or adds context to “Why is this image being used?” For example, in a photo for a story about a healthy-aging event, it would be relevant to use alt text that says something like, “Several older men and women stand with their hands on the backs of chairs as they do exercises.”
Below are some examples from our website with alt text recommendations from the Disability Resource Center.
Dr. Timian Godfrey draws on tradition for guidance and strength
(Recommended alt text)
University of Arizona College of Nursing professor, Timian Godfrey, speaks to a group of nursing students in a classroom.
Reasoning:
- Since this is a profile about Timian Godfrey, say that she is in the photo.
- Note her affiliation to UArizona College of Nursing for search engine information.
-
Describe the action of a photo, not what the person looks like, unless that is relevant to the context. Portraits are an exception to this.
(Recommended alt text)
Portrait of Timian Godfrey in front of the College of Nursing, smiling, wearing a black shirt and turquoise necklace.
Reasoning:
- Most alt text resources say not to include “Picture of” or “Photo of” because it is redundant. However, in the case of a portrait, DRC says that including the word “portrait” in the alt text does convey information about the type of image.
- Because portraits don’t usual have an action to describe, you can describe what they are wearing or the setting, if relevant (such as in the example above).
Some examples from a gallery
(Recommended alt text)
Three pharmacy students sit at a table each facing a Girl Scout doing an activity with them.
(Recommended alt text)
Three young Girl Scouts in uniforms sit at a table doing an anatomical 3-D frog puzzle.
Brand Considerations
For general organic search, Google treats alt text like any other text on the page. On-page keyword usage is a major search engine ranking factor, so it is in our best interest to create alt text that both describes the image and includes a keyword or the keyword phrase we are targeting.
Well-written alt text can help place our images in search results, whether in Google Images or as image packs. (Image packs are special results displayed as a horizontal row of image links that can appear in any organic position including the #1 spot on a search engine results page, or SERP.) Images that appear in both types of search results are yet another way to receive organic visitors. This can result in thousands of more visitors — at least, it did in HubSpot’s case when their blog team implemented a new SEO strategy that, in part, focused more intently on optimizing image alt text. This helped to increase the blog’s image traffic by 779% in less than a year, which resulted in 160,000 more organic views.
Google hands out penalties for keyword stuffing, though, so don’t do it. Using alt text to stuff keywords into fragmented sentences adds too much fluff to the image and not enough context. Those keywords might be important to the publisher, but not to web crawlers. If Google can’t understand how the image relates to the rest of the web page or article, it can’t rank the image.
Here’s an example from HubSpot:
Let’s say the above picture is being used in an article about attending business school.
Bad Alt Text: alt="Woman pointing to a person's computer screen"
The line of alt text above would normally pass as decent alt text, but given that our goal is to publish this image with an article about going to business school, we're missing out on some key word choices that could help Google associate the image with certain sections of the article.
With the bad alt text (above) in mind, better alt text for this image might be: alt="Business school professor pointing to a student's computer screen"
Now, let’s say the same picture is being used for a webpage on education software for business schoolteachers.
Bad Alt Text: alt="Teacher pointing to a student's computer screen"
The line of alt text above is almost as descriptive and specific as the good alt text from the previous example, so why doesn’t it suffice for a webpage about education software? This example dives even deeper into the topic of business school and specifies that the ideal audience for this webpage is teachers. Therefore, the image’s alt text needs to reflect that.
With the bad alt text (above) in mind, better alt text for this image might be: alt="Professor using education software to instruct a business school student"
Here is an example from our website:
Addressing Arizona’s rural physician shortage
(Recommended alt text)
Portrait of Primary Care Physician Scholarship recipient Emma Rautenberg wearing a doctor’s white coat on a sidewalk in rural Globe, Arizona.
Reasoning:
- The purpose of this story is to promote the Primary Care Physician Scholarship program, a brand strategic initiative. So using those keywords in the alt text will help us rank higher on the SERP for those terms.
- The purpose of the PCP Scholarship program is to increase the number of doctors in rural areas of Arizona, so adding those two keywords can help web crawlers correctly categorize the story and images where we want them to be highlighted.
(Recommended alt text)
Portrait of Primary Care Physician Scholarship recipient Emma Rautenberg wearing a doctor’s white coat and stethoscope with a rural Arizona town in the background.
Tips to consider
To ensure you have accurately written alt text, read the alt text without looking at the picture. Wait, then look at the picture to see if the alt text conveys the same meaning you want the photo to convey.
Gender:
- As we often don’t know how someone identifies, it is best to use names in alt text rather than “female” or “male” descriptors. If you don’t know names, just write “instructor,” or “professor” or “medical student,” or “nursing student,” etc.
Action shots:
- Think about what is important in the image that should be conveyed to the viewer. In an action shot, specifics of a person’s description may not be as important as is what they are doing and where. For example, “Physician assistant Kevin Lohenry examines a patient at the University of Arizona Health Sciences.”
- “Dr. Sally Smith helps medical student Cara Valdez put on her white coat at a College of Medicine – Tucson ceremony.”
- “University of Arizona Health Sciences faculty member and pharmacist Theodore Tong teaches a large group of seated middle-school students in a classroom .”
Portraits:
- Go ahead and say “Portrait of” because the word “portrait” tells what kind of photo it is.
- For a head shot/portrait, you can describe more about what the person looks like or add more brand/keyword descriptors. For example: wearing a physician’s white coat; smiling; wearing a suit and tie; stands outside at the University of Arizona Health Sciences, etc.
Decorative images:
A decorative image is one that does not convey important content that is pertinent to the story/gallery. For example:
- A line or graphic element used to separate content areas on a page.
- Background art
- Some photos
- This one is hard to imagine at first, but sometimes we use stock images to visually support a story that is difficult to convey in a photo. There is nothing wrong with using such photos if you don’t have another option, but they don’t need alt text. See below for a good example. This image conveys an emotion, or sense of caring, but it does not present important content or additional information for the story. As WebAIM states, “If the image were deleted, would important content be lost? Many images like this force meaningless, redundant, verbose alt text on screen reader users even though they don’t provide useful content.”
Helpful links
HubSpot Image Alt Text: Why It Matters to SEO
SEMRush Alt Text: What it is & Why It Matters for Accessibility & SEO