Alt Tags and Accessibility: How Marketers Can Better Show Audiences the Full Picture

As marketers, we talk so much about the images we use in our campaigns, whether we're taking a risk on creating a comic series, asking our everyday influencers to add personal snapshots in the blog posts they're writing, or ensuring we promote diversity in the stock photography we choose.

From advances in voice technology, interactive content experiences, and growing interest in visual and video content, the digital materials marketers are creating are becoming increasingly complex and incorporating more multimedia initiatives. While these features are all exciting, they also present new challenges for marketers in terms of making sure all of our content is able to be fully seen and experienced by every member of our audience.

It's tempting to want to just pack the metadata spaces of your content with a string of high ranking keywords to try to meet your SEO needs as quickly as possible. But the purpose of these spaces isn't to get the attention of Google's site crawlers. It's to offer an alternative explanation and description for people who may not be able to get a complete view of your message from the main page alone.

If you aren't using alt text correctly, then you're alienating a large segment of your consumers.

What Are Alt Tags?

Like many of you, I was first introduced to alt tags with the instruction to place a targeted keyword phrase in the field for SEO purposes. For years, I continued on in this manner, thinking this was its only use. I was accidentally ignorant in intent, and only recently did I learn about the use of alt tags for accessibility purposes.

Alt text-also known as alt tags, alt attributes, and alt descriptions-tells viewers what is an in image. This helps individuals with vision impairments to "see" what is being displayed on the screen. It is also helpful for sighted people to understand what was meant to be shown if an image fails to load. Finally, alt text helps search engines in the same manner it does humans, informing the search engines of what the image is displaying.

Alt attributes are part of the website's code, and their job is to give screen readers a nod that an image exists, as well as explaining what's in the image. Kerry Kijewski, freelance writer and accessibility advocate, explains in more detail. She says, "An alt tag is the code that presents an image description. The contents of the tag attribute is the image description itself." She continues, "Here is an example of an image tag with an alt attribute:

<;;;;;;img src="SomeFileName.jpg" alt="picture of an image tag with an alt attribute">;;;;;;

SRC refers to the file of the image you want to show, while alt refers to the text description of what is shown in the picture."

So how did SEO find its way into these fields meant for accessibility? SEO specialist Claire Paniccia explains, "Google can't see images the way seeing people can, so the alt text serves a similar purpose to Google as it does to visually impaired users. It conveys the meaning of the image. From an SEO perspective, we can utilize this space to help indicate the context and topic of the page to Google."

Not only will including thoughtful, fully-comprehensive alt tag descriptions demonstrate a sense of respect and consideration to your human readership, it will help your SEO as well. Today's search algorithms are behaving more like humans, and prioritizing these areas of rich, valuable text above a disconnected string of individual keywords.

Assisting Audiences with Vision Impairments

Alternative text technology exists to help people with blindness, low vision, or any other impairment understand what is taking place in an image. This is done with the assistance of screen readers, which read the alt text and image descriptions out loud for the individual viewing the website.

Image attribution: kevin laminto

Kijewski says, "As a blind person, I first rely on alt tags to tell me that an image is present. Even though I am blind, I maintain an interest in how things look, and in information conveyed by images."

Theresa Parish, skin care entrepreneur, agrees and says, "Just two years ago, I lost most of my vision due to a stroke. I've had to relearn a lot of very basic things, like using a computer. Alt text and image descriptions help me understand the images I'm looking at. It is one of many things that helps me stay independent and make informed choices for things like shopping or looking up recipes."

From a marketer's perspectives, alt tags are one of the most effective forms of a CTA. If you disregard them, you throw away the chance to achieve any deeper engagement from potential customers. In addition to just understanding what's in an image, consumers who are visually impaired rely on alt tags to direct them if an action needs to be taken. Kijewski says, "Images can be clickable, leading to new pages of potentially important information. If the image contains no alt tag, I am liable to skip over it altogether. If it contains a machine-generated alt tag with little or badly constructed information, I would not necessarily know that activating it could benefit me."

Image Descriptions Should Complement Your Content's Story

When you first start naming your alt text, you may feel urge to list everything in the image. Approach these descriptions as though you're writing a caption to a painting, not as if you're giving an entire museum tour. While there's not a precise word count, don't overwrite the descriptions either. Parish says, "I don't think there's a set length. If you can describe a thing efficiently, do so! Just give me the info I need to understand what is going on in the picture."

However, Parish recommends putting your storytelling know-how to good use in these short descriptions. She says, "Give me the 'feel' of the picture. Tell me the story and let me understand it. Describing a shirt as button-down plaid is a great start, but tell me more. Make me understand that it is soft, and drapes, and comes over my hips, and the neckline is becoming, and would look great with my jeans. Give it to me with the picture, just like a sighted person would see it on that image."

Best Practices for Alt Tag Accessibility

What happens when there is text in the image itself? Kijewski says, "If the landing page features an image of the sign in front of Grand Major Enterprises, then the alt tag could read 'Welcome to Grand Major Enterprises. Family-owned since 1921!' Presumably, this would be the legend featured on the sign."

But other images with text are harder to describe. She continues, "Suppose you have an image of a pie chart containing data. In that case, the alt tag would say something like, 'pie chart showing the breakdown of Grand Major Enterprises interests. Click for text breakdown.' Clicking or pressing enter could then lead to a page with a summary report showing the breakdown. Generally speaking, if you have information longer than a caption, you would either not display it in image form, or provide the information in alternate format."

I asked Kijewski if "null" should ever be used to describe an image. She answers, "Ultimately, never. I first thought if you used a blank image to create white or dark space that would be a case for a null alt tag, but on reflection, the correct way would be to put the word spacer or a description such as 'white space,' or 'dark space'. We don't use the word null in interface design, and we don't leave a tag empty. It could even be something like if an image of a bullet used for list items is a square bullet or a round bullet. If that's in the design, we may care about it."

Image attribution: Konstantin Dyadyun

And let's not fall victim to relying on automatic alt text, either. While it may seem as a helpful tool for both alt text accessibility and saving us time, it can be faulty and potentially unsafe. If you use it, expect for the occasional reporting of an image to be something it's not, such as describing a monkey eating a banana as a pickup truck. Automatic text can also create a potential security risk for your website.

Kijewski explains, "Machines frequently make bad alt tags. Sometimes they use the literal path and file name of the image file they refer to like this, alt="img/thumbs/548cc2b80cfe803.jpg". This is not the image you really want to project, even if the images happen to be named nicely. Usually they are named some hexadecimal value as above, but often they are named with times and dates, or the word img and a number. Not only is this not useful or a good projection of your image, but providing users insight into the file and folder structure of your website is a security risk.

As you commit to follow best practices for alt tag accessibility, you might find yourself feeling some anxiety about letting go of your old way of using that field as a resting place for your keywords. Don't. Paniccia reports, "With the introduction of RankBrain, Google's gotten smarter and has an easier time understanding what a page is actually about (rather than just looking for exact match keywords like it used to). So instead of stuffing the alt text with keywords, marketers can simply write descriptive alt text that ties the image into the topic of the page. That way it serves both visually impaired users and SEO."

For more stories like this, subscribe to the Content Standard newsletter.

Featured image attribution: Chase Clark