How to write great alt text — And why it matters
By Pamela S. Hogle and Deni Elliott
As the editor or writer of digital content, you want to reach all the members of your audience. This is true whether you are writing news, a blog, marketing content, educational content — or something else.
Alt text is an essential tool that makes your content accessible and comprehensible to readers who have visual impairments. It ensures that those readers get the same benefit from photos, charts, and other visuals that fully sighted readers get. If done right, including alt text with images can also improve the SEO of your content.
Unfortunately, much content — on websites and social media, in promotional or informational emails and newsletters — lacks alt text. Or if it does include it, it’s often very basic alt text that is not terribly useful.
We’ll first take a look at what alt text actually is and then provide tips for writing it. This article will wrap up with links to resources for adding alt text on a variety of platforms.
What is alt text?
The most basic explanation of alt text is that it is a description of a visual element, usually a photo. It adds context and describes in words information that sighted readers will get by looking at the image. Alt text can be provided for any graphic, whether a chart, infographic, drawing, or photo. However, alt text descriptions are usually not provided for images that are purely decorative.
The technical definition of alt text helps editors understand how it works. The alt text is an HTML attribute: alt.
When including an image in digital content, an editing or publishing tool tags the image with an HTML tag: <img>
A person reading the content sees the image.
Unless she doesn’t. That could happen for several reasons. She might be using a screen reader because she has a visual disability that limits her ability to see the image. Or she might have poor internet connectivity or limited data and have her email or web browser set so that it doesn’t automatically load images.
In those — and many other — cases where images are not visible or cannot be found, the reader will see, at best, an empty rectangle. Some content will not even show a rectangle; in these cases, there is no indication that an image is missing from the content view.
HTML offers a solution
The HTML attribute “alt” provides alternative information for use when the image is not available. That alternative is a text description that appears on the screen in place of the image. The alt text provides the screen reader something to read. For low-bandwidth users, it provides information that they would otherwise miss out on.
But of course, it only works if the editor includes the alt attribute and provides useful descriptive text.
Any content that uses HTML tags can include alt text, and many platforms build in the opportunity to add it. Common browsers — including Chrome, Internet Explorer, Safari, Firefox, and more — support use of alt text. Many email platforms do as well.
Guidelines for writing usable and useful alt text
- It’s important to include alt text whenever an image adds information that is useful to readers of the content. Purely decorative images don’t need descriptive alt text, but it is a good idea to at least enter something to mark the absent image: use “descriptive image,” “corporate logo,” or similar generic text, as appropriate.
- Alt text is short, about 10-15 words or 140 characters or so. Some screen readers or platforms have limits and will truncate the alt text when the limit is reached.
- If an image is complicated and requires more than a short description to provide value to readers, consider providing a link to an explanatory text. HTML has this covered, too, with the “longdesc” attribute.
- Alt text differs from image captions in key ways — it is intended to add value, not duplicate the caption. For example, if the caption identifies the subjects, then the alt text does not need to do that. If both a caption and alt text are included, ensure that together they provide a complete description of the image that helps the reader understand what it depicts and why it is part of the content.
- Alt text can focus on describing the action taking place in the image or provide context for the image. Adding information that fully sighted readers will glean by looking at the image lets visually impaired readers know what the image conveys and how the image connects to text content.
- Alt text should not editorialize; it should not include assumptions or interpretations of the image or describe subjects’ intentions.
- Many designers present text in graphical formats. This is common in email newsletters, advertising emails, and other promotional materials, for example. It’s convenient for content creators, as it ensures that all recipients see the content styled and presented in the same way. But … screen readers see the graphical format as an image, so their users will not hear that text. For these images, the alt text should restate the text contained in the image. This is a great place to use the longdesc attribute if you cannot restate or succinctly summarize the text. A recent example is this email from a local animal shelter. Their marketing team sent out an important notice about their COVID-19 protocols. Without alt text or images, this is what it looked like:
Not much info!
In fact, the message was a lengthy letter, formatted as an image, and containing critical information for members, volunteers, and supporters:
- Alt text is plain text. It cannot include bold, italic, all caps, super- or subscript, bulleted or numbered lists, math symbols, or other “fancy” formatting.
- Color and other highly visual details don’t add a lot of useful information to alt text. Some details do, though, depending on context. Some marketing images, for example on university websites, are used specifically to illustrate the organization’s diversity. In these instances, you want to convey something about the subjects’ social identities. Including a description of subjects’ apparent race or gender might seem to add essential information. But misidentification can cause significant offense to those pictured. It’s safer to use alt text that says something like, “Six students, representing a mix of genders and ethnicities, study around a table” rather than itemizing them, e.g., “An Asian boy, an African American girl, two Hispanic boys, and two white girls …” Or, “a student walks with her guide dog along the campus waterfront” rather than “a blind student …”
- Alt text should include SEO keywords whenever possible. This allows readers to get a better idea of why the image is part of the content and how it ties in with the rest of the content. It also helps your SEO ratings. However, do not do this if it interferes with the usefulness of the text description. It is far more important to use alt text to provide context and details that inform the reader.
Improve your alt text
Below are two examples from the Guiding Eyes for the Blind website. These images include successful alt text — and a discussion of what makes them work:
The alt text for this photo reads: “Destiny, a female yellow Labrador retriever guide dog, sits on the curb while in harness and looks up with big brown eyes.”
This alt text conveys information about why the photo and link are on the page. It adds context to the caption, “Apply For A Guide Dog” by letting the reader know that the dog is wearing a harness, ready for work, and is establishing eye contact with her potential handler. Giving the dog’s name, Destiny, personalizes the connection with the reader.
Basic alt text that identified the image simply as a dog would not be as useful to visually impaired readers.
The alt text for this photo reads: “Puppy raiser Elizabeth receives a kiss on the cheek from Clifford, an adorable yellow lab puppy.”
This alt text describes the trusting relationship between puppy raiser Elizabeth and Labrador puppy Clifford. It, along with the caption, thus helps to promote puppy raising.
While accurate, alt text reading “A yellow Labrador puppy licks the face of a young woman in a purple hat” would lack that context and fail to provide valuable information to readers.
Add alt text on the platforms you use most
Some platforms use AI (artificial intelligence) tools that incorporate image recognition and natural language generation tools to create automatic alt text. Some are passable; others are pretty awful. Even the worst alt text — text that lists the items in the image with no context, for example — is better than nothing, though, for someone who is using a screen reader.
MS Word
Right-click on the image and choose edit alt text. Edit the automatic text or write your own.
WordPress
When you insert an image into a page or post on a WordPress site, the field for entering alt text appears at the top of the block where you enter information on the image placement, the caption, etc.
Facebook automatically generates very basic alt text. To edit it, click on the photo once you’ve uploaded it. In tiny text at the bottom, there should be an “options” link. Click on it and select “Change alt text.” A window will pop up. If the photo was added prior to the launch of the auto alt text feature, the box will be empty. Write or replace the text in the box and save. If your alt text is more than 100 characters, you’ll get a warning, but the longer text will be saved with the image.
If you are adding a photo to a post, click on the little brush icon to edit the photo. Choose “Alt text” and click “Override generated alt text” to replace the auto text with something better. Don’t forget to click the tiny “Save” button waaaayyy across and down at the bottom right corner of the screen.
When you add an image to a tweet, click “Add description,” and type your alt text. It can be up to 420 characters.
When you add an image to a LinkedIn post, a link to “Add alt text” will appear in the upper-right corner of the image. Click it, add your alt text — up to 120 characters — and save. Click “Next” to finish your post.
eLearning authoring tools
Most major eLearning platforms and authoring tools support alt text. Use online help or user forums to find out how. Here are links to help for a few of the more popular tools:
Email newsletters & promotions
Like the authoring tools, the major public relations and marketing platforms support alt text. How you enter it depends on the tool. Here are links to help for some of the more common platforms:
Additional Resources
Learn more about alt text and find additional guidelines with these links:
- Microsoft Support — Everything you need to know to write effective alt text
- Moz — What is Alt Text?
- W3C, the Web Accessibility Initiative — Tips and Tricks
- WebAim, a web accessibility resource — Alternative Text
Header photo by S O C I A L . C U T on Unsplash
