Alt Text Masterclass Part 2: How to Write Alt Text

Sometimes getting started is the hardest part. This is true for writing in general, but especially for writing alt text for visual content, since most of us have never had to describe an image to someone before. Don’t worry! Alt text and digital accessibility are our business here at Scribely, so let us demystify the process and make writing alt text a breeze.

(If you aren’t sure what alt text is or why you need it, you may want to read pat 1 of this series first.)

The Basics of Writing Alt Text

Alt text exists to quickly describe the content, purpose, and meaning of an image, so it’s important to be succinct and get to the point. Begin by describing the image type (map, chart, diagram, watercolor, etc.) unless it’s a photo, in which case you skip straight to describing what you see! Let’s break an example down.

Alt Text: White mattress with 2 pillows resting in a field of wildflowers under palm fronds with the ocean shining in the distance.

✅  We started with the focal point of the image (white mattress), then worked our way out from there, describing the most relevant details (palm fronds, wildflowers, ocean).

✅  The length (121 characters) is well within the max of 250 characters. If this image were extremely important to your content, it might be worth maxing out that limit. But if it’s just one of many on a page, long descriptions would make the navigation experience a nightmare. In that case, this would be a good length.

✅  There’s a good balance between being descriptive and being overly descriptive. It’s easy to be either too dry or not dry enough (read examples below), but aim for the middle ground. You want to help someone to get a picture in their minds that’s similar to the image you’re seeing, but you also have a limited number of characters with which to do that!

👎  Too dry: “Mattress and pillow on the ground by the ocean.” (47 characters)

👎  Not dry enough: “Soft white mattress with 2 fluffy pillows luxuriously resting amongst wildflowers in a green field as palm fronds lean toward each other to provide shade while the ocean shines in the bright sun in the distance.” (211 characters; note that this fits within the max character limit, so you could use it if it made sense for the context and your users’ navigation experience.)

✅  We didn’t keyword stuff (example below). It’s tempting to jam in a bunch of keywords to hack the algorithms and rank higher in search results, but if you listened to it read aloud, would you have any idea what is actually in the photo? (Check out part 3 for how to naturally incorporate keywords.)

👎  Keyword stuffing: “Luxury glamping ocean view white mattress privacy secluded beach.”

A couple other things to note:

✅  If the name of the beach or even the mattress brand are relevant to your purposes, add it! Specificity helps alt text users get a better idea of what’s in an image, and it helps people interested in that location or mattress find your content.

✅  If you don’t know specifics, let context determine your description. Use the alt text to help search engines associate the image with your content. If you were, say, using the above image to advertise your glamping company, you’d want to tailor your alt text by including glamping-associated keywords.

How to Know Which Details in an Image Are Relevant for Alt Text

Honestly, this can be challenging to get right, but the more you write alt text, the more you’ll get it. The most important thing to keep in mind is to put yourself in a screen reader user’s shoes, allowing the context, purpose, and meaning to structure your description. Let’s work through an example together so you can see what we mean.

Imagine that you want to send this Michael Scott from The Office meme to a work Slack thread that you know includes visually impaired coworkers. How do you make sure that everyone gets the punchline?

Context. Any details that are covered in the surrounding text don’t need to be repeated in your description (e.g. if someone already referred to it as a Michael Scott meme, you don’t need to explain that it’s a meme or that it’s of Michael Scott).

Purpose. Which details in the image help you achieve your purpose? Describe those. Your visually impaired coworkers won’t see the meme, so your description is their entire experience of the joke.

Meaning. With memes, it’s often the text on the image—not just the image—that gives the joke meaning, and this meme is no different. Without the text, this would just be a photo of Michael Scott. So here’s an example of alt text for this meme:

“Meme. Steve Carrell as Michael Scott from The Office behind a desk looking apathetic as he talks. Caption above image reads, My boss: asks me to work late. Me: Wish I could, but I can’t. Well can, but won’t. Should maybe, but shorn’t.”

We identified it as a meme right away, then we followed the order in which a sighted person would work their way through, making sure to include all the text as that’s the core of the joke.

When to Classify an Image as Decorative

Sometimes writing descriptions is just as important as not writing descriptions. Decorative images shouldn’t have descriptions because you don’t want to bog screen reader users down in unnecessary descriptions that make your site hard to navigate. It’s okay to skip images that are not critical to understanding or engaging with your content.  

A great example is an icon. Generally speaking, icons can be used either to represent or to replace a word or phrase. If the icon represents a word or phrase already on the page, you wouldn’t need to write alt text because it would be repetitive. But if the icon is used instead of text, you’d need to write alt text so that a screen reader user doesn’t miss that important detail.

Additionally, icons can sometimes be “functional images,” or images that do something or take you somewhere. Functional images always require alt text. For instance, a download button that had no text, only an icon of a down arrow, would require alt text that explains the button’s purpose, but not if the button had readable  “download” text and described what is being downloaded (e.g. “Download the PDF”).

Using AI for Alt Text

As tempting as it is to let Artificial Intelligence (AI) handle accessibility so that you and your team can focus on what you do best, AI technology is still no match for human reasoning, discernment, and ability to contextualize. It’s been shown time and time again that AI cannot deliver descriptions that satisfy accessibility requirements, let alone that have your brand in mind.

There are several reasons why AI doesn’t deliver like it promises:

• It fails to know which images to classify as decorative.
• It misses important information, including what makes an image distinctive.
• It tends to focus on irrelevant information, often missing the focus of an image.
• It produces bland descriptions of art, leaving visually impaired people without the full experience.
• It misses SEO and branding details.

What to Do If You’ve Been Using AI for Image Descriptions

Take a moment to re-analyze a few of your AI-generated descriptions using the information you’ve just learned. Are they helping your users? Are they helping your brand? Are they meeting accessibility standards?

If the answer is no, it’s time to make a few changes. First, ditch that service ASAP. Then devote some time to determining how to build accessibility into your workflows so that anything you create from this point forward has accessibility built in, as opposed to added in later. (Not sure how to do that? We can help!)

Finally, set aside a small block of time to each work day to start working back through old content and replacing AI-generated alt text with human-generated descriptions.

Bottom line: Alt text is too important to leave up to AI. Just like we’d never use AI to craft other parts of our content experience (e.g. marketing copy or website design), we shouldn’t trust AI with our alt text, either.

Conclusion

Whew! That’s a lot of info, congrats on making it through! You’re now ready to write alt text descriptions that will improve user experience and help the right audience find your brand. If this is your first time creating alt text, now would be a great time to start comparing your analytics and feedback from before and after implementing alt text. And if you come across images that are more difficult to describe, check out Part 3 of this series.