Alt text basics
Alt text, as you probably already know, is text that describes an image on a website, or in an email, or in a social post, etc. This text lives under the hood in the html code and is not usually visible to users, with some important exceptions.
("Alt" stands for "alternative," by the way.)
Alt text serves a couple different purposes...
The original purpose of alt text — which I'd say is the most important purpose — is for accessibility. This is important in websites, emails, social posts, and banner ads. I'm always happy to point out: accessibility is our legal requirement and our ethical responsibility. So it's critical that we include alt text for all of the images that need it — and to not include alt text for the images that don't. More on that in a bit.
Another important purpose of alt text is for SEO (search engine optimization). Search engine bots crawl the web and index websites based on their content, and alt text is one of the many things these bots look at. (So this part is only important for websites; we don't have to worry about SEO for emails and other digital media.)
In the early years of the web, most digital agency people — copywriters, developers, etc — focused primarily on the SEO benefits of using alt text. Fortunately accessibility has become a bigger topic of discussion in recent years — ADA-related lawsuits are on the rise, so companies are taking accessibility more seriously. (I'd like to also think that companies are now more aware of their ethical responsibility, and that this is part of the reason why they're thinking more about accessibility.)
So it's important that we write alt text that's useful for both accessibility and for SEO. How do we do that? I'll get to that...
It's also important to understand that alt text behaves somewhat differently in different types of digital media. How so? I'll break all of this down...
Alt text for websites
On a website, if an image fails to load — like if the image file is missing, or the internet connection is interrupted — the alt text for that image will be displayed in the browser (in most but not all cases). Many years ago, some web browsers would also display the alt text if you hovered over an image; this is no longer a thing.
So that's for a typical web browser that can display images. Users who are have visual impairments may use screen reader software that reads the webpage out loud to them. Along with the body copy, this software will tell them when there's an image and read the alt text out loud to them, so that they can get a sense of what the image is.
As mentioned above, alt text for images is also one of the many things that search engines look at when they're determining what a website is about and how highly it should be ranked in search results when users search for certain relevant terms. So if there are any images on a webpage that contain important visual information, that info should be entered in the alt text.
Many years ago, a lot of less-scrupulous media companies would cram all kinds of words into the alt text for each image on a page in order to cheat a bit — sometimes repeating relevant search terms a bunch of extra times, and sometimes inserting completely irrelevant terms that users might be highly likely to search for. Luckily the browser companies got wise to this a long time ago, and it's no longer something that's rewarded — in fact, your site can be punished in search rankings for any kind of dishonest SEO tactics like this.
Alt text for emails
In email, alt text behaves in a way that's similar to how it works in websites: when an image fails to load, the alt text is displayed in its place. And screen reader software will read the alt text out loud for those users.
However, an important difference between websites and emails is that a huge percentage of email users do not see images by default when they open a marketing email. Various searches I've done put this at between 45% and 55% of all users. For those users, the images in the email are hidden by default, and there's usually a little link at the top for the user to download and display the images if they wish to. It's fairly unlikely a user will do this for a marketing email unless they are very interested. So, unlike for websites, a large portion of email users will see our alt text rather than the images.
Of course, there's no SEO for emails — nor for any of the other digital tactics below, so we don't have to worry about that for the rest of these...
Alt text for banner ads?
I was surprised to learn that alt text does display in a banner ad if the image is missing! I just saw this happen in the wild for the very first time recently. Also, some screen reader programs will read the alt text in banner ads out loud, so it's important that we include it. More than with any other tactic, I've seen teams neglect to include alt text in banner ads because they think they don't need it. We absolutely should be including it.
Alt text for social media posts
These days most social media platforms allow for alt text, and we should definitely include it for all images in social posts. Screen reader software will read the text out loud to those users.
Alt text for IVAs? Touchscreens?
For now, alt text is not necessary in IVAs (interactive visual aids; these are are a big tactic in pharmaceutical marketing, where I've spent most of my career) and typical convention touchscreens. Accessible touchscreens are a possibility, but in my industry we're just not seeing them used yet. I think there's a practical reason for this, even if I may disagree with it: because the touchscreens I've worked on are for healthcare conventions, and the audience is medical doctors, there's a belief that doctors are unlikely to be blind or to have other visual impairments. I suppose I can concede that I see the logic in this. It still really bothers me to intentionally create something that's not accessible. (I'll write more about this another time, but I have, several times, corrected colleagues who've made the blanket statement, "These are HCPs; they don't have [any kind of] disabilities." This is absolutely not true. But yeah, we can say that an HCP who is blind would be a pretty rare thing.)
Which images need alt text?
I'm glad you asked! Some images need alt text, while others don't. Any image that gives important information to the user needs to have alt text.
Some examples of images that should have alt text are: a graphical headline, a callout graphic with text in it, charts and graphs, a CTA that's formatted as an image, etc. If an image has text in it, then that text should absolutely be in the alt text for the image. (However, if we're adhering to best practice, images simply shouldn't contain text.)
Some types of images that may need alt text are: a product image, photos of patients or doctors, etc. It's important to ask yourself, if a person is using screen reader software to listen to the content on this webpage, is there anything important we need to tell them about this image? For example, if a webpage has a stock photo of a person that's just there for decoration, the screen reader user probably doesn't need to hear about that. But if the photo is of a real person whose testimonial content is on this page, then it's useful for the screen reader user to hear that; we can say who the person is and maybe describe their appearance and/or what they're doing, if it's relevant to the content on the page.
Any images that are purely decorative do not need alt text — e.g. a divider graphic, a shadow under a callout, a rounded corner, or a little arrow next to some CTA text. The developer should just insert alt="" or alt="null" for these, or embed them as a background image in a <div>. I wrote a whole article about alt text for decorative images; check it out.
Whew, that's a lot of information about something that, on the surface, seems very simple! I think the only remaining thing I have to discuss about alt text is how to write it. First, I want to share this article I wrote on my favorite alt text tip.
Then, going back to the topic of websites, I wanted to get into the best way to write alt text for websites that's good for both accessibility and SEO. And the answer is pretty simple: Make sure your alt text is descriptive, and accurate, and gives good context, and is honest. Don't include a lot of unnecessary information. Chances are the details that are important for a screen reader to know are the same details that will help Google index your webpage correctly. You may be tempted to add even more detail in order to enhance SEO, but it's important to be mindful not to enter so much alt text that it's annoying to a screen reader user, or that it begins to feels slimy, like too much ad-speak, which could turn a user off. Another way to think about it: if you're considering adding a bunch of alt text that you would not want to put right in the body copy, you're probably not thinking about accessibility the right way, and you're maybe trying to get away with being a bit sneaky. And that's what we want to avoid. Keep alt text direct and descriptive and useful and you'll be in good shape.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.