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.
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.
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.
Not much info!
In fact, the message was a lengthy letter, formatted as an image, and containing critical information for members, volunteers, and supporters:
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.
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.
Right-click on the image and choose edit alt text. Edit the automatic text or write your own.
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.
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:
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:
Learn more about alt text and find additional guidelines with these links:
Header photo by S O C I A L . C U T on Unsplash
