Alternative text, or alt text, describes an image and the context for why it appears on the page. You will often see this referred to as an “alt tag” (even though it’s not actually a tag) or “alt attribute,” but we’ll just call it alt text here, ok? Mostly because I really want you to think of the “text” part.
Alt text’s primary purpose is for web accessibility. Screen reader programs read this text aloud to users who are visually impaired (and to those who just choose to use screen readers). This text also displays if the image file doesn’t load or for those visitors who have chosen not to view images.
Let me reiterate, because it’s important: Alt text is crucial to accessibility.
Alt Tags and Search Engine Rankings
It’s also extremely valuable to another sightless audience — web crawlers. Alt text helps boost SEO by providing search engines with additional information about what is on a particular page.
According to Google’s Search Console Content Guidelines for Images and Video:
“The alt attribute is used to describe the contents of an image file. It’s important for several reasons:
- It provides Google with useful information about the subject matter of the image. We use this information to help determine the best image to return for a user’s query.
- Many people—for example, users with visual impairments, or people using screen readers or who have low-bandwidth connections—may not be able to see images on web pages. Descriptive alt text provides these users with important information.”
Here’s an example of alt text from one of our recent Drupal 8 projects:
How to Write Good Alt Text
So how do you get started? Basically, to approach your alt text:
- Describe the image, providing context and meaning
- Use keywords
- Keep it brief
In a little more detail, what that means is:
Describe the Image
In my mind, I pretend I’m talking to someone on the phone (even though I actually hate talking on the phone). I’m looking at a picture and want to describe to that person what exactly I’m looking at. So, say you were talking to your mom and describing a photo. Would you just say, “A dog” and stop there? Probably not. You’d probably provide more details and context, otherwise that photo doesn’t really matter to your mom or the conversation at all.
Basically, you should aim to provide equivalent information to non-sighted visitors through your description. Keep it simple and valuable to your audience.
Also, keep in mind that you don’t actually have to start with “An image of…” or “Photo of…” unless that detail is important to providing specific context.
When deciding what to write, it helps to consider just why the heck you chose THIS image for THIS page. Using this image was likely a strategic decision to illustrate a particular point or provide more meaning or context for the page. Consider that the same image could be used in very different contexts on different pages, and write alt text that helps to convey the message you think the image conveys in that instance.
So, for this ridiculously cute dog, for example, it could be “Jack, the Fictitious University mascot” OR on a different site it could be “Sir Calico Jack, winner of the 2018 International Dog Show, exemplifies Potcake breed standards.” (That’s actually my dog, by the way, and Potcakes are a real thing, though not technically a breed.)
So, what if your image isn’t actually important within the context of the page? Say you just thought it was pretty.
If it’s hard to write appropriate alt text, then you may want to reconsider that image — it might not be a good choice anyway. Or, if it’s just serving as a decorative design element, it should be included in the CSS rather than the HTML.
Use Keywords
Hopefully you are already planning your page content around a specific keyword or keywords for SEO. That’s great! Now, use your keyword in the alt text of your images (naturally, of course) to help boost SEO. Note: I said naturally.
This is not about cramming your target keyword into places it doesn’t really belong — Google hates that. Since Google looks for good user experiences on websites, if you start cramming in words that don’t seem natural, aka “keyword stuffing,” your site could be perceived as spam and demoted in Google’s page rankings.
If your image is surrounded by related text and you’ve optimized for your keyword, that benefits your SEO. And if you are strategically choosing relevant images that support your content strategy, then appropriately using keywords in alt text shouldn’t be too hard to do.
Keep it Brief
A good target length for your alt text is 125 characters or less. Ok, so sometimes it’s hard to keep things that short. But certain screen readers limit the number of characters they read to 125, and your additional content could get truncated. And even for screen readers that don’t, this is a good guideline you can aim for to keep your text valuable but succinct.
One thing to keep in mind if you are planning to save space by abbreviating your institution’s name is that, for screen readers, this will be read aloud. So, if you abbreviate Fictitious University as “FU,” it will be pronounced “foo,” which is amusing. But you’d probably want to use a space between the letters so that the screen reader pronounces them individually (which, in this case, could also be amusing).
Linked Images and Charts/Graphs
For linked images, your alt text should not just describe the image, but also identify the page the image links to. According to WebAIM’s guidelines for alternative text, “Whenever an image is within a link, the function of the image must be presented in alternative text that is also within the link.”
Charts and graphs are much harder to describe completely in an alt attribute field, so a better idea would be to include a good description of what the chart shows within the body of the page in close proximity to the chart to provide equivalent information and context. You can then more briefly describe the chart in your alt text along the lines of, “A bar graph demonstrating the 150% increase in enrollment at Fictitious University from 2008 to 2018,” or something similar.
One Other Little Thing: Image Titles and Filenames
This can actually be a little confusing, because these are two different things. Technically, if you were to look at the code, the filename is your source, and the title text is the image’s title.
In some ways, your filename is actually even more important than your image title. Using a descriptive filename is valuable because it’s another way to help Google understand what the image is and how it’s relevant to the content (since Google’s web crawlers can’t actually see… yet). Also, be aware that your filename may sometimes be used as the image’s snippet in Google Image search results.
For your filename, keep it simple, but describe the subject matter of the image. For example, fictitious-university-president-mary-schmoo.jpg (note that I used hyphens for spaces in the filename) is a lot more informative than IMG1234.JPG. Even better, you could use your target keyword in your filename, if appropriate and natural.
But then there’s also title text. By default, your CMS may use your filename to populate the title text field. The image title is not crawled by search engine spiders and doesn’t (at this time) directly impact your SEO, but it does appear in some browsers when you hover over an image. So, you may want to consider cleaning it up to make it more appealing, but don’t sweat it too much.
I hope this provides a little more insight into the importance of alt text and empowers you to go forth and create the very best media library you can. Taking these steps with each image will take a little extra time, but it’s well worth the effort when you consider the benefits to your site’s accessibility and SEO.
