On websites and in marketing emails, social posts, and other online content, alt text helps a wide range of people fully understand your content by providing a plain-text alternative to images. However, using alt text optimally isn’t as simple as just inserting a text description into an image’s alt tag.
But before we get into how to determine the most appropriate alt text to use, let’s clarify exactly…
When Alt Text Is Used
There are five primary instances when alt text appears or is used:
- When people use screen readers and other assistive technologies to interact with digital content. These tools help people with visual and reading disabilities like dyslexia, as well as cognitive and attention disabilities like ADHD. In these cases, the alt text is typically read aloud to the user.
- When people mouse or hover over an image that has alt text. When that happens, the alt text appears, often in a small box, and supplements the person’s visual understanding of the image.
- When people don’t automatically download Images. In today’s privacy-conscious world, many people chose to block images online and in their inboxes for a variety of reasons. The security settings at their place of business may also result in images being blocked in some cases. In these cases, the images don’t render and the alt text is displayed instead in the place where the image would have been.
- When people have spotty internet connections or experience slow service and images don’t load. In addition to sometimes experiencing connectivity issues because of their device, people also encounter bad connections because of where they are. In cities, basements, subways, elevators, and other places are known to disrupt signals. In rural areas, cell service is known to be spotty away from major highways. And, of course, service can also be slow in airplanes and on trains. In these cases, the HTML text and alt text load first, allowing the people to understand the message before images load, if they ever do.
- When emails are viewed in the spam folder. Images are blocked by default in spam folders, and even some emails that are delivered to the inbox can have their images blocked if the email appears suspicious. In these instances, only the HTML text and alt text load.
So, no matter who your recipient is, they are likely to experience the benefits of you using alt text at some point—or suffer the lack of it.
Related on-demand webinar: 6 Common Accessibility Myths that Cost Brands Customers
Determining the Most Appropriate Alt Text
For every image in your design, answer the following two questions to determine the most appropriate alt text to use.
As you’re crafting your alt text, keep in mind that only the first 100 characters or so are generally displayed or used. So, be thoughtful and don’t repeat any of the information that’s contained in nearby HTML text. Also, there’s no need to preface your alt text with phrases like “image of” or “graphic of.”
1. What’s the content of the image?
Depending on the content of an image and its purpose, marketers will want to use different approaches to alt text. Here are six common image types and the most appropriate alt text strategy to use with each.
Images containing graphical text. Although HTML text is highly recommended over graphical text whenever possible, sometimes integrating text into an image is the only way to get the desired effect. In these cases, the most appropriate alt text for the images replicates the text embedded in the image.
That said, even if the graphical text is in all caps, your alt text never should be, as that can lead to bad experiences for users of screen readers, voice assistants, and other devices. Unusual spacing and creative spellings can also cause unintended and awkward experiences.
Related post: Voice Assistants Reading Emails: How to Create Voice-Friendly Campaigns
Informative images. These images convey important concepts or visual instructions. Sometimes, these images are animated. For these, the most appropriate alt text should briefly explain the information being presented.
Decorative images. Rather than communicating anything concrete, these images are more about conveying a vibe, mood, or feeling. In other words, if you removed these images, the substance of the message wouldn’t change. Examples of decorative images include lifestyle and mood-setting images like sunsets, clouds, forests, and cityscapes. Decorative images also include product images, software screenshots, and other images when they’re adjacent to HTML text that describes them adequately.
For these images, adding alt text would be redundant. So, it’s best to leave the alt tag empty (alt=””). But don’t leave the alt tag out, as that will cause bad experiences for some people.
Complex images. The information contained in an image can be so complex that it’s impossible to adequately describe it in 100 characters or less. A brief generalization is sometimes appropriate, but more often we find that the surrounding text renders these complex images effectively decorative, making it appropriate to leave the alt tag empty (alt=””).
Groups of images. Sometimes multiple images are placed together to convey one singular message. Other times, an image is sliced up into several images for design reasons, but still functions as one single image. In these instances, the most appropriate approach is to have descriptive alt text for the first image, but then to leave the alt tag empty for the remaining ones.
alt=””
alt=””
alt=””
alt=””
Dynamic content. The final kind of image is one that’s personalized (i.e., product recommendations) or based on live content (i.e., countdown timers, weather feeds). Because this content can vary wildly based on the parameters of the dynamic content, the most appropriate alt text describes it generally.
This is the kind of image that we see most often not having any alt tags. Sometimes an entire email is composed of personalized content and no discernable messaging survives when images are blocked.
Related post: Live Content in Emails: The Best Use Cases
2. Is the image functional?
If an image isn’t hyperlinked, then whatever alt text you crafted based on the image type is fine. However, if the image is linked, then it has a function and you’ll want to amend your alt text to help people understand where the link is taking them. This is especially critical for users of screen readers, who can ‘hop’ from link to link on a page or message.
Typically, you can simply add a comma or dash at the end of your alt text and then add a link destination descriptor, such as “buy the shirt,” “links to the basketball store,” “explore Hawaii,” or “make an appointment.”
Using Generative AI to Automatically Create Alt Text
Given the current emphasis on automation and AI, many brands have been curious about using generative AI to automatically create alt text for every image that is added to their content management system (CMS) or digital asset management (DAM) platform. While that might seem like a time-saver, it’s ill-advised for a few reasons.
First, genAI would need to understand when a specific or generalized description of the image’s content is appropriate. Second, it would need to understand when an image is decorative. Third, genAI would need to understand when adjacent HTML text makes alt text unnecessary. And fourth, it would need to understand when an image is linked and understand the destination of any link so it can amend alt text appropriately.
alt=””
alt=”black t-shirt on palm tree fronds”
alt=”Hi Kingdom of Hawaii Classic t-shirt in black”
alt=”Hi Kingdom of Hawaii Classic t-shirt, links to t-shirt”
Even if a genAI model could understand all of those parameters, they would change depending on the context of their usage. So, while it may eventually be possible for genAI to automatically create alt text, it would do so after a webpage, email, or other piece of content was drafted, not preemptively before usage.
Until that day comes, one great use of genAI is to shorten alt text that is longer than 100 characters and therefore in danger of being truncated.
Related on-demand webinar: AI Opportunities Throughout the Email Production Process
Alt Text Is No Substitution for HTML Text
As essential as it is to craft appropriate alt text, HTML text is even more essential, as well as more versatile. Even though alt text styling is supported on some platforms, HTML text gives you far more and much more reliable control over the font, font size, font color, background color, and more. Plus, it doesn’t have character limits.
Smart use of alt text isn’t your license to create all-image webpages or emails. We still see far too many of those. Sure, alt text saves your message from incomprehensibility, but you lose message hierarchy entirely, since all alt text is the same default size. HTML text is the primary fallback for image blocking and screen readers and voice assistants—alt text is the secondary fallback.
Generative AI systems seem to recognize this. For instance, in most cases, Apple Intelligence and Android AI ignore alt text when creating AI summaries for emails.
So, while alt text is a key design tool, brands should not over-rely on it or use it to justify shortcuts in design, like using only images to convey your messages.
—————
Need help with the design of your websites or campaigns? Oracle Digital Experience Agency has hundreds of marketing and communication experts ready to help Responsys, Eloqua, Unity, and other Oracle customers create stronger connections with their customers and employees—even if they’re not using an Oracle platform as the foundation of that experience. With an NPS of 66, our clients are thrilled with the award-winning work our creative, strategy, and other specialists do for them.
For help overcoming your challenges or seizing your opportunities, talk to your Oracle account manager, visit us online, or email us at OracleAgency_US@Oracle.com.
To stay up to date on customer experience best practices and news, subscribe to Oracle Digital Experience Agency’s award-winning, twice-monthly newsletter. View archive and subscribe →