Alt-text for Images

Confused by Alt-text for images for document and web accessibility? Find out which images need Alt-text, how to write good Alt-text, how long it should be and how to add it to web and InDesign images. Also find out lots of Alt-text do’s and don’ts.

I can’t believe that this is episode 100. This is kind of great timing because I also just found out that Design Domination was chosen by Feedspot as one of their top 25 design podcast. Thank you very much for that.

OK, so let’s dive in. A lot of designers — web designers and document designers — have heard of Alt-text and know what it is but don’t really fully understand it or how to write it. So I’m going to break it down for you.

What Is Alt-text

First off, let me briefly get into what Alt-text is in case you don’t know about it. Alt-text is short for “alternative text.” It provides a text description of an image.

A lot of web designers refer to Alt-text as “alt tags,” which is incorrect because it isn’t a tag at all. Alt is an attribute.

In HTML on a website, you add the alt attribute to an img tag.

With documents, Alt-text is applied to an image in a program such as Adobe InDesign, Microsoft Word or Adobe Acrobat (there are others too). It appears in a figure tag in an exported PDF.

Alt-text can be applied to images on most social media platforms as well.

Benefits of Alt-text

There are so many benefits to Alt-text when it’s used properly.

For users with low to no vision

Alt-text helps people with low to no vision, which is important because they cannot see images well or at all. Many of these people use a screen reader, which will read the Alt-text out loud to them.

For users browsing without images

Alt-text also helps people who have turned off images due to having a slow internet connection or just because they want to save data. They will see the Alt-text before the images load or instead of seeing the images at all. Of course, that depends on whether or not the images have Alt-text.

For search engine optimization

When done properly, Alt-text also helps with search engine optimization (SEO).

That’s because search engines cannot see the content of an image. They cannot tell what it’s an image of. When you add Alt-text to an image, it tells the search engines what the image says (if it’s an image of text) or what it’s about.

Now, apparently, search engine image recognition technology can try to interpret the content of an image, from what I understand. But there is a lot of room for error there, and that could affect how a page ranks.

They also are not going to describe things using certain words or include people’s names, for example.

Images with Alt-text will show up in Google search results for images, and there are a lot of people searching images to find what they want. Research shows that more than 85% of people shopping online for clothes or furniture put more importance on visual information than text information.

This might be product images, but it could also be photos in customer reviews. Images build trust with them.

So you can see how important that would be for any business, speaker, author — anyone — especially for businesses selling any kind of products online.

Who Should Write Alt-text

A lot of web designers and developers wonder who is responsible for writing Alt-text. After all, if you’re the one designing and building the website, shouldn’t you be the one to write the Alt-text too?

Not necessarily. Of course, if you have an agreement with the client to provide the Alt-text, well, you need to do that.

But accessibility is everyone’s responsibility, not just yours, because you’re working on their document or website.

They may not understand how to write it. But you may not know enough about the subject matter to understand what to write for it either. You might need their input on it.

You can provide guidance, or you can write it and get their feedback.

Images That Need Alt-text

Which images need Alt-text?

Not all images need to have Alt-text. This usually surprises many designers, probably because you’re always hearing you need to add it, which is because so many images on websites and in documents that should have Alt-text are missing it.

It mostly comes down to: is this a decorative image or does it convey meaning? Decorative images do not need Alt-text.

Images that convey meaning and should get Alt-text are usually:

• logos;
• images of text;
• images that convey information;
• images being used as hyperlinks or buttons;
• icons that are not decorative, such as a menu icon or social media icons; and
• simple data graphics.

This is a very general statement. There are also scenarios where you wouldn’t use Alt-text for some of them. Context is key in deciding whether or not to add Alt-text.

Not only that, there are also better methods to address some of these elements than by using Alt-text.

Sometimes you have to spend some time understanding the page content before making the determination of whether or not something needs Alt-text or if there is a better alternative.

In other words, you have to see how it’s being used. The same image could have Alt-text on one page and should be ignored on another page.

To give you an example, as part of some remediation work (“remediation” means to make something accessible), a client recently asked us to add the Alt-text we had come up with to the images in Adobe Bridge. That way, the Alt-text would be consistent and in place, and they wouldn’t need to rewrite anything.

The issue with this, as I explained to them, was that in some cases, they might need to remove the Alt-text or maybe even modify it.

Another issue was that we did not add Alt-text to some of the images because of how they were being used in that one project we worked on. But that’s not to say those images shouldn’t get Alt-text if used elsewhere.

How to Write Good Alt-text

Writing good Alt-text for images that need it is not an exact science. There’s a lot of gray area, and it depends on how the image is used and maybe even the nature of the document or website — for instance, whether it’s for a museum, a clothing store, a coffee shop or a consulting business.

It’s also very easy to get Alt-text all wrong.

Context

Again, context is key, and as I said earlier, you might have to spend some time in the document or on the web page getting an idea of the content on it before you start writing Alt-text for the images there.

Having said that, it’s much easier to write the Alt-text as you’re working on a document or website than it is to come back later and do it.

You want to describe the image for anyone who cannot see it. The goal is for them to have the same understanding of the image as people who are able to see the image — just in text form.

What you use for Alt-text on images on an art, photography or museum website would be very different from what you’d use on the same images on another type of website. It’s not one size fits all.

Images of text

Now, for images of text or even logos, it’s much more straightforward. You simply include the same text that is in the image — no embellishing.

Length of Alt-text

How long Alt-text should be is another factor to consider. Alt-text should be short and to the point. More is not necessarily better.

Alt-text cannot be paused while being voiced. If you have, for example, Alt-text on a complex infographic that gives all the details or data, no one’s going to be able to comprehend all that information in one fell swoop.

A good rule of thumb is anywhere from a few words to a few sentences.

Some people suggest that Alt-text shouldn’t exceed 125 characters. Others recommend 250 characters. I have some clients with their own internal guideline for Alt-text length, which I’ve had to use, that usually dictate a shorter length.

Pause after Alt-text

It’s good practice to add a period at the end of the Alt-text, so screen readers will pause. It’s not required. It just makes it more user friendly.

Alt-text Mistakes

As I said earlier, it’s easy to get Alt-text wrong. I see a lot of web designers, developers and clients making a lot of mistakes with Alt-text.

Redundant Alt-text

The first one is using redundant text. Using redundant text is an annoyance to users of screen readers.

What I mean by “redundant text” is if you add text to the Alt-text saying it’s an image. Someone using a screen reader will already know it’s an image and will hear the word “image” or “graphic.” However, it may be good to tell them that the image is an illustration, chart or graph.

Another way to avoid redundancy is to not use the same text for the caption, if there is one.

Insufficient Alt-text

A lot of people will write insufficient Alt-text. They don’t say enough about what’s in the image.

Let’s say you have a map image. Using “Map of whatever” for the Alt-text might be insufficient. Why is that map there? Just to show a map? To tell people how to get around somewhere?

Think about the purpose that it’s serving by being there.

Artistic descriptions

Another mistake I often see with Alt-text is describing something artistically. Now, in a few cases, that might actually be what you should do.

But for the most part, you want to avoid describing images that way. For instance, I’ve had clients want to describe a pie chart visually — with the colors used and talking about the pie pieces, like “The blue pie piece represents 25%, the green pie piece represents 15%” and so on.

First off, how the pie chart looks isn’t important. Only the data it conveys is important.

Second, someone who has had blindness or color blindness their entire life won’t know what the colors are.

Beyond descriptive

Yet another common mistake with Alt-text is including more information than the sighted user is getting.

An example of this could be describing a photo of a person in a thoughtful pose, which is fine, but adding in some text about what they’re thinking about goes beyond what someone can see when looking at that image.

Another example I’ve seen is adding a credit line, like for a photographer, in the Alt-text that doesn’t appear elsewhere.

Incorrect Alt-text

Sometimes, I come across Alt-text that is incorrect all together. It doesn’t make sense at all for the image. Maybe there is a photo of a dog, but the Alt-text says something about a cat.

Background images

A lot of web designers and developers think background images, which on the web are placed with CSS, do not need Alt-text.

Not all background images are decorative though. Like I said earlier, it depends on the context.

How you address them would be different.

Keyword stuffing in Alt-text

A lot of web designers and developers think that Alt-text is a good opportunity to stuff keywords into their images to help their SEO.

If the keyword makes sense, that’s one thing. If you’re just stuffing a bunch of keywords into the Alt-text, though, that doesn’t help with SEO or help users.

Interactivity

A lot of people will add hyperlinks to Alt-text. That’s fine, but you have to know that Alt-text doesn’t allow for clickable hyperlinks. So if you go stick in a long URL, someone would have to remember or write that down.

How to Add Alt-text to an Image

Now that I’ve gone into all those things, how the heck do you add the Alt-text to an image? There are different ways to do it depending on which program you’re using for document layout or if you’re doing it to an image on a website.

Add Alt-text in InDesign

I am just going to focus on InDesign in terms of document design.

If you’re working on a document in InDesign, go to the image, right-click it and select Object Export Options. Make sure the Alt-text tab is selected in the dialog box and then choose “Custom” from the dropdown menu. Then just add the Alt-text.

Now, I’ve found that InDesign doesn’t always save the Alt-text. I guess it’s a random bug and it’s quite frustrating! So I put a copy of it on the pasteboard just in case, or in a text file.

You can also automatically apply Alt-text from an object style. Create an object style, then go to Export Options, Alt-text. Then for Alt-text source, choose XMP Description. This will pull it in from Adobe Bridge, if you already have the Alt-text set there.

I demonstrated how to add Alt-text to an image in InDesign in a video on the InDesign Secrets YouTube channel.

Add Alt-text to an Image on a Website

To add Alt-text to an image on a website, you simply put it in the Alt-text field on the image in the Media Library in WordPress and then insert the image on the page.

If the image has already been inserted on the page, you will need to add the Alt-text to the code of the image on the page, or you’ll need to reinsert the image. On the img tag, add alt=”” with the Alt-text in between the quotation marks. It doesn’t matter where inside the img tag you add it — the beginning, the middle or the end.

How to Mark an Image as Decorative

Now, let’s talk about how to mark an image as decorative, so it will be ignored by a screen reader and other assistive technology.

Whether it’s in InDesign versus on a website, it’s called two different things.

How to Artifact an Image in InDesign

In InDesign, it’s called “artifacting.”

In InDesign, you artifact an image by going to the Object Export Options I mentioned earlier. But instead of selecting the Alt-text tab, select Tagged PDF, then “Artifact” from the dropdown menu.

You can also apply an artifact from an object style. This can really speed up your workflow.

I show how to artifact an image in InDesign in the same video on the InDesign Secrets YouTube channel.

How to Mark an Image as Decorative on a Website

On a website, it’s very different. You want to have an alt attribute (you must have an alt attribute), but it should be empty. It should be just alt=””. This is also called “null Alt-text.”

In the WordPress Media Library, you may see the option to mark the image as decorative. That does the same thing.

But for any images that have already been inserted on a page, you will need to manually change the code, or, again, reinsert the image.

Free Alt-Text Guide

There’s more to know about Alt-text, especially when dealing with maps, complex infographics, bar charts, pie charts or line graphs, for example. But this should give you a strong start to understanding and writing Alt-text for images.

Download The Alt-Text Made Easy Guide.

Originally published as a podcast and transcript at https://creative-boost.com/alt-text-for-images/